React.memo基础使用

基础使用:

React组件默认的渲染机制:只要父组件重新渲染子组件就会重新渲染
作用:允许组件在Props没有改变的情况下跳过渲染
说明:经过memo函数包裹生成的缓存组件只有在props发生变化的时候才会重新渲染

备注:只使用memo的场景是只涉及到父传子,如果涉及到子传父那么要使用useCallback进行性能优化



代码如下所示:

import { memo, useState } from 'react';

// memo进行缓存, 只要props发生变化的时候才会重新渲染(没有考虑context)
const MemoSon = memo(function Son() {
    console.log('我是子组件,我重新渲染了');
    return <div>Son</div>;
})

function Layout() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <button onClick={() => setCount(count + 1)}>count: {count}</button>
            <MemoSon />
        </div>
    )
}

export default Layout;

React.memo - props的比较机制

机制:在使用memo缓存组件之后, React会对每一个prop使用Object.is比较新值和老值,返回true,表示没有变化

prop是简单类型(基本数据类型)
Object.is(3, 3) ==> true 没有变化

prop是引用数据类型(对象/数组)
Object([], []) => false 有变化,React只关心引用是否变化



代码如下:
1. 基本数据类型演示:

import { memo, useState } from 'react';

// 1. 传递一个简单类型prop prop变化时组件重新渲染
const MemoSon = memo(function Son({count}) {
    console.log('我是子组件,我重新渲染了');
    return <div>Son --- {count}</div>;
})

function Layout() {
    const [count, setCount] = useState(0);
    const num = 100;

    return (
        <div>
            {/* 点击时prop发生变化,所以会触发Son重新渲染 */}
            <button onClick={() => setCount(count + 1)}>count: {count}</button>
            {/* 使用count时,点击时prop发生变化,所以会触发Son重新渲染, 使用num时,prop没发生变化不会重新渲染 */}
            <MemoSon count={count} />
        </div>
    )
}

export default Layout;




2. 引用数据类型演示

import { memo, useState } from 'react';

// 当父组件的函数重新执行时,实际上形成的是新的数组引用,所以重新渲染了
const MemoSon = memo(function Son({ list }) {
    console.log('我是子组件,我重新渲染了');
    return <div>Son --- {list}</div>;
})

function Layout() {
    const [count, setCount] = useState(0);
    const list = [1, 3, 5];

    return (
        <div>
            {/* 点击时虽然prop没变化,但由于当父组件的函数重新执行时,实际上形成的是新的数组引用,所以重新渲染了 */}
            <button onClick={() => setCount(count + 1)}>count: {count}</button>
            <MemoSon list={list} />
        </div>
    )
}

export default Layout;


3. 如果非要使用引用数据类型,也可以使用useMemo性能优化,代码如下:

import { memo, useMemo, useState } from 'react';

// 保证引用稳定 -> useMemo 组件渲染的过程中缓存一个值
const MemoSon = memo(function Son({ list }) {
    console.log('我是子组件,我重新渲染了');
    return <div>Son --- {list}</div>;
})

function Layout() {
    const [count, setCount] = useState(0);

    const list = useMemo(() => {
        return [1, 3, 5]
    }, [])

    return (
        <div>
            {/* 点击时虽然prop没变化,但由于当父组件的函数重新执行时,实际上形成的是新的数组引用,所以重新渲染了 */}
            <button onClick={() => setCount(count + 1)}>count: {count}</button>
            <MemoSon list={list} />
        </div>
    )
}

export default Layout;

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值