Question

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

在以下情况下，当我单击按钮时，“子项重新渲染”（触发其父级的状态）是有道理的，但我不知道为什么孙子孙女也要重新渲染！父母的状态（孩子的状态）没有变化。

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

情况如何：

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;

Answer 1

简而言之-如果父项重新渲染，SFC（无状态功能组件）始终会重新渲染。

更改App组件中的状态会导致Child重新呈现。与Grandchild相同，因为它的父（Child）已重新渲染。

但是，如果您将Child转换为一个类并使用React.PureComponent，它将不会重新渲染，因为没有传递任何道具（没有道具或状态更改）。 Grandchild都不会重新渲染。

PureComponent进行了简短的道具比较，可以避免过度渲染。

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

父母将其重新渲染，但孩子将不会重新渲染怎么办？

1 个答案: