React 渲染计数器从两个开始答案

【问题标题】：React render counter start with twoReact 渲染计数器从两个开始
【发布时间】：2021-04-05 16:28:26
【问题描述】：

我已经使用create-react-app 创建了一个新的 React 应用程序，并且我使用渲染计数器进行了测试。

考虑以下代码：

import React, { useState } from "react";

let render = 0;

export default function App() {
  const [counter, setCounter] = useState(0);
  render++;

  return (
    <div>
      <button
        onClick={() => setCounter(counter + 1)}
      >{`Clicked ${counter} times`}</button>
      <p>{`Render counter: ${render}`}</p>
    </div>
  );
}

按照我的逻辑，render 变量第一次需要从 1 开始，但是......它从 2 开始，在我点击按钮后，渲染计数器转到 4 而不是 3。

据我所知，每次渲染后，当状态改变时渲染计数器应该改变，并且每次点击状态改变 1 次，有人可以解释我有什么问题吗？或者为什么会发生？

沙盒：https://codesandbox.io/s/little-sky-squ82?file=/src/App.js

谢谢！

【问题讨论】：

您启用了<React.StrictMode>（在 index.js 中），这将导致在开发中出现双重渲染，但在生产中则不会。此外，在您能够点击按钮之前进行渲染。
这能回答你的问题吗？ What is StrictMode in react?
谢谢，现在我明白了！

标签： javascript reactjs

【解决方案1】：

它应该可以正常工作：

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

export default function App() {
  const [counter, setCounter] = useState(0);
  const render = useRef(1);

  useEffect(() => {
    render.current++;
  });

  return (
    <div>
      <button
        onClick={() => setCounter((prevCount) => prevCount + 1)}
      >{`Clicked ${counter} times`}</button>
      <p>{`Render counter: ${render.current}`}</p>
    </div>
  );
}

尝试使用 useRef() 来跟踪渲染计数，如果您更新使用 prev 状态的状态，请不要喜欢这样：setCounter(counter + 1)。你应该这样做：setCounter((prevCount) => prevCount + 1)，因为它可能会产生问题。

【讨论】：