组件挂载后useEffect中useRef值应为0还是1？为何首次渲染后count不为1？

这是由React的渲染流程和useEffect的执行时机决定的，具体拆解如下：

首次渲染的完整流程 #

1. 组件首次执行：初始化count.current = 0，随后返回JSX，此时页面渲染的是count.current的初始值0。
2. 渲染提交到DOM后：无依赖项的useEffect会在每次渲染完成后执行，此时count.current被更新为1，但这个修改不会触发组件重新渲染——ref的变化不属于React的状态更新机制，所以页面上的数值还是之前渲染的0。

只有当你在输入框中输入内容时，setInputValue触发组件重新渲染：此时组件函数再次执行，count.current已经是1，返回的JSX会显示1；之后useEffect再次执行把count变成2，但页面要等到下一次渲染才会更新这个值。

如何正确统计并显示渲染次数 #

如果想让渲染次数在页面上实时更新，不需要用useEffect，直接在组件函数执行时更新ref即可（因为每次渲染组件函数都会运行）：

import { useState, useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);
  // 每次组件渲染时自动计数
  count.current += 1;

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

这样首次渲染时count.current会直接变成1，页面显示的就是1；之后每次输入触发渲染，计数都会实时更新并显示。

内容的提问来源于stack exchange，提问作者Alb Rick Bi