浅谈react(2) 新旧生命周期 （浅谈两个钩子getDerivedStateFromProps、getSnapshotBeforeUpdate）

浅谈React

• 浅谈react(1)三大属性

---

前言

• 本篇谈谈React新旧生命周期，React官方去掉了三个旧生命周期钩子，同时引入了两个新的生命周期钩子。因为中文文档中关于两个新钩子的描述比较少，所以我就看了写博客同时加上验证说了说两个新钩子我的见解

一、聊聊旧的生命周期钩子

1、人有从生到死的一个过程，组件也有从生到死这样一个过程。

• 我们可以笼统的把整个过程划分为挂载、更新、卸载。React提供的生命周期钩子，可以让我们在组件挂载前、挂载后、更新前、更新后、卸载前做一些事情，到了对应的时机React内部调用对应的生命周期钩子。

2、React提供的7个生命周期钩子

• componentWillMount这个钩子在React组件将要被挂载时调用
• componentDidMount这个钩子在React组件挂载后调用
• componentWillReceiveProps这个钩子在React组件props更新时调用
• shouldComponentUpdate这个钩子返回一个布尔值，决定是否要对组件进行更新
• componentWillUpdate 这个钩子在组件更新前调用
• componentDidUpdate这个钩子在组件更新后调用
• componetWillUnmount这个钩子在组件将要卸载时调用

3、React组件生命周期流程图

• 组件在挂载前先调用componentWillMount钩子，随后render生成虚拟DOM,然后React更新真实DOM
• 更新完真实DOM后会调用componentDidMount钩子，此时组件已完成挂载
• 当组件的props更新时，就会调用componentWIllReceiveProps钩子
• 随后shouldComponentUpdate钩子被调用，该钩子用来决定是否更新组件,同时this.setState也会触发该钩子的调用，若返回值为false此次更新终止
• 若shouldComponentUpdate返回值为true，组件将会继续更新，会先调用componentWillUpdate钩子
• 假如我们想越过shouldComponentUpdate的决定去更新组件，可以使用this.froceUpdate进行强制更新。随后调用componentWillUpdate钩子
• 然后执行render生成新的虚拟DOM去和旧的虚拟DOM进行diff，然后更新真实DOM
• 组件在卸载前会调用componentWillUnmount钩子

二、新的生命周期钩子

1.改变

• React官方去掉了原本生命周期钩子中componentWillMount、componentWillUpdate、componentWillReceiveProps这三个钩子，新增了getDerivedStateFromProps和getSnapshotBeforeUpdate这两个新的生命周期钩子

2.新的生命周期流程图

• 在新的生命周期流程图中我们可以看到，组件将要挂载时触发的不再是componentWillMount，而是getDerivedStateFromProps
• 同时当有新的props或者父组件render时、还有this.setState时都会调用getDerivedStateFromProps
• getDerivedStateFromProps被定义成一个静态的函数，而且它在被调用时会传入两个参数，一个是props一个是state,这两个参数都是当前最新的。
• getDerivedStateFromProps可以返回一个对象，用来更新state,这里是除了this.setState之外唯一一个可以更新state的方式。如果在此处不更新state，请返回null
• 还有一个新的钩子函数就是getSnapshotBeforeUpdate，在更新真实DOM之前获取一个快照，这个钩子也可以接受两个参数一个props和一个state，不同的是，这两个参数都是上一时刻，也就是此次更新前那一时刻的props和state。可以有一个返回值，这个返回值会被componentDidUpdate的第三个参数接受到

3、对两个新钩子参数的验证

• 我们来仔细得看一下下面代码以及它的运行结果

class App extends React.Component{
     state = {
       data:1
     }
     static getDerivedStateFromProps(newProps,newState){
        console.log('getDerivedStateFromProps',newProps,newState)
        return {hello:'react'}
     }
     componentDidMount(){
       console.log('componentDidMount')
       setTimeout(() => {
         this.setState({data:100})
       }, 2000);
     }
     shouldComponentUpdate(){
       console.log('shouldComponentUpdate')
       return true
     }
     componentDidUpdate(props,state,value){
       console.log('componentDidUpdate',props,state,value)
     }
     componentWillUnmount(){
       console.log('componentWillUnmount')
     }
     getSnapshotBeforeUpdate(preProps,preState){
       console.log('getSnapshotBeforeUpdate',preProps,preState)
       return '你好React'
     }
     render(){
       console.log('render','当前state:',this.state)
       return (
         <h1>hello</h1>
       )
     }
 }

• 首先我们可以看到所有钩子的运行顺序，这里就不在一一说了，下面描述说的第几行输出是输出结果前面我加的编号，同时我只对state进行了改变验证。
• 代码中我们刚开始状态中数据是一个data值为1，组件第一次挂载会调用getDerivedStateFromProps,我们可以看到输出结果第一行后面那个对象就是此时最新的state,这次调用这个钩子函数，我们的返回值为{hello:'react'},然后我们在第二行输出中看到此时的state已经改变，所以说这个钩子的返回值返回的对象和this.setState中作用几乎一样，被合并到state。(如我们前面所说，两个参数是当前state和props的最新值)
• 过了两秒钟，此时调用了this.setState({})，我们看第四行输出中的state值已经是最新的值，data从1更改为100
• 随后调用shouldComponentUpdate钩子，输出结果第5行
• 然后会进行render，输出结果第6行
• 然后会调用getSnapshotBeforeUpdate钩子,输出结果第7行，此时我们发现这个钩子接收到的两个参数，state中data的值居然是之前的1，而不是更改后的100。（这里也就验证了我们前面说的这两个参数都是上一时刻，也就是此次更新前那一时刻的props和state），然后我们在这里返回了一个值“你好React”
• 随后我们在第8行输出结果中看到你好React,也就是说我们在componentDidUpdate中拿到了getSnapshotBeforeUpdate的返回值，这样我们就可以拿到更新前的某些数据。

总结

• 总结就不写关于技术的东西了
• 第二篇浅谈react写完啦
• 今天又是新的一天，我们都要开心啊