Published on

React Hooks: Hooks 使用详解与最佳实践

Authors
  • Name
    Twitter

React Hooks 是 React 16.8 引入的一个强大特性，它让你可以在不编写 class 的情况下使用 state 和其他 React 特性。本文将概述 React 提供的所有内置 Hooks，包括它们的用途、基本语法和具体使用场景。

基础 Hooks

1. useState

用途：在函数组件中添加状态

const [state, setState] = useState(initialState);

使用场景：当你需要在组件中管理可变状态时。例如，在一个表单组件中管理输入字段的值，或在一个计数器组件中管理当前计数。

2. useEffect

用途：处理副作用，如 DOM 操作、数据获取、订阅

useEffect(() => { 
  // 副作用代码
  return () => {
    // 清理函数（可选）
  };
}, [dependencies]);

使用场景：当你需要在组件渲染后执行某些操作，如获取数据、设置订阅，或手动更改 DOM。例如，在组件挂载后从 API 获取数据，或在组件更新后更新文档标题。

3. useContext

用途：订阅和消费 React Context

const value = useContext(MyContext);

使用场景：当你需要在组件树中深层传递数据，而不想通过 props 逐层传递时。例如，在一个大型应用中管理当前认证的用户信息或应用的主题设置。

额外的 Hooks

4. useReducer

用途：管理复杂的状态逻辑

const [state, dispatch] = useReducer(reducer, initialState);

使用场景：当组件的状态逻辑变得复杂，涉及多个子值或下一个状态依赖于之前的状态时。例如，在一个购物车组件中管理商品的添加、删除和数量更新。

5. useCallback

用途：记忮化回调函数

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

使用场景：当你将回调函数传递给经过优化的子组件时，这些子组件依赖于引用相等性来避免不必要的渲染。例如，在一个大列表组件中，将一个回调函数传递给每个列表项。

6. useMemo

用途：记忮化计算结果

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

使用场景：当你有计算成本高的操作，并且想避免在每次渲染时重新计算。例如，在一个数据可视化组件中，对大量原始数据进行复杂的转换。

7. useRef

用途：创建可变的 ref 对象

const refContainer = useRef(initialValue);

使用场景：当你需要存储一个可变值，该值不会导致组件重新渲染，或者当你需要直接访问 DOM 元素时。例如，存储前一个 props 或 state 的值，或者保存一个定时器 ID。

高级 Hooks

8. useImperativeHandle

用途：自定义暴露给父组件的实例值

useImperativeHandle(ref, () => ({
  // 暴露的实例值
}), [dependencies]);

使用场景：当你需要自定义从 ref 暴露给父组件的实例值时。例如，在一个自定义输入组件中，只暴露 focus 方法给父组件。

9. useLayoutEffect

用途：与 useEffect 类似，但在所有 DOM 变更后同步触发

useLayoutEffect(() => {
  // 副作用代码
}, [dependencies]);

使用场景：当你的副作用需要同步执行，如测量 DOM 节点的布局。例如，在一个工具提示组件中，在显示之前计算和设置其位置。

10. useDebugValue

用途：在 React DevTools 中显示自定义 hook 的标签

useDebugValue(value);

使用场景：当你创建自定义 Hook 时，想要在 React DevTools 中为其添加特定的标签以便调试。例如，在一个复杂的表单状态管理 Hook 中显示当前的表单状态。

React 18 新增的 Hooks

11. useDeferredValue

用途：延迟更新某个不紧急的部分

const deferredValue = useDeferredValue(value);

使用场景：当你有一个需要频繁更新但不是很紧急的 UI 部分时。例如，在一个实时搜索组件中，延迟更新搜索结果列表，以保持输入框的响应性。

12. useTransition

用途：将某些状态更新标记为非紧急

const [isPending, startTransition] = useTransition();

使用场景：当你需要区分紧急和非紧急更新时。例如，在一个即时搜索应用中，将输入状态更新标记为紧急，而将搜索结果的更新标记为非紧急。

13. useId

用途：生成唯一 ID，用于可访问性属性

const id = useId();

使用场景：当你需要为 HTML 元素生成唯一的 ID，特别是在服务器端渲染的应用中。例如，生成唯一的 ID 用于 label 和 input 元素的关联。

14. useSyncExternalStore

用途：订阅外部存储

const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

使用场景：当你需要订阅外部数据源，并确保在并发渲染中的一致性时。例如，在使用 Redux 这样的状态管理库时，确保状态更新的一致性。

15. useInsertionEffect

用途：用于 CSS-in-JS 库，在 DOM 变更前同步插入样式

useInsertionEffect(() => {
  // 插入样式的代码
}, [dependencies]);

使用场景：主要用于 CSS-in-JS 库的作者。例如，在运行时注入关键 CSS，以避免在布局效果中进行昂贵的 CSS 计算和插入。

总结

React Hooks 提供了一种更灵活、更简洁的方式来管理组件状态和副作用。从基础的 useState 和 useEffect，到用于性能优化的 useCallback 和 useMemo，再到 React 18 引入的新 Hooks，每个 Hook 都有其特定的用途和最佳实践。

在使用这些 Hooks 时，请记住：

  • 从基础 Hooks 开始，它们可以满足大多数需求。
  • 在遇到性能问题时考虑使用 useCallback 和 useMemo。
  • 对于复杂的状态逻辑，考虑使用 useReducer。
  • React 18 的新 Hooks 主要用于优化大型应用和特定场景，不是所有应用都需要使用它们。

通过合理使用这些 Hooks，并理解它们的具体使用场景，你可以构建出更加高效、可维护的 React 应用。每个 Hook 都有其独特的优势，能够解决特定的问题。在实际开发中，根据你的具体需求选择合适的 Hook，将大大提高你的开发效率和应用性能。