React.js生命周期方法有哪些

React.js 生命周期方法概述

React.js 的生命周期方法用于在组件的创建、更新、销毁过程中执行特定逻辑，分为**挂载（Mounting）、更新（Updating）、卸载（Unmounting）**三大阶段。随着 React 版本演进（如 16.3+），部分旧方法被标记为过时，推荐使用新的生命周期或函数组件（Hooks）替代。

一、挂载阶段（Mounting）

挂载阶段是组件从创建到插入 DOM 的过程，触发的生命周期方法按顺序如下：

1. constructor(props)

• 作用：组件初始化时调用，用于设置初始 state、绑定事件处理函数。
• 注意事项：避免在此处调用 setState（仅用于初始化）；ES6 类组件必须调用 super(props)。
• 示例：this.state = { count: 0 };。

2. static getDerivedStateFromProps(props, state)

• 作用：在每次渲染前（包括首次挂载和后续更新）调用，根据 props 更新 state（返回对象则更新，返回 null 则不更新）。
• 注意事项：是静态方法（无需实例化即可调用），需谨慎使用（避免副作用）；适用于罕见的状态同步场景（如 props 变化时强制更新 state）。
• 示例：若 props.initialCount 变化，同步更新 state.count。。

3. render()

• 作用：组件的核心方法，返回 JSX 结构（用于渲染 UI）。
• 注意事项：必须实现；不可在此处调用 setState（会导致无限循环）。
• 示例：return <div>{this.state.count}</div>;。

4. componentDidMount()

• 作用：组件挂载到 DOM 后调用，用于执行副作用操作（如网络请求、DOM 操作、订阅事件）。
• 注意事项：可安全调用 setState（触发重新渲染）；是类组件中最常用的生命周期方法之一。
• 示例：发起 API 请求获取数据，或添加窗口 resize 事件监听。。

二、更新阶段（Updating）

更新阶段是组件因 props 或 state 变化而重新渲染的过程，触发的生命周期方法按顺序如下：

1. static getDerivedStateFromProps(props, state)

• 作用：同挂载阶段，用于根据新 props 更新 state。
• 注意事项：每次更新都会调用，需确保返回值的正确性（避免无限循环）。。

2. shouldComponentUpdate(nextProps, nextState)

• 作用：在重新渲染前调用，返回 true（继续渲染）或 false（跳过渲染），用于性能优化。
• 注意事项：默认返回 true（即每次 props/state 变化都会重新渲染）；需手动比较 nextProps 和 nextState 与当前值，避免不必要的渲染。
• 示例：若 state.count 未变化，返回 false 跳过渲染。。

3. render()

• 作用：同挂载阶段，返回更新后的 JSX 结构。
• 注意事项：不可调用 setState（会导致无限循环）。。

4. getSnapshotBeforeUpdate(prevProps, prevState)

• 作用：在 DOM 更新前调用，用于捕获更新前的 DOM 信息（如滚动位置、尺寸），返回值将作为 componentDidUpdate 的第三个参数。
• 注意事项：适用于需要对比更新前后 DOM 的场景（如保存滚动位置）；返回值必须是原始类型（如 number、string）。
• 示例：返回当前滚动位置 { scrollTop: window.scrollY }。。

5. componentDidUpdate(prevProps, prevState, snapshot)

• 作用：组件更新完成后调用，用于操作更新后的 DOM 或处理副作用（如发送请求、更新状态）。
• 注意事项：需条件判断（如比较 prevProps 和 prevState）以避免死循环；可调用 setState（但需谨慎）。
• 示例：若 state.count 变化，打印日志或获取更新后的 DOM 尺寸。。

三、卸载阶段（Unmounting）

卸载阶段是组件从 DOM 中移除的过程，触发的生命周期方法如下：

componentWillUnmount()

• 作用：组件卸载前调用，用于执行清理操作（如清除定时器、取消网络请求、移除事件监听）。
• 注意事项：必须调用清理函数（避免内存泄漏）；是不可逆的操作（组件卸载后无法恢复）。
• 示例：clearTimeout(this.timer); 或 window.removeEventListener('resize', this.handleResize);。。

四、过时的生命周期方法（React 16.3+ 废弃）

以下方法因存在副作用或设计问题，已被标记为过时，不推荐在新代码中使用：

• componentWillMount()：挂载前调用，易与 componentDidMount 的副作用混淆（如网络请求），替代方案为 componentDidMount。
• componentWillReceiveProps(nextProps)：props 变化时调用，易导致不必要的渲染，替代方案为 getDerivedStateFromProps + shouldComponentUpdate。
• componentWillUpdate()：更新前调用，易与 getSnapshotBeforeUpdate 混淆，替代方案为 getSnapshotBeforeUpdate。。

五、函数组件与 Hooks 的等效实现

函数组件通过 Hooks 可实现类组件生命周期的功能，常见替代方案：

• useEffect：替代 componentDidMount、componentDidUpdate、componentWillUnmount（通过依赖数组控制执行时机）。

  useEffect(() => {
    // componentDidMount + componentDidUpdate
    console.log('Component mounted or updated');
    return () => {
      // componentWillUnmount
      console.log('Component will unmount');
    };
  }, []); // 空依赖数组表示仅在挂载和卸载时执行
  

• useLayoutEffect：与 useEffect 类似，但在 DOM 更新后同步执行（适用于需要立即操作 DOM 的场景）。
• React.memo：替代 shouldComponentUpdate（浅比较 props，避免不必要的渲染）。
• useMemo/useCallback：优化性能（缓存计算结果或函数，避免重复计算）。。