React开发中Chrome控制台浅色日志的来源及解决方法

我在学习React时编写了包含memo、useState的代码，点击按钮后Chrome控制台出现两条“refresh”日志，第二条颜色较浅，但学习视频中仅显示一条。请问：

1. 该浅色日志来自何处？
2. 如何设置让控制台仅显示一条日志？

我的代码 #

import React from "react";
import { useState, memo } from "react";

const Child = memo(() => {
  console.log("refresh");
  return <h1>Child</h1>;
});

export default function App5() {
  const [num, setNum] = useState("123");

  return (
    <>
      <h2>{num}</h2>
      <button onClick={() => setNum(345)}>刷新一下</button>
      <hr />
      <Child />
    </>
  );
}

控制台输出 #

可见第二条“refresh”颜色较浅，但学习视频中仅显示第一条输出

问题解答 #

1. 浅色日志的来源 #

这条浅色日志是**React严格模式（Strict Mode）**导致的。开发环境下，React严格模式会刻意重复调用组件函数、useState初始化函数等逻辑，目的是提前排查代码中潜在的副作用问题——比如组件函数包含不可重复执行的操作时，重复调用就能暴露隐患。

因为你的项目默认开启了严格模式，点击按钮触发组件更新时，Child组件函数会被调用两次，从而打印两条日志，其中第二次调用的日志会被浏览器标记为浅色，用来区分严格模式的重复执行行为。

2. 如何让控制台仅显示一条日志 #

有两种可行方案：

• 关闭React严格模式：找到项目入口文件（通常是src/index.js或src/main.jsx），移除包裹<App>的<React.StrictMode>标签。关闭后开发环境下组件函数只会执行一次，日志就仅显示一条。
• 保持严格模式并过滤重复日志：若不想关闭严格模式（它能帮你提前排查问题），可以在Chrome控制台过滤框输入-strict，过滤掉严格模式产生的重复日志；也可点击控制台左上角设置图标，勾选"Hide strict mode double logs"选项，直接隐藏这类重复日志。

内容的提问来源于stack exchange，提问作者a good boy