React render props性能优化理解

举例说明：

import "./styles.css";
import React, { useCallback, useState } from "react";

const A = React.memo(({ children }) => {
  const [data, setData] = useState(0);
  console.log("render a");
  return (
    <div>
      {data}
      {children()}
      <button
        onClick={() => {
          setData(1);
        }}
      >
        button
      </button>
    </div>
  );
});

const B = React.memo(() => {
  console.log("render b");
  return <div>123</div>;
});

export default function App() {
  return (
    <div className="App">
      <A>
        {useCallback(() => {
          return <B />;
        }, [])}
      </A>
    </div>
  );
}

我之前一直认为，当A组件的button点击后，会重新打印一条‘render b’。

因为组件B是通过children这个函数调用返回的，此返回的B组件已经和初次渲染的B，不是一个组件了，所以B要re-render一次。

然后实践出真理，并没有出现‘render b’。

看来有可能react在进行diff时，是按照组件的“类型”进行diff的（例如都是B组件这个类型）， 而不是通过‘===’判断。