主页 / coding / 问题 / 79379688
Accepted
David Klempfner
Asked: 2025-01-23 10:37:27 +0800 CST

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

  • 772

我有以下代码：

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”时，它打印了三次“Render”，然后当我单击按钮两次时，它开始了新的“Render”计数：

该图显示了日志的打印次数

为什么不直接说呢5 Render？

javascript

1 个回答

  1. Best Answer

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

    这种区别对于调试很有帮助，因为它可以让您看到不同的交互如何独立地影响组件生命周期。

    • 0

相关问题