小编典典

useState()进行双重渲染

reactjs

我在函数组件中使用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'));

谢谢


阅读 974

收藏
2020-07-22

共1个答案

小编典典

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

严格模式无法自动为您检测副作用,但可以通过使其更具确定性来帮助您发现它们。这是通过有意地双重调用以下功能来完成的:

  • 类组件的构造函数,呈现器和shouldComponentUpdate方法
  • 类组件的静态getDerivedStateFromProps方法
  • 功能组件主体
  • 状态更新器功能(setState的第一个参数)
  • 传递给useState,useMemo或useReducer的函数

注意:这仅适用于开发模式。在生产模式下,不会重复调用生命周期。

https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-
effects

2020-07-22