组件传值问题
- 父组件给子组件传值应该使用props。
- 子组件要给父组件传值,需要调用父组件传递的方法。
- props传值只能一层一层传递,兄弟组件之间、爷爷组件给孙子组件传值,都需要通过父组件传递。
注意点
- state是内部状态,不会对外部有影响
- 布尔值变量的命名已 "is" 或者 "has" 开头
contextAPI
- Comsumer 的子组件必须是一个方法,接收的参数即为 Provider 中的 value 值,一般会使用解构赋值获取自己想要的变量
- Comsumer 接受的值不用使用 PropTypes 验证其正确性。
性能优化
- 避免使用匿名函数,因为每次触发事件都会生成一个匿名函数,浪费性能。
- 子组件渲染之前使用 shouldComponentUpdate 输入(nextProps,nextState)将其中的值与现在的值 (this.props,this.state) 是否有变化,没有变化就不用重新渲染,减少render次数
生命周期
- 只有使用 class XXX extends component 的才有生命周期 还可以使用 create reactclass 构建
- 装在和更新阶段都会有 render 操作
- ajax 请求应该在 DidMount 和 DidUpdate 之后
装载阶段
- 装载阶段会执行 constructor 并且只会执行一次,在这个阶段会初始化state
- 装载阶段执行顺序 constructor => componentWillMount => render => componentDidMount
更新阶段
- 更新阶段执行顺序 componentWillReciveProps => shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate
- 父组件渲染,子组件会触发 componentWillReciveProps 事件,
卸载阶段
- 卸载阶段只有 componentWillUnMount 一个生命周期,主要是清除一些不必要的东西,比如定时器。
使用的第三方库
- BULMA
- classnames
- caniuse 查看浏览器兼容性问题的网站
- lodashjs 使用 _ 函数
- axios 发送ajax请求