React Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写类的情况下使用 state 以及其他的 React 特性。以下是一些关于 React Hooks 的使用要点：

常用 Hooks

  1. useState

    • 用于在函数组件中添加 state。
    • 例如：const [count, setCount] = useState(0);

  2. useEffect

    • 用于在组件渲染后执行副作用操作，如数据获取、订阅或手动更改 DOM。
    • 例如：useEffect(() => { fetch(...); }, [dependencies]);

  3. useContext

    • 用于在组件树中跨多级组件传递数据，而不必一层层手动添加 props。
    • 例如：const value = useContext(MyContext);

  4. useReducer

    • 用于替代 useState 的更复杂状态逻辑，特别是当 state 依赖于前一个 state 时。
    • 例如：const [state, dispatch] = useReducer(reducer, initialState);

  5. useCallback

    • 返回一个记忆化的回调函数，这个回调函数仅在某个依赖项改变时才会更新。
    • 例如：const memoizedCallback = useCallback(() => { /* ... */ }, [a, b]);

  6. useMemo

    • 返回一个记忆化的值，只有当某个依赖项改变时才会重新计算。
    • 例如：const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

示例

假设我们要创建一个简单的计数器组件：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

扩展阅读

想要了解更多关于 React Hooks 的信息，可以访问React 官方文档。

React Hooks 示例