React生命周期及减少render次数

React生命周期

环境:react16

常用生命周期的钩子分类后，分布3个阶段内

• 初始化阶段 - 组件创建阶段才会执行

  • componentWillMount
  • componentDidMount

• 运行期间 - 组件运行阶段根据情况执行

  • componentWillReceiveProps(nextProps)：即将用nextProps替换当前组件的props
  • shouldComponentUpdate：this.props或state发生改变时，询问是否需要进行渲染
  • componentWillUpdate(newProps,newState,newContext): this.state 或 this.props 即将发生改变，并准备渲染前，此时this.props和this.state还是老的值
  • componentDidUpdate(oldProps,oldState,Snapshot): 运行期间组件调用render渲染完毕后，此时this.props和this.state已经是最新值，而oldProps和oldState为变更前的值

• 组件销毁

  • componentWillUnmount

image

父子组件数据变化何时Render?

image

• 总结几点
  • 有shouldComponentUpdate 则根据它的返回值判断是否render

    继承自 React.PureComponent的类组件默认就是有shouldComponentUpdate的，只是做了浅对比，我们不需要再显式的写一个shouldComponentUpdate

  • 无shouldComponentUpdate 则render
  • 父组件不render，子组件也收不到 componentWillReceiveProps
  • 子组件自己render，不影响父组件

如何用简单的方法尽可能减少render提高效率？

1、 使用React.PureComponent代替React.Component

注意在变更属性时要时浅层的值或地址发生改变

2、 自定义shouldComponentUpdate,根据当前组件的属性情况，自行编写哪些属性发生变化时进行render

容易遗忘当前组件不实用的属性，而子组件使用的属性，导致父组件不render，子组件也没render

函数式组件

父子组件刷新的逻辑

• 同class组件的区别？
  在父组件属性变更时，函数式组件会进行浅对比再判断是否需要渲染，
• 那同加了memo的区别是啥呢？
  memo用于当组件接收到父组件的更新渲染通知时，进一步对属性进行浅比较来判断是否更新，如果没有memo，那么组件接收到来自父组件更新通知时则强行渲染

相关文件引用及推荐

• 10个案例让你彻底理解React hooks的渲染逻辑
  https://mp.weixin.qq.com/s/t3sBaKXIb023t3pTpdBCtg