深圳市凡客科技有限公司_企业文化包括哪些内容_百度今日小说排行榜_百度服务电话6988

发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

---

React 生命周期是指一个组件从创建到销毁的过程，React 提供了一些生命周期方法，让开发者在特定的时刻执行代码。生命周期主要可以分为 类组件生命周期 和 函数组件生命周期 两类。这里主要讲解类组件的生命周期方法，函数组件的生命周期会通过 Hooks 实现。

类组件生命周期

React 类组件的生命周期分为三大阶段：挂载（Mounting）、更新（Updating） 和 卸载（Unmounting）。每个阶段都有对应的生命周期方法。

1. 挂载阶段 (Mounting)

组件被创建并插入到 DOM 中的过程。

• constructor(props)
  组件实例化时调用，通常在这里初始化 state 和绑定事件处理函数。

  constructor(props) {super(props);this.state = { count: 0 };
  }
  

• static getDerivedStateFromProps(nextProps, nextState)
  在每次渲染前调用，无论是组件的初始化渲染还是更新时都会调用。
  这个方法返回一个对象，React 会合并这个对象到当前组件的 state 中。
  该方法是静态的，不能访问组件实例（this）。

  static getDerivedStateFromProps(nextProps, nextState) {if (nextProps.value !== nextState.value) {return { value: nextProps.value };}return null;
  }
  

• render()
  该方法是类组件必须实现的方法，负责渲染 UI。它不应该修改 state 或执行副作用操作。

  render() {return <div>{this.state.count}</div>;
  }
  

• componentDidMount()
  组件挂载完成后调用，只会执行一次。通常用于发起异步请求或设置订阅等操作。

  componentDidMount() {console.log('Component mounted!');
  }
  

2. 更新阶段 (Updating)

组件在其 state 或 props 发生变化时，会重新渲染。

• static getDerivedStateFromProps(nextProps, nextState)
  同挂载阶段，组件每次更新时都会调用这个方法。

• shouldComponentUpdate(nextProps, nextState)
  在组件重新渲染之前调用，可以通过返回 true 或 false 来控制是否更新组件的渲染。如果返回 false，React 会跳过更新过程。

  shouldComponentUpdate(nextProps, nextState) {return nextState.count !== this.state.count;
  }
  

• render()
  与挂载阶段相同，组件每次更新时都会重新调用 render 方法。

• getSnapshotBeforeUpdate(prevProps, prevState)
  在渲染输出 (DOM 更新) 之前调用，可以获取一些渲染前的信息（比如滚动位置）。
  返回的值会作为 componentDidUpdate 方法的第三个参数。

  getSnapshotBeforeUpdate(prevProps, prevState) {return document.getElementById('myDiv').scrollTop;
  }
  

• componentDidUpdate(prevProps, prevState, snapshot)
  组件更新后被调用，常用于执行依赖于 DOM 更新的操作。snapshot 是 getSnapshotBeforeUpdate 返回的值。

  componentDidUpdate(prevProps, prevState, snapshot) {console.log('Component updated!');
  }
  

3. 卸载阶段 (Unmounting)

组件从 DOM 中移除的阶段。

• componentWillUnmount()
  组件被卸载之前调用，通常在这里进行清理操作，如取消定时器、取消网络请求、移除事件监听等。

  componentWillUnmount() {console.log('Component will unmount');
  }
  

4. 错误处理 (Error Handling)

• static getDerivedStateFromError(error)
  当组件抛出错误时，会调用该方法，可以用于更新 state 以呈现备用 UI。

  static getDerivedStateFromError(error) {return { hasError: true };
  }
  

• componentDidCatch(error, info)
  该方法用来捕获错误信息，可以用于日志记录。

  componentDidCatch(error, info) {console.error('Error caught:', error);
  }
  

函数组件生命周期 (React Hooks)

在 React 16.8 以后，函数组件可以通过 Hooks 来模拟类组件的生命周期。

1. useState — 管理组件的状态。
2. useEffect — 用于执行副作用，相当于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的合并。
3. useContext — 获取 context 数据。
4. useRef — 创建引用并在组件重新渲染时保持不变。

示例：使用 useEffect 代替生命周期方法

import React, { useState, useEffect } from 'react';function MyComponent() {const [count, setCount] = useState(0);// 相当于 componentDidMount 和 componentDidUpdateuseEffect(() => {console.log('Component rendered or updated');return () => {// 相当于 componentWillUnmountconsole.log('Cleanup before unmount');};}, [count]); // 依赖 count，当 count 改变时重新执行return (<div><p>{count}</p><button onClick={() => setCount(count + 1)}>Increase</button></div>);
}

总结

• 挂载阶段：constructor → getDerivedStateFromProps → render → componentDidMount
• 更新阶段：getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate
• 卸载阶段：componentWillUnmount
• 错误处理：getDerivedStateFromError → componentDidCatch

随着 React Hooks 的引入，函数组件可以通过 useEffect、useState 等 Hooks 管理生命周期，提供了更简洁和灵活的方式。