嵌套组件是如何渲染的？答案

【问题标题】：How a Nested Component become render?嵌套组件是如何渲染的？
【发布时间】：2020-08-01 06:14:42
【问题描述】：

让我们创建一个在包含嵌套组件的页面中使用的组件。例如 -

containerComponent.tsx

import NestedComponent from '../components/nestedComponent';

const ContainerComponent = () => {
  const { value, setValue} = useState(0);

  return (
      <>
        <h1>This is the Nested Component</h1>
        <NestedComponent />
        <button onClick={()=>setValue(value+1)}>
          {{ value }} time Updated
        </button>
      </>
  );
};

export default ContainerComponent;

这里我们使用 index.tsx 中的父组件如下 -

index.tsx

import ContainerComponent from '../components/containerComponent';

const Home = ()=> {
  return (
      <div>
        <ContainerComponent />
      </div>
  );
};

export default Home;

在这里，当我从主页视图中单击按钮时，“值”状态变量会更新，并且 ContainerComponent（NestedComponent 的父级）会重新渲染。 但是嵌套组件是否也渲染？（虽然没有从它的父组件通过嵌套组件传递参数或道具值。）

【问题讨论】：

功能组件总是重新渲染子组件。
你可以选择使用React.memo()来减少不必要的重新渲染
为什么基于类的组件不@DrewReese？
基于类的组件具有生命周期功能，例如 shouldcomponentupdate 可以提供帮助。功能组件没有任何生命周期功能。一个近似的类比是useEffect 钩子，它可以大致等同于componentDidMount、componentDidUpdate 和componentWillUnmount。如果您阅读有关 React.memo 的链接，您会发现它“类似于 React.PureComponent，但用于函数组件而不是类”。

标签： reactjs vue.js nested components rendering

【解决方案1】：

您好，使用 React.memo 导出您的 NestedComponent，然后当 ContainerComponent 中的任何状态发生更改时，它将不会被渲染。这是针对功能组件的。

这里是代码

import React, {useState} from "react";

const NestedComponent = () => {
    const {value, setValue, errors} = useState(0);
    console.log('child');
    return (
        <div>
            ContainerComponent
        </div>
    );
};

export default React.memo(NestedComponent);

对于类组件，你应该从 React.PureComponent 扩展你的类，而不是像 React.Component 那样......

class NestedComponent extends React.PureComponent{
   render(){
      ...
   }
}

【讨论】：

基于类的组件有什么用？ @卡比尔
@YadabSd，对于类组件，你应该从 React.PureComponent 扩展你的类，而不是像 React.Component 那样...... class MyComponent extends React.PureComponent