React 组件的生命周期函数

React16废弃的三个生命周期函数

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

 

react 组件的三个阶段

• 挂载阶段
• 更新阶段
• 卸载阶段

 

 

• 挂载阶段 ：

  这个阶段的生命周期函数调用如下：

  • constructor     组件构造函数，第一个被执行   在构造函数里面我们一般会做两件事：
    • 初始化state对象
    • 给自定义方法绑定this
  • getDerivedStateFromProps    static getDerivedStateFromProps(nextProps, prevState)
  • render   render函数是纯函数，里面只做一件事，就是返回需要渲染的东西，不应该包含其它的业务逻辑，如数据请求，对于这些业务逻辑请移到componentDidMount和componentDid Update中
  • componentDidMount  组件装载之后调用，此时我们可以获取到DOM节点并操作，比如对canvas，svg的操作，服务器请求，订阅都可以写在这个里面，但是记得在componentWillUnmount中取消订阅

在componentDidMount中调用setState会触发一次额外的渲染，多调用了一次render函数，但是用户对此没有感知，因为它是在浏览器刷新屏幕前执行的，但是我们应该在开发中避免它，因为它会带来一定的性能问题，我们应该在constructor中初始化我们的state对象，而不应该在componentDidMount调用state方法

更新阶段

这个阶段的生命周期函数调用如下：

• getDerivedStateFromProps
• shouldComponentUpdate(nextProps, nextState)  有两个参数nextProps和nextState，表示新的属性和变化之后的state，返回一个布尔值，true表示会触发重新渲染，false表示不会触发重新渲染，默认返回true
• render
• getSnapshotBeforeUpdate(prevProps, prevState)  表示之前的属性和之前的state，这个函数有一个返回值，会作为第三个参数传给componentDidUpdate，如果你不想要返回值，请返回null，不写的话控制台会有警告, 还有这个方法一定要和componentDidUpdate一起使用，否则控制台也会有警告
• componentDidUpdate(prevProps, prevState, snapshot)  在这个函数里我们可以操作DOM，和发起服务器请求，还可以setState，但是注意一定要用if语句控制，否则会导致无限循环

 

卸载阶段

卸载阶段，当我们的组件被卸载或者销毁了

这个阶段的生命周期函数只有一个：

• componentWillUnmount

componentWillUnmount

当我们的组件被卸载或者销毁了就会调用，我们可以在这个函数里去清除一些定时器，取消网络请求，清理无效的DOM元素等垃圾清理工作

注意不要在这个函数里去调用setState，因为组件不会重新渲染了