parrent重新渲染但它的孩子不会的情况是什么？

Question

有人告诉我，如果父母的道具改变了，孩子们不会重新渲染，但如果父母的状态改变了。

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;

Answer 1

简而言之，SFC（无状态功能组件）总是在父级重新呈现时重新呈现。

更改应用程序组件中的状态会导致子重新呈现。孙子也是如此，因为它的父级(子级)已经重新呈现。

但是，如果将子转换为类并使用react.purecomponent，则不会重新呈现，因为没有传入prop（没有更改prop或state）。孙子也不会重新呈现。

PureComponent进行浅层道具比较，这将避免过度的重新呈现。

顺便说一句--“有人告诉我，如果父母的道具改变了，孩子们不会重新渲染，但如果父母的状态改变了。”-那不是真的。即使父组件的状态发生变化，也可以避免子组件的重新呈现。