React组件首次渲染时console.log输出两次的原因咨询

嘿，我来帮你拆解这个问题的根源，以及怎么解决它！

为什么会出现两次输出？ #

你已经猜到了其中一次的原因，咱们把两次的原因都理清楚：

• 第一次输出：你写的onClick={console.log("hello")}里，console.log("hello")是直接执行的代码，不是一个函数引用。React在渲染组件的时候，会执行这个表达式，所以一渲染就会打印一次"hello"。
• 第二次输出：这是React开发环境下的**严格模式（Strict Mode）**导致的。严格模式为了帮你检测代码里的副作用问题，会刻意重复调用组件的render方法（还有一些其他生命周期函数）。你的render函数被调用了两次，所以里面的console.log也被执行了第二次。

怎么解决这个问题？ #

核心是给onClick传递一个函数引用，而不是直接执行代码。修改按钮的写法就可以了：

<button onClick={() => console.log("hello")}>Change name</button>

这样改了之后，只有当你点击按钮的时候，console.log("hello")才会被执行，渲染的时候不会触发，自然也就不会有多余的输出了。

另外补充一下：如果你暂时关闭严格模式（比如把项目入口文件里的<React.StrictMode>标签去掉），开发环境下的重复渲染就会消失，但这不是解决问题的根本办法——严格模式是帮你提前发现潜在问题的工具，正确的做法还是给onClick传递函数。

内容的提问来源于stack exchange，提问作者Night owl