React Hooks 最佳实践指南

Hooks 改变了我们编写 React 组件的方式，但要用好它们需要理解一些关键概念和最佳实践。

1. useState - 状态管理

函数式更新

tsx

// ❌ 错误：可能导致状态不一致
setCount(count + 1);

// ✅ 正确：使用函数式更新
setCount(prev => prev + 1);

复杂状态使用 useReducer

tsx

// 当状态逻辑复杂时
const [state, dispatch] = useReducer(reducer, initialState);

2. useEffect - 副作用处理

正确的依赖数组

tsx

// ❌ 缺少依赖
useEffect(() => {
  fetchData(userId);
}, []); // userId 变化时不会重新执行

// ✅ 完整依赖
useEffect(() => {
  fetchData(userId);
}, [userId]);

清理函数

tsx

useEffect(() => {
  const timer = setInterval(() => {
    console.log('tick');
  }, 1000);

  // 组件卸载时清理
  return () => clearInterval(timer);
}, []);

3. useCallback 和 useMemo

useCallback - 缓存函数

tsx

const handleClick = useCallback(() => {
  console.log(value);
}, [value]);

useMemo - 缓存计算结果

tsx

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

4. 自定义 Hooks

提取可复用逻辑

tsx

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

// 使用
function SearchInput() {
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 500);

  useEffect(() => {
    // 只在 debounced 值变化时搜索
    performSearch(debouncedSearch);
  }, [debouncedSearch]);

  return <input value={search} onChange={e => setSearch(e.target.value)} />;
}

5. 性能优化

React.memo

tsx

const MemoizedComponent = React.memo(function MyComponent({ value }) {
  return <div>{value}</div>;
});

避免不必要的重渲染

tsx

// ❌ 每次渲染都创建新对象
<ChildComponent config={{ theme: 'dark' }} />

// ✅ 使用 useMemo
const config = useMemo(() => ({ theme: 'dark' }), []);
<ChildComponent config={config} />

6. 常见陷阱

闭包陷阱

tsx

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

  useEffect(() => {
    const timer = setInterval(() => {
      // ❌ 总是打印 0（闭包）
      console.log(count);
      
      // ✅ 使用函数式更新
      setCount(c => c + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []); // 空依赖数组导致闭包问题
}

总结

正确使用依赖数组
合理使用 useCallback 和 useMemo（不要过度优化）
提取自定义 Hooks 复用逻辑
注意闭包陷阱
使用 ESLint 插件检查 Hooks 规则

标签：React, Hooks, Performance

React Hooks 最佳实践指南

React Hooks 最佳实践指南

1. useState - 状态管理

函数式更新

复杂状态使用 useReducer

2. useEffect - 副作用处理

正确的依赖数组

清理函数

3. useCallback 和 useMemo

useCallback - 缓存函数

useMemo - 缓存计算结果

4. 自定义 Hooks

提取可复用逻辑

5. 性能优化

React.memo

避免不必要的重渲染

6. 常见陷阱

闭包陷阱

总结

周温

评论 (0)

相关文章

前端救星：Mock、Express 与 JSON Server 助力前后端联调与独立开发

React Hooks 完全指北（2025 版）

Generator 和 Iterator：那些你不知道却一直在默默付出的幕后英雄