React Hooks 的优势和使用场景

React Hooks 是 React 16.8 引入的重大特性，它彻底改变了 React 组件的编写方式。以下是关于 React Hooks 的优势和使用场景的详细分析：

优势

1. 简化组件逻辑 Hooks 允许在不编写 class 的情况下使用 state 和其他 React 特性，使代码更简洁。例如，使用 useState 可以轻松管理组件状态：

   jsx

   代码解读

   复制代码

   function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

2. 逻辑复用 Hooks 解决了高阶组件和 render props 带来的嵌套问题，通过自定义 Hook 可以轻松复用状态逻辑：

   jsx

   代码解读

   复制代码

   function useWindowWidth() { const [width, setWidth] = useState(window.innerWidth); useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return width; }

3. 更清晰的代码结构 Hooks 让相关代码更集中，避免了生命周期方法中逻辑分散的问题。例如，数据获取和订阅可以放在同一个 useEffect 中：

   jsx

   代码解读

   复制代码

   useEffect(() => { const subscription = props.source.subscribe(); return () => subscription.unsubscribe(); }, [props.source]);

4. 更好的性能优化 Hooks 提供了更细粒度的控制，如 useMemo 和 useCallback 可以精确优化性能：

   jsx

   代码解读

   复制代码

   const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

5. 渐进式采用 可以在不重写现有组件的情况下逐步采用 Hooks，与 class 组件完全兼容。

使用场景

1. 状态管理 useState 适用于简单的组件状态管理，而 useReducer 更适合复杂的状态逻辑：

   jsx

   代码解读

   复制代码

   function todosReducer(state, action) { switch (action.type) { case 'add': return [...state, action.payload]; default: return state; } } function Todos() { const [todos, dispatch] = useReducer(todosReducer, []); // ... }

2. 副作用处理 useEffect 统一处理组件副作用，取代了 componentDidMount、componentDidUpdate 和 componentWillUnmount：

   jsx

   代码解读

   复制代码

   useEffect(() => { document.title = `You clicked ${count} times`; }, [count]);

3. 上下文共享 useContext 简化了上下文的使用，避免了多层嵌套：

   jsx

   代码解读

   复制代码

   const theme = useContext(ThemeContext); return <div style={{ background: theme.background }} />;

4. DOM 引用 useRef 可以方便地获取 DOM 元素或保存可变值：

   jsx

   代码解读

   复制代码

   function TextInput() { const inputEl = useRef(null); const onButtonClick = () => inputEl.current.focus(); return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus</button> </> ); }

5. 自定义 Hook 封装可复用的逻辑，如数据获取、表单处理等：

   jsx

   代码解读

   复制代码

   function useFormInput(initialValue) { const [value, setValue] = useState(initialValue); const handleChange = (e) => setValue(e.target.value); return { value, onChange: handleChange }; } function MyForm() { const name = useFormInput('Mary'); return <input {...name} />; }

最佳实践

1. 只在顶层调用 Hooks 不要在循环、条件或嵌套函数中调用 Hooks，确保每次渲染时 Hook 的调用顺序一致。

2. 合理使用依赖数组 在 useEffect 和 useMemo 中正确指定依赖项，避免不必要的重新计算或副作用执行。

3. 性能优化 对于昂贵的计算使用 useMemo，对于事件处理函数使用 useCallback 避免不必要的重新渲染。

4. 自定义 Hook 命名 自定义 Hook 应以 use 开头，这样 React 可以自动检查 Hook 规则是否被遵守。

5. 逐步迁移 对于现有项目，可以逐步将 class 组件迁移到 Hooks，不必一次性重写所有代码。

React Hooks 不仅简化了 React 组件的开发，还提供了更强大的逻辑复用能力，是现代 React 开发的推荐方式。通过合理使用各种 Hook，可以构建更简洁、更易维护的 React 应用。

原文：https://juejin.cn/post/7495591732916502563