对react生命周期的简单详细理解

react 生命周期可分为四个阶段

挂载（mount）——组件在这个阶段被创建然后被插入到 DOM 中；

更新（update）——React 组件“成长”；

卸载（unmount）——最后阶段；

错误处理（error handle）——有时候代码无法运行或某处出现了错误。

react的新的生命周期图：
在这里插入图片描述

与mounting相关的生命周期方法:

render()
constructor(props)
componentDidMount()
static getDerivedStateFromProps(props, state)

与updating相关的：

static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState)
render()
getSnapshotBeforeUpdate(prevProps, prevState)
componentDidUpdate(prevProps, prevState, snapshot)

与unmounting相关的：

componentWillUnmount

与error handling相关的：

static getDerivedStateFromError(error)
componentDidCatch(error, info)

1. 挂载生命周期方法

constructor()

在将组件挂载到 DOM 之前会调用 constructor 方法。通常，你会在 constructor 方法中初始化 state
和绑定事件处理程序。

const MyComponent extends React.Component {
  constructor(props) {
   super(props) 
    this.state = {
       points: 0
    }  
    this.handlePoints = this.handlePoints.bind(this) 
    }   
}

static getDerivedStateFromProps()

1.这个生命周期为react新的生命周期函数，
2.这个生命周期的功能实际上就是将传入的props映射到state上面，
3.这个方法在组件被初始挂载到 DOM 之前调用。
4.这个生命周期函数是为了替代componentWillReceiveProps存在的，所以在你需要使用componentWillReceiveProps的时候，就可以考虑使用getDerivedStateFromProps来进行替代了。
5.尽量不使用，维护俩者状态需要消耗额外资源，增加复杂度。

static getDerivedStateFromProps(nextProps, prevState) {
    const {type} = nextProps;
    // 当传入的type发生变化的时候，更新state
    if (type !== prevState.type) {
        return {
            type,
        };
    }
    // 否则，对于state不进行任何操作
    return null;
}

render()

如果要渲染 DOM 中的元素，可以在 render 方法中编写代码，即返回一些
JSX。你还可以返回纯字符串和数字，如果你不想渲染任何内容，可以在 render 方法中返回一个布尔值或 null。

componentDidMount()

在调用 render 后，组件被挂载到 DOM，并调用 componentDidMount 方法，只执行一次。用法：
1.在将组件被挂载到 DOM 之后会立即调用这个函数。
2.在这里可以操作Dom元素，发出ajax请求获取数据。
3.你还可以设置订阅，例如计时器，只需要确保在卸载组件 componentWillUnmount 时取消订阅即可。

2. 更新生命周期方法

static getDerivedStateFromProps()
shouldComponentUpdate()

默认情况下，在 props 或者 state 发生变化时都会重新渲染组件，我们在这个方法中返回一个布尔值——true 或
false，用于控制是否重新渲染组件。，达到性能优化的效果。如果 state 和 props 没有发生变更，不希望组件重新渲染，你也可以使用内置的 PureComponent。

在这里插入图片描述

render()

在调用 shouldComponentUpdate 方法后，会立即调用 render——具体取决于
shouldComponentUpdate 返回的值，默认为 true 的时候。

getSnapshotBeforeUpdate（）

使用在render之前调用，state已更新，典型场景：获取render之前的dom状态，getSnapshotBeforeUpdate
生命周期方法本身不会起什么作用，它需要与 componentDidUpdate 生命周期方法结合在一起使用。

3.卸载生命周期方法

componentWillUnmount()

在卸载和销毁组件之前会调用 componentWillUnmount 生命周期方法。这是进行资源清理最理想的地方，例如清除计时器、取消网络请求或清理componentDidMount() 中创建的任何订阅，

4.错误处理生命周期方法

static getDerivedStateFromError()
componentDidCatch()

import React, { Component } from "react";
class ErrorBoundary extends Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    console.log(`Error log from getDerivedStateFromError: ${error}`);
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.log(`Error log from componentDidCatch: ${error}`);
    console.log(info);
  }

  render() {
    return null
  }
}

export default ErrorBoundary;

对react生命周期的简单详细理解

猜你喜欢