useMemo和useCallback使用范例

useMemo

使用useMemo做值的缓存，缓存的是函数运行的结果，有助于性能提升。

import React, { useMemo, useState } from 'react';
const index = () => {

    const [count, setCount] = useState(1);
    const [value, setValue] = useState('c');
    const handleClickCount = () => {
        setCount((pre) => ++pre)
    };
    const handleClickValue = () => {
        setValue((pre) => pre + 'c')
    };
    const formatCount = () => {
        console.log('formatCount');
        return count + ',000';
    };
    const formatValue = useMemo(() => {
        console.log('format'); // count变化时不会执行
        return value.toLocaleUpperCase();
    }, [value]);

    return (
        <div>
            <Button onClick={handleClickCount}>改变count</Button>
            <Button onClick={handleClickValue}>改变value</Button>
            <div>
                <div>count: {formatCount()}</div>
                <div>value: {formatValue}</div>
            </div>
        </div>
    )
}

export default index

useCallback

同useMemo也可以做性能优化，但是缓存的是函数。

import React, { useCallback, useState, memo } from 'react';

const Children = (props: { formatValue }) => {
    const { formatValue} = props;
    return (<div>{formatValue()}</div>);
};

const NewChildren = memo(Children);

const index = () => {

    const [count, setCount] = useState(1);
    const [value, setValue] = useState('c');
    const handleClickCount = () => {
        setCount((pre) => ++pre)
    };
    const handleClickValue = () => {
        setValue((pre) => pre + 'c')
    };
    const formatCount = () => {
        console.log('formatCount');
        return count + ',000';
    };
    const formatValue = useCallback(() => {
        console.log('format');
        return value.toLocaleUpperCase();
    }, [value]);

    return (
        <div>
            <Button onClick={handleClickCount}>改变count</Button>
            <Button onClick={handleClickValue}>改变value</Button>
            <div>
                <div>count: {formatCount()}</div>
            </div>
            <NewChildren formatValue={formatValue}/>
        </div>
    )
}

export default index