为什么一个简单的 React 组件会渲染两次？

Question

我刚刚启动了一个新的 create-react-app 项目，并注意到 React 渲染了两次组件！我在package.json中的反应版本是"react": "^16.13.1"import React, { useRef } from "react";const App = () => {  const renders = useRef(0);  console.log("renders: ", renders.current++);  return (    <div>      Hello    </div>  );};这在第一次渲染时产生：renders: 0renders: 0现在，如果我添加一个按钮来增加状态，每个状态变化也会产生两个额外的渲染：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>  );};这将导致：//--- initial renderrenders: 0renders: 0//--- first clickrenders: 1renders: 2//--- second clickrenders: 3renders: 4//--- third clickrenders: 5renders: 6这是正常现象还是最新版本的 React 中的错误？

Answer 1

好的，看来我找到了原因。检查后index.js我发现以下内容：

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

看起来 create-react-app 现在包括React.StrictMode在开发模式（而不是生产模式）中双重调用某些方法。

Answer 2

除了您发现的 StrictMode 问题之外，我认为当您使用ref类似的东西时它会产生副作用，因此您通常需要将其放入useEffect以防止它渲染两次：

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;