用 useReducer() 钩子来反应 - JavaScript

React 的 useReducer() 钩子是一个用于管理状态的函数。它通常与 useState() 钩子一起使用，但它更强大，适用于在 React 组件中更复杂的状态管理。

useState() vs useReducer()

在 React 组件中，我们通常使用 useState() 钩子来定义和更新状态：

import React, { useState } from 'react';

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

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

  const handleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
};

useState() 钩子仅适用于管理简单的状态。但是，如果您需要更复杂的状态管理，例如在多个组件之间共享状态，或者实现更复杂的状态更新逻辑，则可以使用 useReducer() 钩子。

useReducer() 钩子的第一个参数是一个函数，该函数接受两个参数：当前状态和一个更新状态的函数。这个函数返回新状态。第二个参数是初始状态。

下面是一个使用 useReducer() 钩子的计数器示例：

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const countReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(countReducer, initialState);

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const handleDecrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
};

在这个例子中：

• 我们定义了一个 initialState 对象，它包含一个 count 属性。这是我们的初始状态。
• 我们定义了一个 countReducer() 函数来管理状态。它接受两个参数：state 和 action。根据 action 的类型，它返回一个新的状态。
• 我们在组件中使用 useReducer() 钩子，将 countReducer 和 initialState 作为参数传递。
• 当用户单击“+”或“-”按钮时，我们调用 dispatch() 函数来分派一个 action 对象。这个对象具有一个 type 属性，来告知 countReducer() 函数要执行哪种操作。

在多个组件之间共享状态

useReducer() 钩子也适用于在多个组件之间共享状态。您可以在父组件中定义 state 和 dispatch，然后通过 props 将它们传递给子组件。

下面是一个示例，其中 Parent 组件管理一个共享状态，Child1 组件将状态值增加，Child2 组件将状态值减少：

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const countReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Parent = () => {
  const [state, dispatch] = useReducer(countReducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <Child1 onIncrement={() => dispatch({ type: 'INCREMENT' })} />
      <Child2 onDecrement={() => dispatch({ type: 'DECREMENT' })} />
    </div>
  );
};

const Child1 = ({ onIncrement }) => {
  return <button onClick={onIncrement}>+</button>;
};

const Child2 = ({ onDecrement }) => {
  return <button onClick={onDecrement}>-</button>;
};

在这个例子中，Parent 组件管理共享状态，Child1 和 Child2 组件获取 onIncrement 和 onDecrement 回调函数，让它们更新父组件的 state。

总结

useReducer() 钩子是一个用于管理状态的函数，它通常用于在 React 组件中更复杂的状态管理。与 useState() 钩子一起使用，可轻松管理组件状态。它还可以在多个组件之间共享状态。