React 16.4 的生命周期图
早期React生命周期图
从图中，我们看到了一些变化
废弃的三个生命周期函数 componentWillMount，componentWillReceiveProps，componentWillUpdate。可以理解为带有Will都被干掉了。
新增方法：
1.getDerivedStateFromProps
React生命周期的命名一直都是非常语意话的，这个生命周期的意思就是从props中获取State。
这个函数是为了替代compontWillReceiveProps存在的，所以在你需要使用componentWillReceiveProps的时候，就可以考虑getDerivedStateFromProps来进行替代 了。
这个函数在每次re-render之前被调用，这意味着你的props没有任何变化，而父state发生了变化，导致子组件发生了re-render，这个生命周期函数依然会被调用。
它是一个静态函数，也就是这个函数不能通过this访问到class属性，也并不推荐直接访问属性。而是通过参数传递提供的nextProps以及preState来进行判断，根据传人的props来映射state。getDerivedStateFromProps 总是需要返回值，返回 null 表示不更新，而componentWillReceiveProps 需要调用setState去更新视图数据
static getDerivedStateFromProps(nextProps, prevState) {
//根据nextProps和prevState计算出预期的状态改变，返回结果会被送给setState
}
2.getSnapshotBeforeUpdate
该函数会在render之后执行，而执行之时DOM元素还没有被更新，给了一个机会去获取DOM信息，计算得到一个snapshot，这个snapshot会作为componentDidUpdate的第三个参数传入。
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('#enter getSnapshotBeforeUpdate');
return 'foo';
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('#enter componentDidUpdate snapshot = ', snapshot);
}
React生命周期的三个阶段
挂载阶段
static getDerivedStateFromProps()
更新阶段
static getDerivedStateFromProps()
注意：下述方法即将过时，在新代码中应该避免使用他们：
UNSAFE_componentWillReceiveProps()
卸载阶段
错误处理
当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：
static getDerivedStateFromError()
其他 APIs
用来设置state的值
在16.3开始，议使用setState的异步函数写法，如：原先我们在使用的时候直接进行赋值：
this.setState({inputValue: e.target.value});
而是使用
This.setState(()=>{ Return { inputValue: value};})
异步方法中，该方法提供了一个回调函数，通过该回调函数，可以确保只有等到setState触法完成之后，才会执行执行回调
this.setState((prevState, nextState)=>{ ... }, callback);
调用forceUpdate（）的时候，将会跳过ShouldComponent而直接render组件父组件中调用forceUpdate亦会导致自组件的生命周期被触发包括（componentDidUpdate）
为何移除 componentWillUpdate
大多数开发者使用 componentWillUpdate 的场景是配合 componentDidUpdate，分别获取 rerender 前后的视图状态，进行必要的处理。但随着 React 新的 suspense、time slicing、异步渲染等机制的到来，render 过程可以被分割成多次完成，还可以被暂停甚至回溯，这导致 componentWillUpdate 和 componentDidUpdate 执行前后可能会间隔很长时间，足够使用户进行交互操作更改当前组件的状态，这样可能会导致难以追踪的 BUG。
React 新增的 getSnapshotBeforeUpdate 方法就是为了解决上述问题，因为 getSnapshotBeforeUpdate 方法是在 componentWillUpdate 后（如果存在的话），在 React 真正更改 DOM 前调用的，它获取到组件状态信息更加可靠。
除此之外，getSnapshotBeforeUpdate 还有一个十分明显的好处：它调用的结果会作为第三个参数传入 componentDidUpdate，避免了 componentWillUpdate 和 componentDidUpdate 配合使用时将组件临时的状态数据存在组件实例上浪费内存，getSnapshotBeforeUpdate 返回的数据在 componentDidUpdate 中用完即被销毁，效率更高。
问题：
1.为什么componentWillMount被删掉componentDidMount还在？
componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。
网友评论