javascript - 第二次单击时状态未更改时组件重新呈现

Question

我有一个选项卡组件，每次单击不同的选项卡时都会更改状态。
组件父级

import { useState } from "react";
import "./styles.scss";
import MemoizedTab from "./tab";

export default function App() {
  const [selectTab, setSelectTab] = useState("a");
  console.log("parent render");
  return (
    <div className="App">
      <div className="tab-list">
        <MemoizedTab
          tab={"a"}
          title={"First Title"}
          setSelectTab={setSelectTab}
        />
        <MemoizedTab
          tab={"b"}
          title={"Second Title"}
          setSelectTab={setSelectTab}
        />
        <MemoizedTab
          tab={"c"}
          title={"Third Title"}
          setSelectTab={setSelectTab}
        />
      </div>
      {selectTab === "a" && <div>this is a</div>}
      {selectTab === "b" && <div>this is b</div>}
      {selectTab === "c" && <div>this is c</div>}
    </div>
  );
}

子组件

import { memo } from "react";

const MemoizedTab = memo(({ title, tab, setSelectTab }) => {
  console.log("child render");
  const handleClick = (tab) => {
    setSelectTab(tab);
  };
  return <p onClick={() => handleClick(tab)}>{title}</p>;
});

export default MemoizedTab;

在初始渲染后，父级的状态为 "a" .当我点击 "First Title"将状态设置为 "a"再次，没有按预期呈现。
当我第一次点击 "Second Title"将状态设置为 "b" ，我得到 "parent renders" 的控制台日志，正如预期的那样。但是当我点击 "Second Title"我第二次得到 "parent renders" 的控制台日志再次，即使状态没有改变。没有记录第三次或第四次点击。它总是第二个。
当我单击 "Third Title" 时会发生同样的行为将状态设置为 "c" .
为什么我的 parent 在状态转换后第二次点击时会重新渲染？
Codesandbox Link

Answer 1

React 实际上并没有重新渲染你的组件。您可以通过将 console.log 移动到 componentDidUpdate Hook 中来验证这一点。

useEffect(()=>{
   console.log('Parent re-rendered!')
})

此 console.log 不会在您第二次单击任何选项卡时被记录。
虽然您提供的示例中的 console.log 确实被打印出来，但 React 最终退出了状态更新。这实际上是 React 中的预期行为。以下摘录来自 docs :

If you update a State Hook to the same value as the current state,React will bail out without rendering the children or firing effects.(React uses the Object.is comparison algorithm.)

Note that React may still need to render that specific component againbefore bailing out. That shouldn’t be a concern because React won’tunnecessarily go “deeper” into the tree.