React 生命周期

React 组件生命周期方法使用指南
类组件的生命周期方法
React 的类组件拥有多个生命周期方法，这些方法允许开发人员在特定的时间点执行代码。例如，在组件挂载之前、之后或是更新前后都可以触发相应的生命周期回调。

componentDidMount: 当组件已经加载到 DOM 中时调用此方法。通常用来发起网络请求获取数据或设置定时器等操作[^1]。

class MyComponent extends React.Component {
componentDidMount() {
console.log('Component has been mounted');
}
}
登录后复制

shouldComponentUpdate(nextProps, nextState): 返回布尔值决定是否重新渲染组件。如果返回 false 则不会继续后续流程；反之则会进入下一个阶段并最终完成重绘.

shouldComponentUpdate(nextProps, nextState) {
return this.state.count !== nextState.count;
}
登录后复制

UNSAFE_componentWillMount 和其他不推荐使用的生命周期方法：某些早期版本中存在的生命周期函数现在被认为是不安全的，并将在未来的版本中被移除。比如 UNSAFE_componentWillMount() 就是一个例子，应当避免在其新的应用程序里使用这类方法[^3]。

componentWillReceiveProps(nextProps): 如果父级传递给子组件的新属性发生变化，则会触发这个方法。需要注意的是即使 props 没有实际变化，只要父组件重新渲染就会引起该事件的发生[^4].

componentWillReceiveProps(nextProps) {
if (this.props.id !== nextProps.id) {
// handle prop change...
}
}
登录后复制
随着 Hooks API 的推出，许多传统意义上的生命周期概念已经被简化或者替代了。对于现代应用来说，更倾向于采用基于 Hook 的方式来管理状态和副作用。
函数组件中的钩子（Hooks）
自 React 版本 16.8 开始引入了 Hooks 功能，这使得我们可以更加灵活地编写可复用逻辑而无需依赖复杂的高阶组件模式或者是 Render Props 技术。通过像 useState 或 useEffect 这样的内置 hook ，可以轻松实现原本只有 class 才能拥有的能力——即声明式的定义响应式行为以及副作用控制[^2]。

useState: 提供了一种简单的方式来跟踪 UI 上的状态变量。每当 state 发生变更都会自动触发视图刷新过程。

import { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

function incrementCounter() {
setCount(count + 1);
}

return (
<>
<p>Current count is {count}</p>
<button onClick={incrementCounter}>Increment</button>
</>
);
}
登录后复制

useEffect: 它类似于之前的 componentDidMount, componentDidUpdate 和 componentWillUnmount. 此外还可以指定依赖项列表以便仅当那些值发生更改时才运行效果代码片段。

import { useEffect } from 'react';

function Example() {
useEffect(() => {
document.title = `You clicked ${count} times`;

// 清理工作会在卸载前被执行
return () => {};
}, [count]); // 只有当 count 改变才会再次执行 effect
}
登录后复制
综上所述，虽然传统的类组件仍然支持完整的生命周期机制，但对于新建项目而言建议尽可能多地利用 hooks 来构建功能模块，因为这种方式不仅简洁明了而且更容易维护和发展下去。