Chrome 何时决定显示一个数字来指示重复的 console.log() 调用数量？

Question

我注意到，如果多次调用 Chrome DevTools，它会在

console.log()

的输出之前显示一个数字。

但是，我注意到在某些情况下它会在新线路上显示相同的

console.log()

调用。

我有一个 React 应用程序，正在

console.log()

钩子中调用

useEffect()

：

  useEffect(() => {
    console.log('rendered!');
  });

当我在输入中输入字母

'a'

时，它会显示

'rendered!'

，然后如果我单击按钮添加项目，它会在新行上显示

'rendered!'

：

但是，如果我继续输入第一个输入，我会再次在新行中看到

'rendered!'

，但会显示一个数字来指示对具有相同输出的

console.log()

进行多次调用。

在这里，我输入了

'abc'

，这导致对

useEffect()

钩子的 3 次调用。

为什么在输入结果中键入一个数字，指示对该特定字符串进行的调用次数，为什么当我单击按钮时它会将其放在新行上？

Answer 1

您在 Chrome DevTools 中观察到的多次调用 console.log() 在输出之前显示数字的行为实际上是 Chrome 控制台日志记录机制的一项功能。当您多次记录同一条消息时，Chrome DevTools 通过在消息旁边显示相同日志消息的计数来优化输出。

因此，如果您连续多次调用 console.log('rendered!') 且中间没有任何其他日志，您将看到 console.log 输出后面的数字，就像您在场景中看到的那样。

第一次在两行不同的行中呈现 console.log 是因为您在 Chrome DevTools 中观察到的行为是它处理控制台日志记录的方式以及 React 中 console.log() 调用的时间的结果组件生命周期。

当您最初加载组件或触发 useEffect 钩子时，首次调用 console.log('rendered!') 。此时，Chrome DevTools 会在一行中显示日志消息，因为这是该日志消息第一次出现。 但是，当您与 React 应用程序交互时，例如在输入字段中键入或单击按钮，组件可能会重新渲染多次。每次组件重新渲染时，都会再次调用 useEffect 挂钩，从而导致额外调用 console.log('rendered!')。