有人告诉我，如果父母的props发生变化，但如果父母的状态发生变化，孩子不会重新渲染。

在下面的例子中，当我点击按钮时，Child 重新渲染，这是有道理的，因为它的父级状态被触发了，但我不知道为什么 Grandchild 也会重新渲染！！它的父母的状态（孩子的状态）没有改变。

那么，这里的规则是什么？

会是什么情况：

1) 应用程序渲染但没有子和孙子渲染？

2）应用程序渲染但只有子渲染而不是孙子？

顺便说一句，我不是说如何使用 Memo 或 pureComponent，我只是想知道 React 是如何渲染嵌套子级的 :)

import React, { useState } from "react";

const App = () => {
  const [text, setText] = useState(0);
  return (
    <div style={{ padding: "50px" }}>
      <button onClick={() => setText(text + 1)}>add</button>
      {text}
      <Child />
    </div>
  );
};

const Child = () => {
  console.log("child");
  return (
    <div>
      <Grandchild />
    </div>
  );
};

const Grandchild = () => {
  console.log("Grandchild");
  return <div>:))</div>;
};

export default App;