804 字

2 分钟

React Hooks 最佳实践

2026-02-25

Frontend

React

/

Hooks

/

Frontend

/

JavaScript

React Hooks 最佳实践#

自React 16.8引入Hooks以来，它们已经彻底改变了我们编写React组件的方式。Hooks允许我们在函数组件中使用状态和其他React特性，而不需要编写类组件。本文将探讨React Hooks的最佳实践，帮助你编写更简洁、可维护的代码。

1. 基础Hooks回顾#

useState#

useState是最基本的Hook，用于在函数组件中添加状态。

1
const [count, setCount] = useState(0);

useEffect#

useEffect用于处理副作用，如数据获取、订阅或手动更改DOM。

1
useEffect(() => {
2
  // 副作用代码
3
  return () => {
4
    // 清理代码
5
  };
6
}, [dependencies]);

useContext#

useContext用于访问React的Context API提供的值。

1
const value = useContext(MyContext);

2. 最佳实践#

2.1 只在顶层调用Hooks#

不要在循环、条件或嵌套函数中调用Hooks，这会导致React无法正确追踪Hook的调用顺序。

错误示例：

1
if (condition) {
2
  const [count, setCount] = useState(0); // 错误：在条件中调用Hook
3
}

正确示例：

1
const [count, setCount] = useState(0);
2

3
if (condition) {
4
  // 使用count和setCount
5
}

2.2 只在React函数中调用Hooks#

Hooks只应该在React函数组件和自定义Hooks中调用，不要在普通JavaScript函数中调用。

2.3 合理使用useEffect的依赖项#

确保useEffect的依赖数组包含所有在effect中使用的响应式值，以避免闭包陷阱。

错误示例：

1
useEffect(() => {
2
  document.title = `You clicked ${count} times`;
3
}, []); // 错误：缺少count依赖

正确示例：

1
useEffect(() => {
2
  document.title = `You clicked ${count} times`;
3
}, [count]); // 正确：包含count依赖

2.4 使用useCallback和useMemo优化性能#

对于复杂计算或频繁渲染的组件，使用useCallback和useMemo可以避免不必要的重新计算。

1
// 缓存函数
2
const handleClick = useCallback(() => {
3
  setCount(count + 1);
4
}, [count]);
5

6
// 缓存计算结果
7
const expensiveValue = useMemo(() => {
8
  return computeExpensiveValue(a, b);
9
}, [a, b]);

2.5 自定义Hooks的命名规范#

自定义Hooks应该以use开头，以便React能够识别它们并应用Hooks的规则。

1
// 正确的自定义Hook命名
2
function useCounter(initialValue) {
3
  const [count, setCount] = useState(initialValue);
4
  // ...
5
  return [count, setCount];
6
}

2.6 使用useReducer管理复杂状态#

对于具有多个子值或复杂更新逻辑的状态，使用useReducer比useState更合适。

1
function counterReducer(state, action) {
2
  switch (action.type) {
3
    case 'increment':
4
      return { count: state.count + 1 };
5
    case 'decrement':
6
      return { count: state.count - 1 };
7
    default:
8
      return state;
9
  }
10
}
11

12
function Counter() {
13
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
14
  // ...
15
}

2.7 使用useRef保存 mutable 值#

对于不需要触发重新渲染的值，使用useRef而不是useState。

1
const inputRef = useRef(null);
2

3
function focusInput() {
4
  inputRef.current.focus();
5
}

3. 高级Hooks技巧#

3.1 自定义Hook实现逻辑复用#

将组件逻辑提取到自定义Hooks中，实现代码复用。

1
function useLocalStorage(key, initialValue) {
2
  const [storedValue, setStoredValue] = useState(() => {
3
    try {
4
      const item = window.localStorage.getItem(key);
5
      return item ? JSON.parse(item) : initialValue;
6
    } catch (error) {
7
      console.error(error);
8
      return initialValue;
9
    }
10
  });
11

12
  const setValue = (value) => {
13
    try {
14
      const valueToStore = value instanceof Function ? value(storedValue) : value;
15
      setStoredValue(valueToStore);
16
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
17
    } catch (error) {
18
      console.error(error);
19
    }
20
  };
21

22
  return [storedValue, setValue];
23
}

3.2 使用useEffect实现数据获取#

1
function useFetch(url) {
2
  const [data, setData] = useState(null);
3
  const [loading, setLoading] = useState(true);
4
  const [error, setError] = useState(null);
5

6
  useEffect(() => {
7
    const fetchData = async () => {
8
      try {
9
        setLoading(true);
10
        const response = await fetch(url);
11
        const result = await response.json();
12
        setData(result);
13
      } catch (err) {
14
        setError(err);
15
      } finally {
16
        setLoading(false);
17
      }
18
    };
19

20
    fetchData();
21
  }, [url]);
22

23
  return { data, loading, error };
24
}

3.3 优化 useEffect 的清理函数#

确保在useEffect的清理函数中正确清理副作用，避免内存泄漏。

1
useEffect(() => {
2
  const subscription = props.source.subscribe();
3
  return () => {
4
    subscription.unsubscribe(); // 正确清理订阅
5
  };
6
}, [props.source]);

4. 常见错误和解决方案#

4.1 闭包陷阱#

问题： 在useEffect中使用的变量可能不是最新的。

解决方案： 将变量添加到依赖数组中，或使用函数式更新。

1
// 函数式更新
2
setCount(prevCount => prevCount + 1);

4.2 无限循环#

问题： useEffect的依赖项导致无限重新渲染。

解决方案： 检查依赖项，确保它们不会在每次渲染时改变。

1
// 错误：每次渲染都会创建新的对象
2
useEffect(() => {
3
  // ...
4
}, [{}]);
5

6
// 正确：使用稳定的引用
7
const stableObject = useMemo(() => ({}), []);
8
useEffect(() => {
9
  // ...
10
}, [stableObject]);

4.3 忽略清理函数#

问题： 未清理副作用导致内存泄漏。

解决方案： 始终在useEffect中返回清理函数。

5. 总结#

React Hooks为我们提供了一种更简洁、更可维护的方式来编写React组件。通过遵循本文介绍的最佳实践，你可以：

避免常见的Hooks错误
提高组件性能
编写更易于理解和维护的代码
充分利用Hooks的强大功能

希望本文对你有所帮助，祝你编码愉快！

6. 参考资料#