useState（）进行双重渲染

Z时代
2024-01-10
分类：问答

我在函数组件中使用useState（），第一个渲染调用了两次。是正确还是错误？如果正确，为什么会渲染两次？setCount也两次渲染该组件。

function Example() {
  const [count, setCount] = useState(0);
  console.log("render");
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
ReactDOM.render(<Example />, document.getElementById('uu5'));

谢谢

回答：

据react docs称，如果您使用StrictMode，这是一项有意功能，可帮助您检测意外的副作用

严格模式无法自动为您检测副作用，但可以通过使其更具确定性来帮助您发现它们。这是通过有意地双重调用以下功能来完成的：
类组件的构造函数，呈现器和shouldComponentUpdate方法
类组件的静态getDerivedStateFromProps方法
功能组件主体
状态更新器功能（setState的第一个参数）
注意：这仅适用于开发模式。在生产模式下，不会重复调用生命周期。