一、类组件（Class Component）常用函数/方法
1. 生命周期方法
| 方法名 | 调用时机 | 作用 |
|---|---|---|
constructor(props) |
组件初始化时 | 初始化 state 或绑定 this（如事件处理函数） |
static getDerivedStateFromProps(props, state) |
父组件重新渲染时 | 根据 props 更新 state（较少使用） |
render() |
每次 state/props 变化时 |
返回 JSX，描述 UI 结构 |
componentDidMount() |
组件挂载到 DOM 后 | 执行副作用（如数据请求、订阅事件） |
shouldComponentUpdate(nextProps, nextState) |
更新前触发 | 决定是否重新渲染（优化性能） |
getSnapshotBeforeUpdate(prevProps, prevState) |
DOM 更新前 | 捕获 DOM 信息（如滚动位置） |
componentDidUpdate(prevProps, prevState, snapshot) |
组件更新后 | 执行副作用（如更新 DOM、发起新请求） |
componentWillUnmount() |
组件卸载前 | 清理副作用（如取消订阅、清除定时器） |
二、函数组件（Functional Component）常用函数/方法
函数组件基于 Hooks 实现状态和副作用管理，更简洁且无生命周期概念。
1. 核心 Hooks
| Hook | 作用 | 示例 |
|---|---|---|
useState |
管理组件状态 | const [count, setCount] = useState(0); |
useEffect |
处理副作用（类似 componentDidMount/componentDidUpdate/componentWillUnmount） |
jsx<br>useEffect(() => {<br> console.log("Mounted or updated");<br> return () => console.log("Unmounted");<br>}, [deps]);<br> |
useContext |
访问 Context 数据 | const value = useContext(MyContext); |
useReducer |
复杂状态逻辑（类似 Redux） | const [state, dispatch] = useReducer(reducer, initialState); |
useRef |
获取 DOM 引用或存储可变值 | const inputRef = useRef(null); |
useMemo |
缓存计算结果（优化性能） | const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); |
useCallback |
缓存函数（避免不必要的重新渲染） | const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]); |