Skip to content

十、React.memo阻止渲染

React组件会在两种情况下发生重新渲染。第一种,当组件自身的state发生变化时。第二种,当组件的父组件重新渲染时。

第二种情况看起来没那么必要,要是父组件数据根本影响不到子组件,那么父组件重新渲染,子组件就没必要重新渲染

所以,在特定情况阻止子组件重新渲染

使用:

​ 对子组件进行包装

js
const zizujian = () => {
    console.log('B渲染');
    return (
        <div>
            <h2>子组件</h2>
        </div>
    );
};
export default React.memo(zizujian);

当一个组件的父组件发生重新渲染,而子组件的props没有发生变化时,它会直接将缓存中的组件渲染结果返回而不是再次触发子组件的重新渲染,这样一来就大大的降低了子组件重新渲染的次数