从不同元素调用时，重复的 console.log() 计数会重置

Question

我有以下代码：

import ReactDOM from 'react-dom/client';
import { useState, useEffect } from 'react';

const App = () => {
  
  useEffect(() => { console.log('Render'); });

  const [item, setItem] = useState([]);
  const [word, setWord] = useState([]);

  return (
    <div>
      <input value={item} onChange={(e) => {setItem(e.target.value)}}></input>
      <label>{word}</label>
      <button onClick={() => setWord(new Date().toString())}>Submit</button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

为什么输入

console.log('Render')

会显示

<input>

打印的次数，而点击

<button>

会显示打印的次数？

在这里，您可以看到当我输入“abc”时，它打印了三次“渲染”，然后当我单击按钮两次时，它开始了新的“渲染”计数：

为什么不直接说

5 Render

？

Answer 1

控制台自动分离源自不同用户操作的日志，为每种交互类型维护单独的计数器。

这种区别有助于调试，因为它允许您查看不同的交互如何独立地影响组件生命周期。