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”，在开发工具中显示一个“Counter Render”日志 -就像我预期的那样。

奇怪的部分来自 renders 变量，我用数字 0（在组件外，offcourse ）开始并在组件的每次渲染时递增。我希望这里的值也将是 1，但事实并非如此，每次我单击按钮时，“渲染”的值都会增加 2，即使“计数器渲染”日志每次都显示一次。

Here is a the Sandbox example

谁能解释一下我在这里遗漏了什么？

Answer 1

您正在React's Strict Mode (since your app is wrapped in <StrictMode>)跑步。

严格模式可能会多次渲染组件，以确保您不会做诸如依赖渲染计数之类的顽皮事情——而您现在正是这样做的。 ;-)

奇怪的 React 渲染问题

1 个答案: