React性能优化：子组件多次渲染问题解决（useMeno)

针对函数组件背景：父组件中包含多个组件，当父组件更新时，子组件都会重新渲染一边，有时子组件的渲染是不必要，比如当子组件的接收的props都不曾改变的时候，便不必重新渲染。示例：没有进行优化前Read/index.jsx父组件import React, { useState, useCallback, useMemo } from 'react';import List from './compo

HaanLen

5133人浏览 · 2022-04-14 23:36:10

HaanLen · 2022-04-14 23:36:10 发布

针对函数组件

背景：
父组件中包含多个组件，当父组件更新时，子组件都会重新渲染一边，有时子组件的渲染是不必要，比如当子组件的接收的props都不曾改变的时候，便不必重新渲染。

示例：没有进行优化前

Read/index.jsx父组件

import React, { useState, useCallback, useMemo } from 'react';
import List from './components/List';
import Card from './components/Card';
import './index.scss';

export default function Read(pros) {
    console.log('redner-read');

    const [list1, setList1] = useState(0);
    const [card1, setCard1] = useState(0);

    const cardGetCount1 = (value) => {
        setCard1(value)
    }
    const listGetCount1 = (value) => {
        setList1(value)
    }
    return (
        <>
            <div className='top_READ'>
                <h2> Read</h2>
                <List
                    value1={list1}
                    listGetCount1={listGetCount1}
                />
                <Card
                    value1={card1}
                    cardGetCount1={cardGetCount1}
                />
            </div>
        </>
    )
}

List/index.jsx子组件

import React, { useState, useCallback } from 'react';
import Button from '../../../../components/Button';

export default function List(props) {
    const {
        value1 = 0,
        listGetCount1,
    } = props;
    console.log('List', props);
    const [count1, setCount1] = useState(value1);

    const handleCount1 = () => {
        setCount1(count1 + 1)
        listGetCount1(count1 + 1)
    }
    return (
        <>
            <ul>
                <li>
                    <Button type="primary" onClick={handleCount1}>
                        Listchange1
                    </Button>
                </li>
            </ul>
        </>
    )
}

Card/index.jsx子组件

import React, { useState, useCallback } from 'react';
import Button from '../../../../components/Button';

export default function Card(props) {
    const {
        value1 = 0,
        cardGetCount1
    } = props;
    console.log('Card', props);
    const [count1, setCount1] = useState(value1);


    const handleCount1 = () => {
        setCount1(count1 + 1)
        cardGetCount1(count1 + 1)
    }

    return (
        <>
            <ul>
                <li>
                    <Button type="primary" onClick={handleCount1}>
                        Cardchange1
                    </Button>
                </li>
            </ul>
        </>
    )
}

在这里插入图片描述

示例：使用useMemo后

List/index.jsx子组件

import React, { useState, useCallback } from 'react';
import Button from '../../../../components/Button';

export default function List(props) {
    const {
        value1 = 0,
        listGetCount1,
    } = props;
    console.log('List', props);

    const [count1, setCount1] = useState(value1);
    const handleCount1 = () => {
        setCount1(count1 + 1)
        listGetCount1(count1 + 1)
    }

    return (
        <>

            <ul>
                <li>
                    <Button type="primary" onClick={handleCount1}>
                        Listchange1
                    </Button>
                </li>
            </ul>
        </>
    )
}

Card/index.jsx子组件

import React, { useState, useCallback } from 'react';
import Button from '../../../../components/Button';

export default function Card(props) {
    const {
        value1 = 0,
        cardGetCount1
    } = props;
    console.log('Card', props);
    const [count1, setCount1] = useState(value1);

    const handleCount1 = () => {
        setCount1(count1 + 1)
        cardGetCount1(count1 + 1)
    }


    return (
        <>
            <ul>
                <li>
                    <Button type="primary" onClick={handleCount1}>
                        Cardchange1
                    </Button>
                </li>
            </ul>
        </>
    )
}

Read/index.jsx父组件

import React, { useState, useCallback, useMemo } from 'react';
import List from './components/List';
import Card from './components/Card';
import './index.scss';

export default function Read(pros) {
    console.log('redner-read');

    const [list1, setList1] = useState(0);
    const [card1, setCard1] = useState(0);

    const cardGetCount1 = (value) => {
        setCard1(value)
    }
    const listGetCount1 = (value) => {
        setList1(value)
    }
    return (
        <>

            <div className='top_READ'>
                <h2> Read</h2>
                {
                    useMemo(() => {
                        return (
                            <>
                                <List
                                    value1={list1}
                                    listGetCount1={listGetCount1}
                                />
                            </>
                        )
                    }, [list1])
                }
                <br />
                {
                    useMemo(() => {
                        return (
                            <>
                                <Card
                                    value1={card1}
                                    cardGetCount1={cardGetCount1}

                                />

                            </>
                        )
                    }, [card1])
                }

            </div>
        </>
    )
}