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方法，以实现更细粒度的控制

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

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

每当父级渲染时，React子级重新渲染

1 个答案: