本文共 3350 字，大约阅读时间需要 11 分钟。
作为一名前端开发工程师，我最近对 React 的新特性有了深入了解，特别是与 React Hooks 相关的内容。在一次组内分享中，前端开发小伙伴们讨论了 React 的钩子（Hooks），我也尝试对这些新特性进行理解和总结，希望能为更多的同学提供帮助。
React 官方提供了一系列内置的钩子，我们可以通过这些钩子来简化组件逻辑，提高开发效率。以下是几个最常用的钩子及其使用方法。
useState 是最常用的钩子之一，用于管理组件的状态数据。通过 useState，我们可以在组件中声明变量，并根据变量的变化重新渲染组件。
例如，可以通过 useState 实现一个简单的计数器：
const [count, setCount] = useState(0);return ( <>{count}
);
在 TypeScript 中，useState 会根据初始值自动推断变量类型。如果需要自定义类型，可以在 useState 后面传入类型信息：
const [count, setCount] = useState(null);
需要注意的是，useState 会在每次更新时替换整个状态对象。如果你只想修改状态对象中的某个字段，可以在之前的状态基础上合并新值：
const [person, setPerson] = useState({ name: 'wenzi', age: 20, score: 89});// 合并前置状态setPerson(prev => ({ ...prev, score: 98})); 如果是在 function 组件中使用 useState，需要自己合并数据，否则会导致字段丢失。
useEffect 用于在组件的生命周期中执行副作用操作，比如数据绑定、定时器设置等。它可以看作是组件生命周期方法的替代品。
useEffect 接收两个参数：回调函数和依赖项数组。回调函数在组件初始化时和每次渲染时都会执行。如果需要在特定条件下执行副作用，可以传入依赖项数组。
例如，可以通过 useEffect 实现窗口大小的动态调整：
const useWinResize = () => { const [size, setSize] = useState({ width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }); const resize = useCallback(() => { setSize({ width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }); }, []); useEffect(() => { window.addEventListener('resize', resize); return () => { window.removeEventListener('resize', resize); }; }, [resize]); return size;}; useMemo 用于优化性能，避免在每次渲染时重复计算复杂的值。useCallback 则用于优化方法或回调函数，防止在每次渲染时重新创建新函数实例。
例如，可以通过 useMemo 来优化一个计算函数：
const sum = useMemo(() => { const tempSum = (1 + count) * count / 2; return `${tempSum}, ${Math.random()}`;}, [count]); useCallback 的使用场景包括防止闭包变量的频繁重渲染：
const fn = useCallback(() => { // 假设 fn 内部依赖 count 变量}, [count]); 除了官方提供的内置钩子，我们还可以根据项目需求自定义自己的 Hooks。以下是两个常见的自定义 Hooks 实现示例。
通过监听 resize 事件，可以实时获取窗口的宽高。我们可以将这个逻辑封装成一个自定义 Hook：
const useWinResize = () => { const [size, setSize] = useState({ width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }); const resize = useCallback(() => { setSize({ width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }); }, []); useEffect(() => { window.addEventListener('resize', resize); return () => { window.removeEventListener('resize', resize); }; }, [resize]); return size;}; 使用方式：
const Home = () => { const { width, height } = useWinResize(); return ( 宽度: {width}
高度: {height}
);}; 在 React 中使用定时器时，需要在组件生命周期中正确清除定时器。自定义一个定时器 Hook，可以更方便地控制定时器的周期：
const useInterval = (callback, delay) => { const saveCallback = useRef(); useEffect(() => { saveCallback.current = callback; }); useEffect(() => { const tick = () => saveCallback.current(); if (delay !== null) { let id = setInterval(tick, delay); return () => clearInterval(id); } }, [delay]); return null;}; 使用方式：
const Home = () => { const [count, setCount] = useState(0); useInterval(() => { setCount(count + 1); }, 500); return ( 当前计数: {count}
);}; 通过学习 React Hooks，我们可以更高效地管理组件的状态和副作用，优化组件性能。这些 Hooks 的结合使用可以显著提升代码的可读性和可维护性。在实际项目中，可以根据需求合理组合这些 Hooks，甚至自定义自己的 Hooks 来解决特定的业务逻辑问题。
转载地址：http://dlvbz.baihongyu.com/