使用 useState 和 useReducer - Javascript

在 React 开发中，我们通常需要处理组件中的状态（state）。React 提供了两个常用的钩子函数，useState 和 useReducer，用于管理组件的状态。

useState

useState 是 React 中的内置钩子函数，它用于在函数组件中添加状态。使用 useState，我们可以在组件中存储和更新数据，而这些数据将在组件重新渲染时保持不变。

使用方法

要使用 useState，需要做两件事情：

1. 在组件顶部导入 useState 钩子函数，同时为状态定义一个默认值。

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  ...
}

2. 在组件内部使用 setCount 函数更新状态。

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

  const incrementCount = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  )
}

在这个例子中，我们定义了一个名为 count 的状态，初始值为 0。我们使用 setCount 函数更新状态，该函数接受一个新值作为参数，用于更新组件中的 count 状态。

useReducer

useReducer 是 React 的第二个状态管理钩子函数。它类似于 Redux 中的 reducer，我们可以在组件中使用它来管理多个相关的状态。

使用方法

使用 useReducer，需要定义一个 reducer 函数，接受当前 state 和 action 两个参数，并返回新的 state：

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();
  }
}

然后，我们可以使用 useReducer 定义状态和状态更新函数：

import React, { useReducer } from 'react';

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  ...
}

在这个例子中，我们定义了一个名为 state 的状态和一个名为 dispatch 的状态更新函数。我们传递了 reducer 函数和一个初始状态 {count:0}。

使用 dispatch 函数更新状态：

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  const incrementCount = () => {
    dispatch({ type: 'increment' });
  };

  const decrementCount = () => {
    dispatch({ type: 'decrement' });
  };

  return (
    <div>
      <h1>{state.count}</h1>
      <button onClick={incrementCount}>Increment Count</button>
      <button onClick={decrementCount}>Decrement Count</button>
    </div>
  );
}

在这个例子中，我们定义了两个更新函数：incrementCount 和 decrementCount。我们使用 dispatch 函数，传递一个包含 type 属性的对象，用于更新 state。

总结

useState 和 useReducer 是 React 中最常用的两个状态管理钩子函数。当需要管理简单的状态时，使用 useState 钩子函数；当需要处理复杂的状态逻辑时，使用 useReducer 钩子函数。

使用这两个函数，我们可以更容易地管理组件状态，并维护良好的代码结构。