React生命周期

发表于 | 分类于 | 阅读次数:

React生命周期

在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。

React生命周期分为三个阶段：

  • 初始化阶段
  • 运行中阶段
  • 销毁阶段

image.png

初始化阶段

设置组件的默认属性

1
2
3
4
5
static defaultProps = {
    name:"wzb",
    age:23
};
Counter.defaultProps = {name:'wzb'}

设置组件的初始化状态

1
2
3
4
constructor(){
    super();
    this.state = {number:0}
}

componentWillMount()

组件即将被渲染到页面之前触发，此时可以进行开启定时器，向服务器发送请求等操作。

render()

组件渲染

componentDidMount()

组件已经被渲染到页面中后触发，此时页面中有了真正的Dom元素，可以进行DOM相关操作。

运行中阶段

componentWillReceiveProps()

组件接收到属性时触发

shouldComponentUpdate()

当组件收到新属性，或者组件的状态发生改变时触发，组件首次渲染时不会触发。

1
2
3
4
5
shouldComponentUpdate(newProps,newState){
    if(newProps.number < 5) return true;
    return false;
}
//该钩子函数可以接收2个参数，新的属性和状态，新的属性和状态，返回true/false来控制组件是否需要更新。

一般我们通过该函数来优化性能：

一个React项目需要更新一个小组件时，很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法，形成新的虚拟DOM，再用diff算法对新旧虚拟DOM进行结构和属性的比较，决定组件是否需要重新渲染

无疑这样的操作会造成很多的性能浪费，所以我们开发者可以根据项目的业务逻辑，在shouldComponentUpdate()中加入条件判断，从而优化性能

例如React中的就提供了一个PureComponent的类，当我们的组件继承于它时，组件更新时就会默认先比较新旧属性和状态，从而决定组件是否更新。值得注意的是，PureComponent进行的是浅比较，所以组件状态或属性改变时，都需要返回一个新的对象或数组

componentWillUpdate()

组件即将更新时触发

componentDidUpdate()

组件被更新完成后触发，页面中产生了新的DOM元素，可以进行DOM操作。

销毁阶段

componentWillUnmount()

组件被销毁时触发，这里进行一些清理操作，例如清理定时器，取消redux订阅事件等。