React child перерисовывает каждый раз, когда родительский отрисовывает

Question

Как я показал ниже, рендеринг дочерних элементов реагирует каждый раз, когда рендерит родительский. Почему это так? Также, как я могу избежать этого, чтобы ребёнок рендерился только тогда, когда изменились плюсы.

import React, {useEffect, useState} from 'react';

function App() {
  return (
    <div>
        <Main></Main>
    </div>
  );
}

export default App;

function Main() {
    const [count, updateFlag] = useState(0);

    function onButtonClick(newCount) {
        updateFlag(newCount);
    }

    return (
        <div>
            <button onClick={()=>onButtonClick(count + 1)}>Main Button {count}</button>
            <Sub>ds</Sub>
        </div>
    );
}

function Sub() {
    useEffect(() => {
       console.log('useEffect called');
    });
    return(
        <div>This is sub</div>
    );
}

Answer 1

Виртуальный DOM, реализованный в React, работает таким образом. При обновлении родительского элемента также обновляются все дочерние элементы

. Можно предотвратить повторный рендеринг дочерних элементов, если для них не изменяются реквизиты, используя React.memo для функциональных компонентов и путем расширения *. 1006 * для компонентов класса. Вы также можете реализовать пользовательский метод shouldComponentUpdate в компоненте класса для более детального управления

. Переход на приведенный ниже код для компонента Sub не приведет к его повторной визуализации, если родительский элемент обновлен. Это потому, что ему не передаются реквизиты и, следовательно, для этого компонента ничего не меняется. Если реквизиты пройдены, React.memo выполняет поверхностное сравнение, прежде чем принять решение о запуске рендера. Вы также можете передать второй параметр в React.memo для точного управления

const Sub = React.memo(() {
    useEffect(() => {
       console.log('useEffect called');
    });
    return(
        <div>This is sub</div>
    );
})