探索React(第六期):生命周期

115 阅读2分钟

仲夏初茫,七月未央~

三个阶段的生命周期函数

1.png

挂载阶段 - constructor

在构造函数中一般可以做三件事:

  1. 初始化内部的状态
  2. 使用super()方法调用基类的构造方法,也将父组件的props注入给子组件
  3. 可以直接修改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,而在生产模式下,错误不会冒泡,所以当在开发环境下使用的时候,仍然会看到报错。