react新的生命周期
一. react16当前生命周期
- componentWillMount
render前,所以setState不会重新渲染,服务端渲染唯一调用,推荐用constructor代替之 - render
- componentDidMount
render后,调用setState会重新渲染,页面可交互,可以请求数据 - componentWillRecieveProps(nextProps)
已挂载组件接收到新props触发 - shouldComponentUpdate(nextProps, nextState)
在接收到新的props或state时是否重新渲染,默认返回true;首次渲染或forceUpdate时不会触发; - componentWillUpdate(nextProps, nextState)
如果shouldComponentUpdate返回false,update相关的函数都不会触发;不要使用setState; - componentDidUpdate(nextProps, nextState)
- componentWillUnmount
卸载组件
二. 由于未来采用异步渲染机制,所以即将在17版本中去掉的生命周期钩子函数
- componentWillMount
- componentWillRecieveProps
- componentWIllUpdate
三. 新增两个
- static getDerivedStateFromProps
会在初始化和update时触发,用于替换componentWillReceiveProps,可以用来控制 props 更新 state 的过程;它返回一个对象表示新的 state;如果不需要更新,返回 null 即可 - getSnapshotBeforeUpdate
用于替换 componentWillUpdate,该函数会在update后 DOM 更新前被调用,用于读取最新的 DOM 数据,返回值将作为 componentDidUpdate 的第三个参数
四. 建议用法
class A extends React.Component { // 用于初始化 state constructor() {} // 用于替换 `componentWillReceiveProps` ,该函数会在初始化和 `update` 时被调用 // 因为该函数是静态函数,所以取不到 `this` // 如果需要对比 `prevProps` 需要单独在 `state` 中维护 static getDerivedStateFromProps(nextProps, prevState) {} // 判断是否需要更新组件,多用于组件性能优化 shouldComponentUpdate(nextProps, nextState) {} // 组件挂载后调用 // 可以在该函数中进行请求或者订阅 componentDidMount() {} // 用于获得最新的 DOM 数据 getSnapshotBeforeUpdate() {} // 组件即将销毁 // 可以在此处移除订阅,定时器等等 componentWillUnmount() {} // 组件销毁后调用 componentDidUnMount() {} // 组件更新后调用 componentDidUpdate() {} // 渲染组件函数 render() {} // 以下函数不建议使用 UNSAFE_componentWillMount() {} UNSAFE_componentWillUpdate(nextProps, nextState) {} UNSAFE_componentWillReceiveProps(nextProps) {} }