仲夏初茫,七月未央~
三个阶段的生命周期函数
挂载阶段 - constructor
在构造函数中一般可以做三件事:
- 初始化内部的状态
- 使用super()方法调用基类的构造方法,也将父组件的props注入给子组件
- 可以直接修改state
挂载&更新阶段 - static getDerivedStateFromProps
由于react16之前的一些生命周期在开启了async rendering后会导致在render函数之前的所有函数都有可能被执行数次,而如果开发者在这些生命周期里使用了Ajax请求,会被无谓的多次调用,所以react16之后做了改版,原来的一些生命周期即将过时。
getDerivedStateFromProps(props,state)
会在组件挂载和更新时的render方法之前调用,它应该返回一个对象来更新状态,或者返回null不更新内容。
getDerivedStateFromProps
前面要加上static
保留字,声明其为静态方法,否则会被react忽略掉。
getDerivedStateFromProps
静态方法无权访问class实例的this,所以getDerivedStateFromProps
里的this是undefined。
挂载&更新阶段 - render
render方法是一个组件必须有的方法,它返回的是一个顶级的react元素,渲染的是dom tree的一个react对象。
挂载阶段 - componentDidMount
componentDidMount
会在组件挂载到DOM后调用,且只会被调用一次,一般我们可以在这个钩子函数中请求服务端数据。
更新阶段 - shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState)
此方法通过比较nextProps、nextState与当前组件的this.props、this.state,返回true时当前组件会继续执行更新过程,返回false则更新停止,以此来减少组件不必要的渲染。当然官网更推荐我们使用PureComponent
这个内置组件。
更新阶段 - getSnapshotBeforeUpdate
getSnapshotBeforeUpdate(prevProps, prevState)
被调用于render之后,可以读取但是无法使用DOM的时候,使得组件可以在可能更改前获得DOM的一些信息,比如滚动位置。此生命周期返回的任何值都会作为参数传递给componentDidUpdate()。
更新阶段 - componentDidUpdate
componentDidUpdate(prevProps,PrevState,snaphot)
会在每次UI更新时调用,可以访问并修改DOM,这里可以调用setState,但是必须包裹在条件语句中,否则可能会导致死循环。
卸载阶段 - componentWillUnmount
componentWillUnmount()
会在组件移除的时候调用,在这个钩子函数中我们可以对一些资源进行释放,比如清除定时器等。
错误边界
react还提供了一些错误处理的方法,如static getDerivedStateFromError()
以及componentDidCatch()
来帮助我们更好的捕获错误。
需要注意的是react的开发和生产版本在componentDidCatch()是有差异的,在开发模式下,错误会冒泡至 window,而在生产模式下,错误不会冒泡,所以当在开发环境下使用的时候,仍然会看到报错。