数据更新的利刃：useReducer和useState的函数式组件之旅

2024-01-16 01:19:59

前言

在React的世界里，函数组件因其简洁性和可维护性而大放异彩。然而，它们有一个小小的缺点：不支持直接更新内部状态。为了解决这一问题，React引入了两个强大的工具：useReducer和useState。它们赋予了函数组件更新内部状态的能力，让我们拥抱函数组件的优势，同时享受状态管理的便捷。

useReducer：状态管理的瑞士军刀

useReducer是一个状态管理工具，它采用了一种称为reducer的纯函数来处理状态更新。reducer接受两个参数：当前状态和一个包含更新指令的动作对象。它根据动作对象返回一个新的状态，从而实现状态的更新。

使用useReducer的步骤如下：

定义reducer函数： 这是一个纯函数，根据动作对象更新状态。
创建初始状态： 定义组件初始状态的一个对象。
使用useReducer钩子： 它接受reducer函数和初始状态，返回当前状态和一个派发动作函数。
派发动作： 当需要更新状态时，调用派发动作函数，传递动作对象。

useState：状态管理的精简利器

useState是一个更简单易用的状态管理工具，适用于状态更新不复杂的情况。它接受一个初始状态值，返回一个数组，其中包含当前状态值和一个更新函数。

使用useState的步骤如下：

创建初始状态： 定义一个初始状态值。
使用useState钩子： 它接受初始状态值，返回一个数组，其中包含当前状态值和一个更新函数。
更新状态： 调用更新函数，传递新的状态值。

实战应用

使用useReducer管理购物车

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return { ...state, cart: [...state.cart, action.item] };
    case 'REMOVE_ITEM':
      return { ...state, cart: state.cart.filter(item => item !== action.item) };
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, { cart: [] });

  const addItem = (item) => {
    dispatch({ type: 'ADD_ITEM', item });
  };

  const removeItem = (item) => {
    dispatch({ type: 'REMOVE_ITEM', item });
  };

  return (
    <>
      <ul>
        {state.cart.map(item => <li>{item}</li>)}
      </ul>
      <button onClick={() => addItem('Item 1')}>Add Item 1</button>
      <button onClick={() => removeItem('Item 1')}>Remove Item 1</button>
    </>
  );
};

使用useState管理表单数据

const App = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleChange = (event) => {
    const { name, value } = event.target;
    if (name === 'name') {
      setName(value);
    } else {
      setEmail(value);
    }
  };

  return (
    <>
      <input type="text" name="name" value={name} onChange={handleChange} />
      <input type="email" name="email" value={email} onChange={handleChange} />
      <p>Name: {name}</p>
      <p>Email: {email}</p>
    </>
  );
};