Question

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

const Test = () => {
    const [ count, setCount ] = useState(0);

    return (
        <div>
            <button onClick={() => setCount(count + 1)}>Count up!</button>
            <ChildComponent />
        </div>
    )
}

const ChildComponent = () => {
    useEffect(() => {
        console.log('render!');
        return () => console.log('unmounted...');
    });

    return (
        <div>children</div>
    )
};


export default Test;

按“向上计数”。按钮。日志已输出。

unmounted...
render!

ChildComponent保持不变。但是再次渲染。

为什么？以及如何防止重新渲染？

谢谢。

Answer 1

之所以重新渲染，是因为它嵌套在一个要重新渲染的组件中，以防止使用React.memo（）来嵌套嵌套的组件

const Test = () => {
    const [ count, setCount ] = useState(0);

    return (
        <div>
            <button onClick={() => setCount(count + 1)}>Count up! {count} </button>
            <ChildComponent />
        </div>
    )
}

const ChildComponent = React.memo(() => {
    useEffect(() => {
        console.log('render!');
        return () => console.log('unmounted...');
    });

    return (
        <div>children</div>
    )
});


export default Test;

您可以了解有关memo

的更多信息

Answer 2

由于父状态已更新，因此整个组件将被重新渲染，包括其子组件，无论其子组件是否更改或不变。您可以使用React.memo()来阻止重新渲染组件。 useCallback和useMemo也可以用来记忆。

在此处查看更多信息：How to memoize in React。

不变，但重新渲染

2 个答案: