为什么每次点击React组件内的按钮时，setEmotion都会被console.log打印？

你遇到的情况是React函数组件的正常运行机制，和你是否主动调用App()无关，具体逻辑如下：

• 你定义的App属于React函数组件，组件的渲染、更新流程完全由React框架自身调度：当React判断组件需要更新时，会自动调用App函数生成最新的虚拟DOM结构
• 你点击按钮时执行的setEmotion是useState返回的状态修改方法，调用它会做两件事：1. 更新emotion状态的值；2. 通知React当前App组件需要重新渲染
• 重渲染流程触发后，App函数会完整执行一次，写在函数内部顶层的console.log语句自然会在每次重渲染时被调用，所以你每次点击按钮都会看到打印输出。

如果你希望这段打印仅在组件首次挂载时执行，可以把它放到空依赖的useEffect钩子中，示例如下：

import './App.css';
import React, {useState, useEffect} from "react";

function App() {
  const [emotion, setEmotion] = useState("happy");
  // 仅首次挂载执行一次
  useEffect(() => {
    console.log(emotion, setEmotion)
  }, [])
  return(
    <>
   <h1>Current emotion is {emotion}</h1>
   <button onClick={() => setEmotion("sad")}>Sad</button>
   <button onClick={() => setEmotion("angry")}>Angry</button>
   <button onClick={() => setEmotion("happy")}>Happy</button>
    </>
  )
}

export default App;

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