写在前面
没啥好写的,说是资本寒冬,多学点东西总没坏处
干看文档可真是 枯燥又难懂呀 但是坚持至少看一遍,在实际应用过程中,大概率能够突然领悟或者立马想到文档中对应的点。
react.js安装(通过官方脚手架安装)
1 | $ cnpm install -g create-react-app |
组件和props && state
目前,我理解的props 就是组件中用来接收传值的入口
组件自身是没有办法修改自己的props值的
这时候 引出了state,即 状态 组件是可以操作state的(通过setState)
基本的条件渲染
- if else 判断
- A && B 原理:当A表达式为true,总是返回B;而A为false,总是返回false
- 三目运算符 condition ? true : false
- 阻止组件渲染 只需要让render返回null 即可实现
表单
受控组件?? 没看明白
状态提升
react事件处理
在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的 this 指向当前组件实例。
jsx回调函数中的this 类的方法默认是不会绑定this的 如果忘记绑定,那么这个函数的this值会是undifined
绑定事件处理函数的 this 到当前组件,有如下几种方式。
第一种方式,通过 bind 方法,原地绑定事件处理函数的 this 指向
这种方式的优点是书写起来相对简单,但是每次渲染都会执行 bind 方法生成一个新的函数,会有额外的开销,由于事件处理函数是作为属性传递的,所以从而导致子组件进行重新渲染,显然这不是一种好的方式。
第二种方式,通过一个箭头函数将真实的事件处理函数包装一下
第三种方式,在 constructor 中预先将所有的事件处理函数通过 bind 方法进行绑定。
this.props.back