用钩子反应渲染两次答案

【问题标题】：React render twice with hooks用钩子反应渲染两次
【发布时间】：2020-08-16 08:32:41
【问题描述】：

为什么我的组件会渲染两次？

export default function App() {
  console.log("asd");
  const [count, setCount] = useState(0);
  return (
    <div>
      <Title count={count} />
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      />
    </div>
  );
}


//console= "asd" "asd"

它的渲染两次，但如果我删除 useState 它不会发生

【问题讨论】：

因为应用程序被包裹在 React.StrictMode 中并且你在开发模式下运行。
这能回答你的问题吗？ React Hooks render twice

标签： reactjs react-hooks render

【解决方案1】：

您的应用可能被 React.StrictMode 包装。 StrictMode 是一种用于突出显示应用程序中潜在问题的工具。

StrictMode 目前有助于：

识别具有不安全生命周期的组件

关于旧版字符串引用 API 使用的警告

关于不推荐使用 findDOMNode 的警告

检测意外的副作用

检测遗留上下文 API

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

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

类组件静态getDerivedStateFromProps方法

函数组件体（你的应用是函数组件）

状态更新函数（setState 的第一个参数）

传递给 useState、useMemo 或 useReducer 的函数

More Detail

【讨论】：

太棒了！最后一个小问题，如果我的组件是一个函数（函数组件体）并且它有一个 useMemo 函数，（传递给 useState、useMemo 或 useReducer 的函数）它会渲染 4 或 2 次？它让我认为组件应该只渲染 2 次，我是对的吗？
它应该是 2 次，但是如果你使用 useMemo 然后 react 将比较更改，如果没有更改，那么它将阻止重新渲染。另一方面 useState 将重新渲染组件有任何变化。为了更清楚，请阅读reactjs.org/docs/hooks-reference.html