React Hooks系列-状态

React方法函数中，提供了用于管理状态值的钩子函数: useState和useReducer

useState是React中的一个Hook，用于在函数组件中添加状态。它接受一个初始状态值，并返回一个数组，其中第一个元素是当前状态值，第二个元素是更新状态值的函数。

import React, { useState } from 'react';
function Example() {
  // 定义一个状态变量count，初始值为0
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

虽然useState可以让我们在函数组件中添加状态，但是当状态变得复杂时，使用useState可能会变得困难。这时候，useReducer就可以派上用场了。

useReducer是React中的另一个Hook，它可以让我们管理复杂的状态逻辑。它接受一个reducer函数和一个初始状态值，并返回一个数组，其中第一个元素是当前状态值，第二个元素是dispatch函数，用于触发状态更新。

import React, { useReducer } from 'react';

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

function Counter() {
  // 定义一个状态变量count，初始值为0
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

相比于useState，useReducer可以让我们更好地管理复杂的状态逻辑，例如状态之间的依赖关系、异步操作等。但是，使用useReducer也会增加代码的复杂度，因此在状态比较简单的情况下，使用useState可能更加合适。

接下来我再给一个管理一个购物车的商品列表的例子:

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'add':
      return { items: [...state.items, action.payload] };
    case 'remove':
      return { items: state.items.filter(item => item.id !== action.payload.id) };
    default:
      throw new Error();
  }
}

function ShoppingCart() {
  const [state, dispatch] = useReducer(reducer, { items: [] });

  function handleAddItem() {
    const newItem = { id: Date.now(), name: 'New Item' };
    dispatch({ type: 'add', payload: newItem });
  }

  function handleRemoveItem(item) {
    dispatch({ type: 'remove', payload: item });
  }

  return (
    <div>
      <ul>
        {state.items.map(item => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => handleRemoveItem(item)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={handleAddItem}>Add Item</button>
    </div>
  );
}

例子中，我们定义了一个reducer函数，它接受一个状态对象和一个action对象，并返回一个新的状态对象。我们还定义了一个ShoppingCart组件，它使用useReducer来管理商品列表。当用户点击添加商品按钮时，我们调用dispatch函数来触发状态更新，并传递一个action对象给reducer函数。

总之，useState和useReducer都是React中非常有用的Hooks，它们可以让我们更好地管理组件的状态。但是，它们的使用场景是不同的，需要根据具体情况进行选择。