有人告诉我，如果父母的道具发生变化，但父母的状态发生变化，孩子不会重新渲染。
在下面的情况下，当我单击按钮“子重新渲染”时，这是有意义的，因为触发了其父级的状态，但我不知道为什么孙子也会重新渲染！它的父级状态（子级状态）没有改变。
那么，这里的规则是什么？
会出现什么情况：
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;
简而言之 - SFC（无状态功能组件）如果父级重新渲染，则始终会重新渲染。
改变你的状态App成分原因Child重新渲染。与Grandchild，因为它是父级（Child）已重新渲染。
However，如果你愿意转型Child进入一个类并使用React.PureComponent，它不会重新渲染，因为没有传入任何道具（没有更改道具或状态）。Grandchild也不会重新渲染。
PureComponent进行浅层道具比较，这将避免过度的重新渲染。
顺便一提 -“我被告知，如果父级的 props 改变，但父级的 STATE 改变，子级不会重新渲染。”- 这不是真的。即使父组件的状态发生变化，也可以避免子组件的重新渲染。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
