react框架生命周期与在父子之间组件中的执行顺序详解

原创

小哥 3年前 (2022-10-20) 阅读数 13 #js教程

文章标签 react

前言

react 生命周期是指组件从创建到卸载的整个过程。每个进程都有一个将被调用的对应钩子函数。它主要有以下几个阶段：

挂载阶段：创建并插入零部件实例。 DOM 树的过程
更新阶段：重新呈现组件的过程。
卸载阶段：组件从 DOM 在树中删除的过程。

以下从上述三个阶段进行解读。react生命周期

传统生命周期

装载阶段： componentWillMount - render - componentDidMount
更新阶段： componentWillReceiveProps - shouldComponentUpdate - componentWillUpdate - render - componentDidUpdate
卸货阶段： componentWillUnmount

挂载阶段

componentWillMount

componentWillMount 发生在 render 此前，它并没有在这个时候挂载。DOM，则有可能被多次执行。

componentDidMount

在组件成功挂载并将流程组件成功挂载到REAL之后调用公共钩子 DOM 上。

通常在此钩子中执行一些初始化操作，例如： 打开计时器，发送网络请求，订阅消息。

componentDidMount(){
  fetch(https://api.github.com/users).then(res=>res.json()).then(users=>{
    console.log(users);
    this.setState({users});
  });
}

更新阶段

componentWillReceiveProps(newProps)

在 props 已更改(父零部件重新启动 render 或者更新 props )，此挂接提供了正确的 props 倾听，在。 props 更改发生后，某些组件也会相应更改。 state 。这种方法的变化 state 它不会渲染两次，而是直接合并。 state。

shouldComponentUpdate(nextProps, nextState)

这个钩子相当于一个阀门，返回一个布尔值来决定是否更新组件。

由于 react 父零部件更新将不可避免地导致子零部件更新，因此我们可以在子零部件中手动比较它们。 props 与 nextProps ， state 与 nextState 来确定是否需要再次呈现该子组件，如果需要，则返回。 true ，不需要返回 false 。默认情况下，此函数返回 true 。

componentWillUpdate

组件更新前调用的挂钩

componentDidUpdate

组件更新完成后调用的钩子

由于组件已再次呈现，因此可以在此处将其用于该组件。 DOM 开展业务；
在比较了 this.props 和 nextProps 您可以发送网络请求。

componentDidUpdate(prevProps, prevState, snapshot) { if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); } }

卸载阶段

componentWillUnmount

卸载阶段唯一生命周期钩子，通常在这里处理一些善后工作，例如关闭定时器、取消监听等等

传统生命周期执行流

新的生命周期

react 打算在17Version推出新版本 Async Rendering(异步渲染) ，提出一种可被打断生命周期，而可以被打断的阶段正是实际 dom 装载前的虚拟 dom 构建阶段，即要删除的三个生命周期。

放弃了三个生命周期： componentWillMount , componentWillReceiveProps , componentWillUpdate
添加了两个新的生命周期： static getDerivedStateFromProps(nextProps, prevState) ， getSnapshotBeforeUpdate(prevProps, prevState)

装载阶段： getDerivedStateFromProps - render - componentDidMount
更新阶段： getDerivedStateFromProps - shouldComponentUpdate - render - getSnapShotBeforeUpdate - componentDidUpdate
卸货阶段： componentWillUnmount

static getDerivedStateFromProps(nextProps, prevState)

中的生命周期 render 方法，然后在初始化和调用后续更新之前调用。

它接收两个参数，其中一个传入。 nextProps 和之前的 prevState 。他应该返回一个要更新的对象 state 。如果返回 null 没有更新任何内容。

这个生命周期主要为我们提供一个可以实例化的组件。 props 、 state 更改后根据 props 修改 state 一个时机。

getSnapshotBeforeUpdate(prevProps, prevState)

在更新阶段 render 在登上现实之后 DOM 它使组件能够从 DOM 获取一些信息。将使用此组件返回的任何值 componentDidUpdate 第三个参数的。

  getSnapshotBeforeUpdate(prevProps, prevState){
    return "getSnapshotBeforeUpdate";
  }

  // 组件更新成功挂钩
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(snapshot); // "getSnapshotBeforeUpdate"
  }