React的生命周期你可以知道

Posted 2022-12-07 曹豆芽

React的生命周期

豆芽最近也是在复习React,下面我们经过这篇文章，可以大致了解React的生命周期，React的生命周期，我们会分为四个阶段，初始化、运行中、销毁、错误处理
先放一张生命周期图，我们可以根据图大致了解，详情可以前往React生命周期查看

1、初始化阶段

在组件初始化阶段会执行

1. constructor

2. static getDerivedStateFromProps()

3. componentWillMount()

4. render()

5. componentDidMount()

2、更新阶段

1. componentWillReceiveProps()
2. static getDerivedStateFromProps()
3. shouldComponentUpdate()
4. componentWillUpdate()
5. render()
6. getSnapshotBeforeUpdate()
7. componentDidUpdate()

3、卸载阶段

1. componentWillUnmount()

4、错误处理阶段

1. componentDidCatch()

5、生命周期详解

下面我们来了解每一个生命周期的它的详解。
(1) constructor(props)

React组件的构造函数在挂载之前被调用。在实现React.Component构造函数时，需要先在添加其他内容前，调用super(props)，用来将父组件传来的props绑定到这个类中，使用this.props将会得到。

(2) static getDerivedStateFromProps(nextProps, prevState)

使用场景会存在两个：

1. 无条件的根据 prop 来更新内部 state，也就是只要有传入 prop 值， 就更新 state 只有 prop 值和 state
2. 值不同时才更新 state 值。

(3) componentWillMount()
componentWillMount()在组件挂载前被调用，在这个方法中调用setState()不会起作用，是由于他在render()前被调用。

(4) render()

render()方法是必需的。当他被调用时，他将计算this.props和this.state，并返回以下一种类型：

1. React元素。通过jsx创建，既可以是dom元素，也可以是用户自定义的组件。

2. 字符串或数字。他们将会以文本节点形式渲染到dom中。

3. Portals。可以使组件脱离父组件层级直接挂载在DOM树的任何位置。

4. null，什么也不渲染

5. 布尔值。也是什么都不渲染。

(5) componentDidMount

componentDidMount在组件被装配后立即调用。初始化使得DOM节点应该进行到这里。

通常在这里进行ajax请求

如果要初始化第三方的dom库，也在这里进行初始化。只有到这里才能获取到真实的dom.

(6) componentWillReceiveProps()

官方建议使用getDerivedStateFromProps函数代替componentWillReceiveProps。当组件挂载后，接收到新的props后会被调用。如果需要更新state来响应props的更改，则可以进行this.props和nextProps的比较，并在此方法中使用this.setState()。

如果父组件会让这个组件重新渲染，即使props没有改变，也会调用这个方法。

React不会在组件初始化props时调用这个方法。调用this.setState也不会触发。

(7) shouldComponentUpdate(nextProps, nextState)

调用shouldComponentUpdate使React知道，组件的输出是否受state和props的影响。默认每个状态的更改都会重新渲染，大多数情况下应该保持这个默认行为。

在渲染新的props或state前，shouldComponentUpdate会被调用。默认为true。这个方法不会在初始化时被调用，也不会在forceUpdate()时被调用。返回false不会阻止子组件在state更改时重新渲染。

(8) getSnapshotBeforeUpdate()

在react render()后的输出被渲染到DOM之前被调用。它使您的组件能够在它们被潜在更改之前捕获当前值（如滚动位置）。这个生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。

(9) componentDidUpdate(prevProps, prevState, snapshot)

在更新发生后立即调用componentDidUpdate()。此方法不用于初始渲染。当组件更新时，将此作为一个机会来操作DOM。只要您将当前的props与以前的props进行比较（例如，如果props没有改变，则可能不需要网络请求），这也是做网络请求的好地方。

(10) componentWillUnmount()

在组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理，例如使定时器无效，取消网络请求或清理在componentDidMount中创建的任何监听。

(11) componentDidCatch(error, info)

错误边界是React组件，可以在其子组件树中的任何位置捕获javascript错误，记录这些错误并显示回退UI，而不是崩溃的组件树。错误边界在渲染期间，生命周期方法以及整个树下的构造函数中捕获错误。

如果类组件定义了此生命周期方法，则它将成错误边界。在它中调用setState()可以让你在下面的树中捕获未处理的JavaScript错误，并显示一个后备UI。只能使用错误边界从意外异常中恢复; 不要试图将它们用于控制流程。

错误边界只会捕获树中下面组件中的错误。错误边界本身不能捕获错误。

(12)PureComponent

PureComponnet里如果接收到的新属性或者是更改后的状态和原属性、原状态相同的话，就不会去重新render了
在里面也可以使用shouldComponentUpdate，而且。是否重新渲染以shouldComponentUpdate的返回值为最终的决定因素。

6、ref

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例,ref可以挂载到组件上也可以是dom元素上。

那么下一篇豆芽会总结redux在React中的使用。

豆芽的公众号，感兴趣可以关注