每次父渲染时，React子渲染都会重新渲染

Question

正如我在下面展示的，react子渲染每次它的父渲染时都会渲染。这是为什么，这是一个问题吗？另外，我怎样才能避免它，以致于只有当它的优点改变时，子对象才会重新渲染。

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

React中实现的虚拟DOM就是这样工作的。当父元素更新时，所有子元素也会更新

如果属性没有改变，您可以防止子元素重新呈现，对功能组件使用React.memo，并对类组件扩展PureComponent。您还可以在类组件中实现自定义shouldComponentUpdate方法，以实现更细粒度的控制

如果父组件更新，则更改为子组件的以下代码将不会重新呈现它。这是因为没有任何道具被传递给它，因此这个组件没有任何变化。如果传递了道具，则在决定触发渲染之前，React.memo会执行浅层比较。您还可以将第二个参数传递给React.memo以进行细粒度控制

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