这两个选项都是有效的，但就像setState在类组件中一样，在更新从已经处于状态的事物派生的状态时需要小心。

例如，如果您连续两次更新计数，如果您不使用更新状态的功能版本，它将无法按预期工作。

const { useState } = React;

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

  function brokenIncrement() {
    setCount(count + 1);
    setCount(count + 1);
  }

  function increment() {
    setCount(count => count + 1);
    setCount(count => count + 1);
  }

  return (
    <div>
      <div>{count}</div>
      <button onClick={brokenIncrement}>Broken increment</button>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

如果有人正在搜索 useState()挂钩更新对象

• 通过输入

  const [state, setState] = useState({ fName: "", lName: "" });
  const handleChange = e => {
      const { name, value } = e.target;
      setState(prevState => ({
          ...prevState,
          [name]: value
      }));
  };
  
  <input
      value={state.fName}
      type="text"
      onChange={handleChange}
      name="fName"
  />
  <input
      value={state.lName}
      type="text"
      onChange={handleChange}
      name="lName"
  />
  

• 通过 onSubmit 或按钮点击

      setState(prevState => ({
         ...prevState,
         fName: 'your updated value here'
      }));
  

最佳做法是使用单独的调用：

const [a, setA] = useState(true);
const [b, setB] = useState(true);

选项 1 可能会导致更多错误，因为此类代码通常最终位于具有过时值的闭包中myState。

当新状态基于旧状态时，应使用选项 2：

setCount(count => count + 1);

对于复杂的状态结构，请考虑使用useReducer

对于共享某些形状和逻辑的复杂结构，您可以创建自定义挂钩：

function useField(defaultValue) {
  const [value, setValue] = useState(defaultValue);
  const [dirty, setDirty] = useState(false);
  const [touched, setTouched] = useState(false);

  function handleChange(e) {
    setValue(e.target.value);
    setTouched(true);
  }

  return {
    value, setValue,
    dirty, setDirty,
    touched, setTouched,
    handleChange
  }
}

function MyComponent() {
  const username = useField('some username');
  const email = useField('some@mail.com');

  return <input name="username" value={username.value} onChange={username.handleChange}/>;
}

哪个是使用状态挂钩更新状态对象的最佳实践？

正如其他答案所指出的那样，它们都是有效的。

有什么区别？

似乎混乱是由于"Unlike the setState method found in class components, useState does not automatically merge update objects"，尤其是“合并”部分。

让我们比较this.setState&useState

class SetStateApp extends React.Component {
  state = {
    propA: true,
    propB: true
  };

  toggle = e => {
    const { name } = e.target;
    this.setState(
      prevState => ({
        [name]: !prevState[name]
      }),
      () => console.log(`this.state`, this.state)
    );
  };
  ...
}

function HooksApp() {
  const INITIAL_STATE = { propA: true, propB: true };
  const [myState, setMyState] = React.useState(INITIAL_STATE);

  const { propA, propB } = myState;

  function toggle(e) {
    const { name } = e.target;
    setMyState({ [name]: !myState[name] });
  }
...
}

他们都propA/B在toggle处理程序中切换。他们都只更新了一个作为e.target.name.

看看当您只更新setMyState.

以下演示显示单击propA会引发错误（仅发生setMyState），

你可以跟着

警告：组件正在将复选框类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控制（反之亦然）。决定在组件的生命周期内使用受控或非受控输入元素。

这是因为当您单击propA复选框时，propB值会被删除，并且只有propA值会被切换，从而使propB的checked值未定义，从而使复选框不受控制。

并且this.setState一次只更新一个属性，但更新merges其他属性，因此复选框保持受控。

我挖掘了源代码，行为是由于useState调用useReducer

在内部，useState调用useReducer，它返回减速器返回的任何状态。

https://github.com/facebook/react/blob/2b93d686e3/packages/react-reconciler/src/ReactFiberHooks.js#L1230

    useState<S>(
      initialState: (() => S) | S,
    ): [S, Dispatch<BasicStateAction<S>>] {
      currentHookNameInDev = 'useState';
        ...
      try {
        return updateState(initialState);
      } finally {
        ...
      }
    },

updateState的内部实现在哪里useReducer？

function updateState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  return updateReducer(basicStateReducer, (initialState: any));
}

    useReducer<S, I, A>(
      reducer: (S, A) => S,
      initialArg: I,
      init?: I => S,
    ): [S, Dispatch<A>] {
      currentHookNameInDev = 'useReducer';
      updateHookTypesDev();
      const prevDispatcher = ReactCurrentDispatcher.current;
      ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
      try {
        return updateReducer(reducer, initialArg, init);
      } finally {
        ReactCurrentDispatcher.current = prevDispatcher;
      }
    },

如果您熟悉 Redux，您通常会像在选项 1 中那样通过扩展先前状态来返回一个新对象。

setMyState({
  ...myState,
  propB: false
});

因此，如果您只设置一个属性，则不会合并其他属性。

根据您的用例，一个或多个关于状态类型的选项可能适用

通常，您可以遵循以下规则来决定您想要的状态类型

第一：各个州是否相关

如果您的应用程序中的各个状态彼此相关，那么您可以选择将它们组合在一个对象中。否则最好将它们分开并使用多个，useState以便在处理特定处理程序时您只更新相关状态属性而不关心其他处理程序

例如，诸如name, email相关的用户属性，您可以将它们组合在一起，而为了维护多个计数器，您可以使用multiple useState hooks

第二：更新状态的逻辑是否复杂，取决于处理程序或用户交互

在上述情况下，最好使用useReducer状态定义。这样的那种情景是，当你试图创建例如与待办事项应用要非常普遍update，create而且delete在不同的互动元素

我应该使用传递函数（选项 2）来访问以前的状态，还是应该使用扩展语法（选项 1）简单地访问当前状态？

使用钩子的状态更新也是批处理的，因此每当你想根据前一个更新状态时，最好使用回调模式。

当 setter 没有从封闭的闭包中接收到更新的值时，更新状态的回调模式也会派上用场，因为它只被定义了一次。例如，useEffect当添加更新事件状态的侦听器时，仅在初始渲染时调用此情况的示例。