我不太明白Reaction状态在Reaction功能组件中是如何工作的。互联网上说，在原始状态最基本的情况下，

• 如果状态与之前相同，功能组件将不会重新呈现
• 对于类组件，它将重新呈现，而不考虑

但对于下面的代码，使用功能组件，我面临以下场景：

当状态第一次更改时，组件将重新呈现

如果我再次使用相同的值更新状态，则状态将再次更改

随后使用相同的值更新状态的所有尝试都不会重新呈现组件。

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

function App() {
  console.log("Component Ran");
  const [placeHolder, setPlaceHolder] = useState("Start");
  const onClickHandler = (e) => {
    if (!e.target.classList.contains("state")) return;
    const it = e.target.innerText;
    console.log("coming from onClickHandler", it);
    setPlaceHolder(it);
  };
  return (
    <>
      <div>{placeHolder}</div>
      <div onClick={onClickHandler}>
        <button className="state">State 1</button>
        <button className="state">State 2</button>
      </div>
    </>
  );
}

export default App;

基本上有两个按钮，每个按钮分别用于状态1和状态2。当单击该按钮时，状态占位符将更新为按钮的innerText。在按钮的顶部有一个元素，它显示状态。下面是我在控制台中注意到的：现在假设占位符状态是状态1。我点击状态2按钮，我会在控制台日志中看到下面的输出。

来自onClickHandler状态2

元件范围

我再次点击状态为2的按钮，再次得到相同的输出。

但下一次和之后的一百万次，当我点击状态为2的按钮时，我只能得到低于输出的结果，

来自onClickHandler状态2

我在这里错过了什么。至少我预计会有一种行为，要么组件每次都会重新呈现，要么只在它更改时才重新呈现。为什么会出现这种喜忧参半的行为？