useReducer 中是否需要使用展开运算符？

Question

编辑：检查布莱恩的答案后，我发现即使在第二个示例中，删除...state也会导致与第一个示例相同的行为，所以这个问题问是错误的。我不确定是什么导致了错误的行为，并对造成的任何不便表示歉意。布莱恩的回答很好地解释了用途。

比较以下 2 个代码片段，它们通过使用 一次更新 2 个状态来完成相同的操作initialState，除了一个使用useState，另一个使用useReducer：

useState

const {useState} = React;

const initialState = {

  name: 'John',

  age: 20

};

const Example = () => {

  const [state, setState] = useState(initialState);

  const handleName = () => {

    setState({...state, name: 'Tom'});

  }

  

  const handleAge = () => {

    setState({...state, age: 30});

  }

  return (

    <div>

      <p>{state.name}</p>

      <p>{state.age}</p>

      <button onClick={handleName}>

        Click to change name

      </button>

      <button onClick={handleAge}>

        Click to change age

       </button>

    </div>

  );

};

ReactDOM.render(

  <Example />,

  document.getElementById("react")

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="react"></div>

如果在第一个示例中删除...state，它将状态设置为单个键/值对，因此不再起作用。我原以为第二个例子中会发生同样的事情，但事实并非如此。第二个示例在删除扩展运算符后效果很好。

我对第二个例子有3个问题：

1. 扩展运算符有什么用？

2. 为什么删除扩展运算符后它仍然有效？

3. 如果没有扩展运算符也能正常工作，这是否意味着第二个示例中不需要扩展运算符？

Answer 1

也不useState会对useReducer以前的值进行任何合并。setState在状态更新期间（无论是在调用中，还是在减速器函数定义中），您有责任保留以前的状态值。您可以在下面修改后的代码中清楚地看到这一点。我所做的只是从每个开关盒中删除...state。const {useReducer} = React;const initialState = {    name: 'Tom',    age: 30}const reducer = (state, action) => {    switch (action.type) {        case 'name':            return {                name: 'John'            }        case 'age':            return {                age: 25            }        default:            return state    }}const Example = () => {  const [state, dispatch] = useReducer(reducer, initialState);    return (        <div>            <p>Name: {state.name}</p>            <p>Age: {state.age}</p>            <button onClick={() => dispatch({ type: 'name' })}>Click to update name</button>            <button onClick={() => dispatch({ type: 'age' })}>Click to update age</button>        </div>    )};ReactDOM.render(  <Example />,  document.getElementById("react"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><div id="react"></div>为此目的如此频繁地使用扩展运算符的原因是，它将所有未更改的值放入新对象中是最不繁琐的方法。