Как вложенный компонент становится рендерингом?

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;

Здесь, когда я нажимаю кнопку на представлении домашней страницы, обновляется переменная состояния «value» & ContainerComponent (родительский элемент NestedComponent) станет повторным рендерингом. Но вложенный компонент также рендерится? (Хотя нет никакого параметра или значения реквизита, переданного через вложенный компонент от его родителя.)

Answer 1

Привет экспортируйте ваш NestedComponent, используя React.memo, тогда он не будет отображаться при изменении какого-либо состояния в 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(){
      ...
   }
}