旧版 React 生命周期函数
常用:componentDidMount
、componentWillUnmount
、render
- componentDidMount:做一些初始化操作,例如:开启定时器、发送网络请求、订阅消息
- componentWillUnmount:做一些收尾操作,例如:关闭定时器、取消订阅消息
- forceUpdate:用于强制重新渲染,即使状态不变
- componentWillReceiveProps:初始化 render 的时候不会执行,它会在 Component 接受到新的状态(Props)时被触发,一般用于父组件状态更新时子组件的重新渲染。
- componentWillUnmount:
ReactDom.unmountComponentAtNode
触发
新版 React 生命周期函数
与旧的生命周期相比
- 废弃了3个函数:
componentWillMount
、componentWillReceiveProps
、componentWillUpdate
,如果要使用,需加上UNSAFE_
前缀,不建议再使用,在未来版本中可能出现 bug - 新增了2个函数:
getDerivedStateFromProps
、getSnapshotBeforeUpdate
- getDerivedStateFromProps:极少使用,让 state 始终取决于 props
- getSnapshotBeforeUpdate:极少使用,在 DOM 更新前,获取 DOM 的值(如滚动位置等),并传递给 componentDidUpdate