Javascript 为什么简单的React组件渲染两次？

我刚刚启动了一个新的CreateReact应用程序项目，并注意到react正在两次渲染组件！package.json中我的react版本是

“react”：“^16.13.1”

现在，如果我向“增量状态”添加一个按钮，则每个状态更改也会生成两个附加渲染：

import React, { useRef } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const renders = useRef(0);
  console.log("renders: ", renders.current++);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>increment</button>
      <div>count: {count}</div>
    </div>
  );
};

---

这是正常的还是最新版本的react中的错误？

好的，看来我找到了原因。在检查了

index.js

之后，我发现：

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM.render(
,
document.getElementById（'root'））
);

---

看起来create react应用程序现在包括了

react.StrictMode

，它在开发模式（非生产模式）中双重调用某些方法。

除了您发现的StrictMode问题，我认为，当您使用

ref

时，它会产生副作用，因此通常需要将其放入

useffect

中，以防止渲染两次：

import React, { useState, useEffect, useRef } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const renders = useRef(0);
  useEffect(() => {
    // Every time the component has been re-rendered,
    // the counter is incremented
    console.log("renders: ", renders.current++);
  }); 


  return (
    <div>
      <button onClick={() => setCount(count + 1)}>increment</button>
      <div>count: {count}</div>
    </div>
  );
};

export default App;

import React，{useState，useffect，useRef}来自“React”；
常量应用=（）=>{
const[count，setCount]=useState（0）；
const renders=useRef（0）；
useffect（（）=>{
//每次重新渲染组件时，
//计数器是递增的
log（“renders:”，renders.current++）；
}); 
返回(
setCount（计数+1）}>增量
计数：{count}
);
};
导出默认应用程序；

这是因为严格模式。所以，它将在开发中运行两次，而不是在生产中。是的，我在一些额外的研究后意识到了这一点。谢谢。这是一个让一些隐藏的bug显式显示的功能：

//--- initial render
renders: 0
renders: 0
//--- first click
renders: 1
renders: 2
//--- second click
renders: 3
renders: 4
//--- third click
renders: 5
renders: 6

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

import React, { useState, useEffect, useRef } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const renders = useRef(0);
  useEffect(() => {
    // Every time the component has been re-rendered,
    // the counter is incremented
    console.log("renders: ", renders.current++);
  }); 


  return (
    <div>
      <button onClick={() => setCount(count + 1)}>increment</button>
      <div>count: {count}</div>
    </div>
  );
};

export default App;