Javascript 反应副作用失效效应挂钩

效果（增加r的值并记录它）在useEffect钩子中按预期工作

import React from "react";

let r = 0;

export default function App() {
  const [state, setState] = React.useState(false);

  function handler() {
    setState(!state);
  }

  React.useEffect(() => {
    r += 1;
    console.log("rendering:-", r, " times");
  });

  return (
    <>
      <button onClick={handler}>render</button>
    </>
  );
}

从“React”导入React；
设r=0；
导出默认函数App（）{
const[state，setState]=React.useState（false）；
函数处理程序（）{
设置状态（！状态）；
}
React.useffect（（）=>{
r+=1；
log（“呈现：-”，r，“时间”）；
});
返回(
提供
);
}

但是在useEffect挂钩之外，效果出人意料地工作。r的值增加2而不是1

import React from "react";

let r = 0;
export default function App() {
  const [state, setState] = React.useState(false);

  function handler(params) {
    setState(!state);
  }

  r += 1;
  console.log("rendering:-", r, " times");

  return (
    <>
      <button onClick={handler}>render</button>
    </>
  );
}

从“React”导入React；
设r=0；
导出默认函数App（）{
const[state，setState]=React.useState（false）；
函数处理程序（params）{
设置状态（！状态）；
}
r+=1；
log（“呈现：-”，r，“时间”）；
返回(
提供
);
}

但是为什么？？？

---

有人能给我解释一下吗….

r

仍然增加了1

注:

从React 17开始，React自动修改控制台 方法（如console.log（））在第二次调用 生命周期功能。但是，它可能会导致不希望的行为 在某些情况下，可以使用变通方法

您可以在此处阅读更多有关内容：

下面的代码示例显示，

r

增加1：

import React from "react";

let log = console.log
let r = 0;
export default function App() {
    const [state, setState] = React.useState(0);
    console.info('render');

    function handler(params) {
        setState((prevState) => prevState + 1);
    }

    r+=1;
    log("rendering:- r=" + r);
    log("rendering:- state=" + state);

    return (
        <>
            <button onClick={() => handler()}>render { state }</button>
        </>
    );
}

从“React”导入React；
让log=console.log
设r=0；
导出默认函数App（）{
const[state，setState]=React.useState（0）；
console.info（“呈现”）；
函数处理程序（params）{
设置状态（（prevState）=>prevState+1）；
}
r+=1；
日志（“呈现：-r=“+r”）；
日志（“呈现：-state=“+state”）；
返回(
handler（）}>呈现{state}
);
}

index.js中的strictMode说唱歌手实际调用了两次函数体

<React.StrictMode>
    <App />
</React.StrictMode>

严格模式不能自动检测副作用，但它
通过使它们更具确定性，可以帮助您识别它们。
这是通过故意双重调用以下函数来实现的：

在我的例子中，它仍然增加了1，谢谢你的回答，你使用的是什么版本的react ar，以及什么版本？你能做个演示吗？