学习 React Hooks：从新手到熟练掌握

2024-01-29 23:49:57

React Hooks 是 React 16.8 版本引入的一项重大更新，它为 React 函数式组件带来了状态管理的能力。与传统的类组件不同，函数式组件使用 Hooks 来管理状态和副作用，从而简化了组件的编写和维护。

在本教程中，我们将介绍 4 个最常用的 React Hooks：

useState ：用于管理组件的状态。
useEffect ：用于在组件生命周期中执行副作用，例如获取数据或更新 DOM。
useContext ：用于在组件树中共享数据。
useReducer ：用于管理复杂的状态。

我们将通过实际代码示例来演示这 4 个 Hooks 的用法，帮助您快速掌握 Hooks 的使用技巧。

1. useState

useState Hook 用于管理组件的状态。它接受一个初始值作为参数，并返回一个包含当前状态及其更新函数的数组。

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

// 递增计数器
setCount(count + 1);

在上面的代码中，我们使用 useState Hook 初始化了一个名为 count 的状态，其初始值为 0。然后，我们使用 setCount 函数来更新 count 的值。

2. useEffect

useEffect Hook 用于在组件生命周期中执行副作用。它接受一个回调函数作为参数，该回调函数将在组件挂载、更新和卸载时执行。

useEffect(() => {
  // 在组件挂载时获取数据
  const data = fetchData();

  // 在组件卸载时释放资源
  return () => {
    cleanup();
  };
}, []);

在上面的代码中，我们使用 useEffect Hook 在组件挂载时获取数据，并在组件卸载时释放资源。

3. useContext

useContext Hook 用于在组件树中共享数据。它接受一个 context 对象作为参数，并返回该 context 对象的当前值。

const ThemeContext = React.createContext();

const App = () => {
  const theme = useContext(ThemeContext);

  return (
    <div className={theme}>
      ...
    </div>
  );
};

在上面的代码中，我们使用 createContext 函数创建了一个名为 ThemeContext 的 context 对象。然后，我们在 App 组件中使用 useContext Hook 来获取 ThemeContext 的当前值，并将其应用于组件的 className。

4. useReducer

useReducer Hook 用于管理复杂的状态。它接受一个 reducer 函数和一个初始值作为参数，并返回一个包含当前状态及其更新函数的数组。

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
};

const [count, dispatch] = useReducer(reducer, 0);

// 递增计数器
dispatch({ type: 'increment' });

在上面的代码中，我们使用 useReducer Hook 初始化了一个名为 count 的状态，其初始值为 0。然后，我们使用 dispatch 函数来更新 count 的值。