点击按钮时为何非函数内的两个console.log也会执行？

预期点击按钮时仅执行shuffleCards函数，但实际位于该函数外部的前后两个console.log语句也一同执行，请问这是什么原因？相关代码如下：

import { useState } from 'react';

const cardImages = [
  {"text": "A"},
  {"text": "B"},
  {"text": "C"},
  {"text": "D"},
  {"text": "E"},
  {"text": "F"},
]

function App() {
  const [cards, setCards] = useState([]);
  const [turns, setTurns] = useState(0);

  console.log("Cardssssssssss")

  const shuffleCards = () => {
    const shuffledCards = [...cardImages, ...cardImages]
      .sort(() => Math.random() - 0.5)
      .map((card) => ({ ...card, id: Math.random() }))
    setCards(shuffledCards);
    setTurns(0)     // understand sort() method
  }  // even though rahom bara lfunction rahom y'atfficha f onclick why  

  console.log("Cards:", cards)

  return (
    <div className="App  text-center p-4 text-white bg-[black] h-[100vh] " >
      <h1  className='text-4xl font-bold  ' >Magic Match</h1>            
      <button
        onClick={shuffleCards}
        className='border-white border border-solid p-1 px-2 mt-4 '
      >
        New Game
      </button>
    </div>
)

• React组件的本质是函数，每次组件发生渲染（包括首次挂载、状态更新触发的重渲染）时，组件函数会从头到尾完整执行一次。
• 你写的两个console.log直接放在App组件函数的顶层，不属于shuffleCards函数内部，所以只要组件渲染就会自动执行，和按钮点击没有直接绑定关系：
  1. 组件首次加载时，App函数执行，两个console.log会先输出一次；
  2. 点击按钮触发shuffleCards后，函数里调用了setCards和setTurns更新状态，状态变化会触发组件重新渲染，App函数再次执行，两个console.log也就跟着再次执行了。

如果只想在点击按钮时执行日志输出，需要把console.log移动到shuffleCards函数内部。

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