5 useMemo&&useCallback

useMemo

• 优化渲染

现象

• App每次重新执行时，render变化了，引用的render不是同一个函数

import React, { useState, } from "react";
const Foo = props => {
    return <ul>{props.render()}</ul>
}
function App() {
    const [range, setRange] = useState({ min: 0, max: 10 })
    const [count, setCount] = useState(0)
    const render = () => {
        let list = []
        for (var i = 0; i < range.max; i++) {
            list.push(<li key={i}>{i}</li>)
        }
        console.log('每次点击，App重新渲染，该render函数也会执行')
        return list
    }
    return (
        <>

            {count}<button onClick={() => setCount(count + 1)}>add</button>
            <br />
            <Foo render={render} />
        </>
    )
}
export default App

类组件pureComponent

• 属性不变，子组件不重新渲染（只会在初次渲染时执行一次）

class Foo extends PureComponent {
    render() {
        console.log('PureComponent')
        return (
            <>
                <p>{this.props.count}</p>
            </>
        )
    }
}
<Foo count={1} />

函数组件memo

const Foo = memo(props => {
    console.log('memo')
    return (
        <p>{props.count}</p>
    )
})

useCallback

• 固定的是函数

const render = useCallback(() => {
    let list = []
    for (var i = 0; i < range.max; i++) {
        list.push(<li key={i}>{i}</li>)
    }
    return list
}, [range])
// 第二个参数表依赖项，依赖变化了才会重新渲染
const Foo = memo(props => {
    console.log('useCallback')
    return (
        <>
            <p>{props.count}</p>
            <ul>{props.render()}</ul>
        </>
    )
})

useMemo

• 固定的是值，会将函数执行

const render = useMemo(() => {
    let list = []
    for (var i = 0; i < range.max; i++) {
        list.push(<li key={i}>{i}</li>)
    }
    return list
}, [range])
// 注意：子组件的render函数不需要执行
const Foo = memo(props => {
    console.log('useCallback')
    return (
        <>
            <p>{props.count}</p>
            <ul>{props.render}</ul> 
        </>
    )
})

改变range，依赖变化

<button
onClick={() => setRange({
    ...range,
    max: range.max + 1
})}>add</button>