React生命周期钩子函数(新版)
实例化
-
渲染前 static getDerivedStateFromProps(nextProps,nextState) {}
无法访问this
nextProps,nextState是更新后的
必须返回 一个对象,用来更新state 或者 返回 null不更新
必须要初始化state
state 的值在任何时候都取决于 props时
-
渲染中 render
必须return jsx|string|number|null
不会直接与浏览器交互:不要操作DOM|和数据 -
挂载后 componentDidMount
更新期
-
渲染前 static getDerivedStateFromProps(nextProps, nextState)
-
是否渲染 shouldComponentUpdate(nextProps, nextState)
是否更新,必须返回true/false
首次渲染或使用 forceUpdate() 时不会调用该方法
nextProps,nextState更新后的,this.props,this.state 更新前的
return false 只阻止当前组件渲染 -
渲染中 render
-
dom快照 getSnapshotBeforeUpdate(prevProps, prevState)
组件能在发生更改之前从 DOM 中捕获一些信息(dom渲染前的状态)
返回的 值|null 会给 componentDidUpdate
prevProps, prevState 更新前 this.props,this.state更新后 -
更新后 componentDidUpdate(prevProps, prevState,snopshot)
this.props.更新后的
snopshot 是 getSnapshotBeforeUpdate构造的返回值抓取到的是渲染后的dom状态,通过snopshot拿到dom渲染前的状态
销毁时
即将卸载 componentWillUnmount