React 所有的 hooks 方法，以及用法

读心悦
216 阅读4分钟

React Hooks 是一组可以在函数组件中使用的函数，使它们能够使用 state 和其他 React 特性而无需转换为类组件。以下是 React 中所有主要的 Hooks 方法及其用法的总结：

1. useState

  • 用途：在函数组件中添加 state。
  • 返回值：一个包含当前 state 值和更新该值的函数的数组。
  • 用法： 
    function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2. useEffect

  • 用途：在组件中执行副作用操作（如数据获取、订阅或手动修改 DOM）。
  • 返回值：一个清除函数（在组件卸载或依赖项改变时执行）。
  • 用法： 
    useEffect(() => {
  // 组件挂载后执行
  document.title = 'Hello World';

  // 返回一个清理函数，在组件卸载或依赖项改变时执行
  return () => {
    // 清理操作
  };
}, [dependencyArray]); // 可选的依赖项数组，用于控制副作用的重新执行

3. useContext

  • 用途：让你能够在函数组件中订阅 React Context。
  • 返回值：当前 Context 的值。
  • 用法： 
    const value = useContext(MyContext);

4. useReducer

  • 用途：一个 reducer 函数来管理组件的 state，类似于 Redux 的工作方式。
  • 返回值：一个包含当前 state 值和 dispatch 函数的数组。
  • 用法： 
    const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

5. useCallback

  • 用途：返回一个记忆化的回调函数版本，该回调函数在依赖项不变的情况下不会改变。
  • 返回值：记忆化的回调函数。
  • 用法： 
    const memoizedCallback = useCallback(
  () => {
    // 你的回调函数逻辑
  },
  [dependencyArray] // 依赖项数组
);

6. useMemo

  • 用途：返回一个记忆化的值。它仅会在依赖项改变时重新计算该值。
  • 返回值：记忆化的值。
  • 用法： 
    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

7. useRef

  • 用途：持久化数据，其 .current 属性被初始化为传递给 useRef() 的参数。该对象在组件的整个生命周期内保持不变。
  • 返回值：一个可变的对象，其 .current 属性被初始化为指定的值。
  • 用法： 
    const myRef = useRef(initialValue);

8. useImperativeHandle

  • 用途：自定义使用 useRef 创建的 ref 对象的行为，使其能在父组件中使用一些命令式方法。
  • 返回值：无（这是一个自定义 Hook 的辅助 Hook）。
  • 用法： 
    useImperativeHandle(ref, createHandle, [deps]);

9. useLayoutEffect

  • 用途：其用法与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用，可以用于读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

  • 返回值：一个清除函数（在组件卸载或依赖项改变时执行）。

  • 用法：

    useLayoutEffect(() => {
  // 浏览器绘制之前同步执行
  // 可以用于读取 DOM 布局并同步触发重渲染

  // 返回一个清理函数（可选）
  return () => {
    // 清理操作
  };
}, [dependencyArray]); // 可选的依赖项数组

注意事项：

  • useLayoutEffect 在所有的 DOM 变更之后同步调用，因此它适合用于需要读取 DOM 布局或执行与布局相关的同步操作的情况。
  • 与 useEffect 不同，useLayoutEffect 的调用是在浏览器绘制之前进行的，这意味着在屏幕上看到任何变化之前，所有的更新都已经被应用。
  • 由于 useLayoutEffect 是同步执行的，它可能会阻塞浏览器的绘制，因此应该谨慎使用，特别是在性能敏感的应用中。
  • 在大多数情况下，useEffect 应该是首选，因为它不会阻塞浏览器的绘制过程，并且提供了更好的性能。

10. useDebugValue

  • 用途：在 React 开发者工具中显示自定义的 label。这对于调试自定义 Hooks 尤其有用。

  • 返回值：无（这是一个辅助 Hook，用于改善调试体验）。

  • 用法：

    useDebugValue(value);

  • 示例：

    function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    // ... 一些异步操作来检查 friendID 是否在线
  }, [friendID]);

  // 使用 useDebugValue 来改善调试体验
  useDebugValue(isOnline === null ? 'Loading...' : isOnline ? 'Online' : 'Offline');

  return isOnline;
}

在 React 开发者工具中，当你检查使用了 useFriendStatus Hook 的组件时，你会看到一个更友好的 label，比如 "Loading..."、"Online" 或 "Offline"，而不是默认的 state 值。

总结

React Hooks 提供了一种在函数组件中使用 state 和其他 React 特性的强大方式，而无需转换为类组件。每个 Hook 都有其特定的用途和返回值，理解它们的用法和注意事项对于构建高效、可维护的 React 应用至关重要。

avatar
文章
阅读
粉丝