奇怪的 React 渲染问题 [重复]答案

【问题标题】：Weird React render issues [duplicate]奇怪的 React 渲染问题 [重复]
【发布时间】：2021-08-16 09:13:47
【问题描述】：

所以在过去一年使用 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);

在上面的代码中，我添加了一个简单的计数器，每次点击我都会设置一个新状态，这会导致重新渲染，在屏幕上显示“计数：1”，并在开发工具中显示一个“计数器渲染”日志 -和我预想的一样。

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

Here is a the Sandbox example

谁能解释我在这里缺少什么？

【问题讨论】：

我最近回答了一个关于这种行为的问题。答案涵盖了官方文档中的内容。请看 - stackoverflow.com/questions/67709551/…
我认为这是因为变量的范围。如果您在 counter 内移动 renders 变量，那么它的行为应该符合您的预期。而且由于我们没有更改渲染变量的状态，因此无论您在计数器上执行多少增量，它都应该显示相同的值。
@AnkitGarg 如果renders 被移动进入 Counter 组件，那么它将在每个渲染周期重新声明。它总是会渲染0。

标签： javascript reactjs react-hooks

【解决方案1】：

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

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

【讨论】：

但是为什么 renders 变量增加了两次，但是 console.log 在它只运行一次之后就出现了？这是我不明白的部分
@ishaym 奇怪的是，如果你 console.log("COUNTER", renders, count); 你看到计数“1 0”“3 1”“5 2”......渲染仍然上升 2，但它是奇数.我的基本建议是不要相信无意的副作用，它们对任何事情都不可靠。坚持使用组件生命周期。
永远不会相信他们，只是想弄清楚这一点，无论如何谢谢（：