React 的组件生命周期

Dear 丶 2022-10-30 12:25 202阅读 0赞

React 的组件分为函数组件和class组件，下面主要是class组件的一些API;

定义class组件，需要继承React.Component ，在该子类中必须要定义一个render函数，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70][]

### 一，挂载时生命周期调用： ###

1，constructor()
    2, static getDerivedStateFromProps()
    3, render()
    4, componentDidMount()

下面说一下挂载时的生命周期方法：

1，consturctor(props)
    如果不初始化state或不进行方法绑定，则不需要为React组件实现构造函数；
    React组件挂载之前，会调用构造函数，组件实现构造函数时，构造函数内第一行要调用 super(props);
    
    构造函数作用：1>,通过this.state赋值对象来初始化内部state; 2>, 为事件处理函数绑定实例；
    
    constructor() 函数中不要调用setState()，组件内部需要state，则在构造函数中为this.state赋值初始state;在其他方法中的话可以使用this.setState()
    避免将 props 的值复制给 state！这是一个常见的错误;
    
    2,static getDerivedStateFromProps() 
    该方法会在调用render方法之前调用，并且在初始化挂载及后续更新时都被调用，他返回一个对象来更新state；返回null则不更新任何内容；此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props。
    
    3，render() : (该函数为纯函数)
    该方法是class组件中必须要实现的方法；
    当render被调用，它会检查this.props和this.state的变化并返回以下类型之一：
        React元素，数组或fragments， Portals, 字符串或数值类型，布尔类型或者null
    并且它不会直接与浏览器交互。如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数，可以使组件更容易思考
    
    4，componentDidMount() 
    该方法会在组件挂载后调用，依赖于DOM节点的初始化应该放在这里，如果通过网络请求获取数据，此处是实现请求的好地方；此处也可添加订阅，添加后要记得在 componentWillUnmount()取消订阅；
    可以在该方法中调用setState(),它将触发额外的渲染，此渲染发生在浏览器更新屏幕之前，如此保证即使两次调用render()的情况下，用户不会看到中间状态，慎重使用该模式，因为它会导致性能问题；

### 二，组件更新时的生命周期调用顺序如下： ###

1，static getDerivedStateFromProps()
    2，shouldComponentUpdate()
    3，render()
    4，getSnapshotBeforeUpdate()
    5，componentDidUpdate()

下面说一下更新时的生命周期方法：

1，static getDrivedStateFromProps() 方法同组件挂载时的方法一样；
    
    2，shouldComponentUpdate()
    当props或者state发生变化时，该方法会在渲染执行前被调用，返回值默认是true,首次渲染或使用forceUpdate()时不会调用该方法；
    
    3，render() 方法同组件挂载时的方法一样；
    
    4，getSnapshotBeforeUPdate()
    该方法在最近一次渲染输出之前调用，它使得组件能在发生更改之前从dom中获得一些信息（例如滚动位置），此生命周期的任何返回值将作为参数传递给componentDidUpdate()
    
    5，componentDidUpdate()
    该方法会在更新后立即被调用，首次渲染不会执行此方法；当组件更新后，可以在此处对DOM进行操作，如果对更新前后的props进行了比较，可以选择在此进行网络请求；
    可在该方法中调用setState(),但是必须包裹在一个条件语句中；

### 三，组件卸载调用方法 ###

componentWillUnmpunt()
    
    会在组件卸载及销毁之前调用，在此方法中可以执行比较的清理操作，例如：清除timer,订阅等；
    该方法中不应调用setState(),因为该组件不会再重新渲染；

### **错误处理方法：** ###

static getDerivedStateFromError()
    此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state
    
    componentDidCatch()
    此生命周期在后代组件抛出错误后被调用。 它接收两个参数：
    
    error —— 抛出的错误。
    info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。
    componentDidCatch() 会在“提交”阶段被调用，因此允许执行副作用。 它应该用于记录错误之类的情况：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70]: /images/20221024/6a1e0c7c0d8c4b6d8d85edce3d898074.png