使用多个setHook使组件渲染不止一次？

Question

如果我有很多useState并且点击一个按钮我会调用多个setHook，它会渲染多次还是只渲染一次？

EG

export default function setMultipleHooks() {

    const [hook1, setHook1] = useState(false)
    const [hook2, setHook2] = useState(false)
    const [hook3, setHook3] = useState(false)
    const [hook4, setHook4] = useState(false)

    const setHooks = () => {
        setHook1(true)
        setHook2(true)
        setHook3(true)
        setHook4(true)
    }

    return (
        <button onClick={setHooks} >Hey</button>
    )

}

单击按钮后，它会呈现多少次？ 1或4次？

通常要检查组件渲染的次数，我只是在console.log方法中放了一个render，但是有了功能组件，我不知道如何测试它。

如果它渲染4次，如果4个钩子总是相关的话，最好只使用一个useState（传递一个物体）？

Answer 1

React可以批处理多个setState调用并一次渲染它们。在你的情况下它会这样做，因为你在一个事件处理程序（onClick）内。

它只呈现一次（初始渲染不包括在内），如下面的代码片段所示。

Github issue about React batching setState() calls

但是，您可以使用具有4个属性的对象而不是4个状态钩子变量。但是在更新状态时你必须要小心，因为hook的setState（）不会自动将你的最后一个状态与你的新状态属性合并。它完全用您正在传递的新对象替换状态。

React Docs - Using the state hook

所以你必须做这样的事情：

function YourComponent() {
  const INITIAL_STATE = {a: false, b: false, c: false, d: false};
  const [state,setState] = useState(INITIAL_STATE);

  function handleClick() {
    setState((prevState) => {
      return({
        ...prevState,
        b: true
      });
    });
  }

}

const { useState, useRef, useEffect } = React;

function App() {

  const renderTimes = useRef(0);

  const [hook1, setHook1] = useState(false);
  const [hook2, setHook2] = useState(false);
  const [hook3, setHook3] = useState(false);
  const [hook4, setHook4] = useState(false);
  
  const setHooks = () => {
    setHook1(true);
    setHook2(true);
    setHook3(true);
    setHook4(true);
  }

  useEffect( () => {
    renderTimes.current+=1;
  });

  return (
    <div>
      <div>I rendered {renderTimes.current} time(s).</div>
      <div>NOTE: The initial render is not included.</div>
      <div>State hook1 is equal to: {hook1.toString()}</div>
      <div>State hook2 is equal to: {hook2.toString()}</div>
      <div>State hook3 is equal to: {hook3.toString()}</div>
      <div>State hook4 is equal to: {hook4.toString()}</div>
      <button onClick={setHooks}>Click</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>

Answer 2

通常要检查组件渲染的次数，我只是在render方法中放入一个console.log，但是有了功能组件，我不知道如何测试它。

只需将console.log放在函数内（函数本身就是render方法）。它只会呈现一次，因为有一个很小的时间间隔，如果多次调用useState setter，它们的更新将被批处理。

如果它呈现4次，那么如果4个钩子总是相关的话，最好只使用一个useState（传递一个对象）？

如果你有复杂的状态，你应该考虑useReducer。

---

更多：

https://stackoverflow.com/a/54716601/10995369

https://github.com/acdlite/react-fiber-architecture