useState() 做双重渲染答案

【问题标题】：useState() do double renderuseState() 做双重渲染
【发布时间】：2019-07-22 11:34:40
【问题描述】：

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

谢谢

【问题讨论】：

我看到渲染只被调用了一次。 IT 可能取决于您应用程序的其他部分。 codesandbox.io/s/zkmqv84krx
@Ondrej 父组件渲染了多少次？

标签： reactjs render react-hooks

【解决方案1】：

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

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

类组件构造函数、渲染和 shouldComponentUpdate 方法

类组件静态getDerivedStateFromProps方法

函数组件体

状态更新函数（第一个参数设置状态）

传递给 useState、useMemo 或 useReducer 的函数

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

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

【讨论】：

【解决方案2】：

问题出在 React DevTools 中。当控制台关闭时，组件只渲染一次。但是如果你打开 React DevTools 并重新加载页面，render 会显示两次。打开example 试试看。（反应 16.8.3）

【讨论】：

你为我省了很多麻烦。谢谢！
这还有问题吗？我有同样的问题。
来过这里，也问过自己。

【解决方案3】：

删除 index.js 文件中的包装器

【讨论】：