奇怪的渲染问题[重复]

Question

因此，在去年与react合作之后，我设法理解了它的功能和注意事项，以及如何避免不必要的渲染。

昨天我在玩一些代码，遇到了一个以前没有看到的问题，有点困惑。

import React, { useCallback, useState } from "react";

let renders = 0;

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((c) => c + 1);
  }, []);

  renders = renders + 1;

  console.log("Counter Render");

  return (
    <div>
      <button onClick={increment}>increment</button>
      <h2>renders: {renders}</h2>
      <h4>Count: {count}</h4>
    </div>
  );
};

export default React.memo(Counter);

在上面的代码中，我添加了一个简单的计数器，每次单击都会设置一个新的状态，这会导致重新渲染，在屏幕上显示“Count:1”，并在dev工具中显示一个“counter render”日志，就像我预期的那样。

奇怪的部分来自渲染变量，我用数字0启动（在组件之外，当然），并在组件的每次渲染上递增我点击按钮，“渲染”的值增长2，即使“计数器渲染”日志每次显示一次。

下面是一个沙盒的例子

谁能解释一下我错过了什么？

Answer 1

您正在React的严格模式下运行（因为您的应用程序被包装在中）

Strict模式可以多次渲染组件，以确保您没有做一些不正常的事情，例如依赖渲染计数，而您现在正是这样做的。；-）