Question

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

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的父级）将重新呈现。 但是嵌套组件还会渲染吗？（尽管没有从父组件通过嵌套组件传递参数或props值）。

Answer 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(){
      ...
   }
}

嵌套组件如何渲染？

1 个答案: