子组件重复渲染问题

场景

在一个react组件中， 有几个子组件， 当我点击其中一个子组件时，不希望另外的子组件重新渲染

const Child1 = (props) => {
    const { onClick } = props;
    return <Button onClick={onClick}>点击</Button>;
};
const Child2 = React.memo(() => {
    console.log('Child2');
    return <div>Child2</div>;
});

const Demo = () => {
    const [count, setCount] = useState(0);
    const Header = () => {
        return (
            <>
                <Child2 />
                <Child1 onClick={() => setCount(count + 1)} />
            </>
        );
    };
    return (
        <div>
            <Header />
            count： {count}
        </div>
    );
};

上述代码中触发Child1点击事件， 会引起Child2的重新渲染，咋一看，代码好像没什么问题，为什么重复渲染呢？你知道其中的原因吗？

分析

React.memo

Child2组件包裹了React.memo， 理论上是不会重新渲染的

最简单应用

const Demo = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <Child2 />
            <Child1 onClick={() => setCount(count + 1)} />
            count： {count}
        </div>
    );
};

验证发现，Child2没有触发重新渲染， 问题应该是在Header组件上了。

分析一下结构， Demo组件里，定义了Header组件， Header组件可以共享头部的公用变量和方法了，看似简单了， 其实埋下了隐患

组件里定义了组件，那么造成后组件里的Reat.memo失效， 重新组织一下

解决

重新梳理组件结构

const Child1 = (props) => {
    const { onClick } = props;
    return <Button onClick={onClick}>点击</Button>;
};
const Child2 = () => {
    console.log('Child2');
    return <div>Child2</div>;
};
const Header = (props) => {
    const { onClick } = props;
    return (
        <>
            <Child2 />
            <Child1 onClick={onClick} />
        </>
    );
};
const Memo = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <Header onClick={() => setCount(count + 1)} />
            count： {count}
        </div>
    );
};

总结

• 组件内部可以调用其他组件
• 组件内部避免新创建子组件e