React 生命周期钩子及其使用场景是什么？

React 组件生命周期钩子用于管理不同阶段的行为，如初始化、更新和清理。

React 中等 生命周期 组件 钩子

React的生命周期钩子（即Lifecycle Methods）是类组件在不同阶段自动调用的函数，允许开发者管理组件的行为。以下是主要钩子及其使用场景：

  1. constructor(props)：
    在组件初始化时调用。
    使用场景：初始化状态（例如，this.state = { value: null }） 或事件绑定（例如，this.handleClick = this.handleClick.bind(this))。在类组件创建时设置初始值。

  2. render()：
    必须实现，返回JSX元素用于UI渲染。
    使用场景：定义组件的DOM结构（例如，<h1>{this.state.value}</h1>）。这步是核心且不应在内部直接操作DOM。

  3. componentDidMount()：
    组件首次渲染后立即在浏览器DOM中挂载时调用（一次执行）。
    使用场景：发起网络请求获取数据、设置定时器（setInterval） 或添加事件监听器（window.addEventListener('scroll', handleScroll)）。首次访问DOM时进行初始化逻辑。

  4. componentDidUpdate(prevProps, prevState)：
    组件更新后调用（props或state变更引起的重渲染）。
    使用场景：响应改变执行额外操作（例如，比较 prevProps.userId 和 this.props.userId 来重新加载数据）。适用于DOM更新后执行副作用代码。

  5. componentWillUnmount()：
    组件从DOM卸载前调用。
    使用场景：清理资源（例如，移除定时器 clearInterval(timerID) 或事件监听器 window.removeEventListener('scroll', handleScroll)）。防止内存泄露。

其他关键钩子：

  • shouldComponentUpdate(nextProps, nextState)：
    在渲染前决定是否更新（返回boolean值）。
    使用场景：优化性能（例如，if(nextProps.id !== this.props.id) return true; 阻止不必要渲染）。主要用于大型应用防重渲染开销。

  • static getDerivedStateFromProps(props, state)（React 16.3新增）：
    调用render前根据新props推导状态（状态改变返回值对象）。
    使用场景：同步状态与props变化（例如，if(props.value !== state.value) return { derivedValue: props.value };)。谨慎使用，避免逻辑混乱。

对于函数组件，React Hooks（例如useEffect）替代生命周期钩子：
`` ` import { useEffect } from ‘react’;

useEffect(() => { // 相当于componentDidMount/componentDidUpdate：依赖项更新时运行 // 使用场景：处理副作用（如获取数据fetch('/api/data') .then(res => res.json())） return () => { // 相当于componentWillUnmount：清理逻辑（可选） }; }, [dependencyArray]); // 依赖项控制更新条件 `` `
整体使用场景：初始化在constructor或componentDidMount，数据变化处理在componentDidUpdate，清理资源在componentWillUnmount。在函数组件中用useEffect统一副作用管理。避免冗余更新以提高性能。