使用React useState（）钩子更新和合并状态对象

Question

我发现这两个反应钩文档有点混乱。使用状态钩子更新状态对象的最佳实践是哪一个？

假设一个用户希望进行以下状态更新：

INITIAL_STATE = {
  propA: true,
  propB: true
}

stateAfter = {
  propA: true,
  propB: false   // Changing this property
}

选择1

从使用React Hook一文中，我们可以看出这是可能的：

const [count, setCount] = useState(0);
setCount(count + 1);

所以我可以做：

const [myState, setMyState] = useState(INITIAL_STATE);

然后呢：

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

选择2

从Hooks参考中我们得到：

与类组件中的setState方法不同，useState不会自动合并更新对象。通过将函数更新程序窗体与对象扩展语法相结合，可以复制此行为：

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

据我所知，两者都有效。那么，有什么区别呢？哪一个是最佳实践？我应该使用pass函数（选项2）访问前一个状态，还是应该使用扩展语法（选项1）访问当前状态？

Answer 1

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

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

选项1可能会导致更多的bug，因为这样的代码通常会在一个具有过时值myState的闭包中结束。

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

setCount(count => count + 1);

对于复杂的状态结构考虑使用UrError

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

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('[e-mail]');

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

Answer 2

如果有人正在搜索对象的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'
    }));

Answer 3

这两个选项都是有效的，但是就像类组件中的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>