react-新旧生命周期

旧版生命周期

所适应的版本: React < 16.0.0

1. contsructor
   1. 同一个组件对象只会创建一次
   2. 不能在第一次挂载到页面之前, 调用setState, 为了避免问题, constructor中严禁使用setState
2. componentWillMount
   1. 正常情况下,也只会运行一次
   2. 可以使用setState,但是为了避免bug,不推荐使用,因为在某些特殊情况下,该函数会被调用多次
3. render
   1. 返回一个虚拟dom,会被挂载到虚拟dom树中, 最终渲染到真实dom中
   2. render可能不止运行一次,只需要重新渲染,就会重新运行
   3. 严禁使用setState,会造成无限递归渲染
4. componentDidMount
   1. 只会执行一次
   2. 可以使用setState
   3. 通常情况下,会将网络请求,启动计时器等一开始需要的操作,书写到该函数中
5. 组件进入等待状态(活跃状态)
6. componentWillReceiveProps
   1. 即将接受新的属性值, 参数为新的属性对象,this.props尚未发生变化
   2. 该函数可能会导致一些bug,所以不推荐用
7. shouldComponentUpdate
   1. 指示react是否渲染组件,需要返回布尔值,true为渲染,false为不渲染
   2. 默认返回true
8. componentWillUpdate
   1. 组件即将被重新渲染,不咋用
9. componentDidUpdate
   1. 往往在该函数中操作dom,改变元素
10. componentWillUnmount
    1. 通常在该函数中销毁一些组件依赖的资源,比如计时器

新版生命周期

所适应的版本: React >= 16.0.0

1. getDerivedStateFromProps
   1. 通过参数可以获取新的属性和状态
   2. 该函数是静态的
   3. 该函数的返回值会覆盖掉组件状态
   4. 没啥用
2. getSnapshotBeforeUpdate
   1. 触发时机: 真实dom构建完成,但并未渲染到页面时触发
   2. 在该函数中,常做一些dom操作
   3. 该函数需要与componentDidUpdate一起用(目测不用报警告)
   4. 该函数的返回值(不写返回值报警告),会作为componentDidUpdate的第三个参数