React性能优化memo+useMemo+useCallback

定义子组件​​Son.jsx​​

export default () => {
    return (
        <div>子组件{Math.random()}</div>
    )
}

定义父组件组件​​Father.jsx​​

import { useState } from "react"
import Son from "@/components/Son.jsx"
export default () => {
    const [count, setCount] = useState(0)
    return (
        <div>
            父组件 <button onClick={() => setCount(count + 1)}>数字加-</button>{count}
            <p>----------------------------</p>
            <Son />
        </div>
    )
}

memo

父组件页面变化就会导致子组件的也会跟着改变

可以使用​​memo​​防止子组件改变

import { memo } from "react"
export default memo(() => {
    return (
        <div>子组件{Math.random()}</div>
    )
})

useMemo

但是如果父组件给子组件传递有状态的值时，子组件又会触发更新

import { useState } from "react"
import Son from "@/components/Son.jsx"
export default () => {
    const [count, setCount] = useState(0)
    const [num, setNum] = useState(0)
    return (
        <div>
            父组件
            <br />
            <button onClick={() => setCount(count + 1)}>数字加-</button>{count}
            <br />
            <button onClick={() => setNum(num + 1)}>传给子组件的值加-</button>
            <p>----------------------------</p>
            <Son value={{ num: num, value: "其它参数" }} />
            <p>----------------------------</p>
        </div>
    )
}

import { memo } from "react"
export default memo((props) => {
    const { num, value } = props.value
    return (
        <div>
            子组件{Math.random()}
            <p>父组件的值：{num}---{value}</p>
        </div>
    )
})

​​count​​​没有传给子组件，但是子组件却跟着改变，可以使用​​useMemo​​优化

<Son value={useMemo(() => ({ num: num, value: "其它参数" }), [num])} />

useCallback

如果我要传递个函数给子组件，发现子组件还是跟着更新了

import { useState, useMemo } from "react"
import Son from "@/components/Son.jsx"
export default () => {
    const [count, setCount] = useState(0)
    const [num, setNum] = useState(0)

    return (
        <div>
            父组件
            <br />
            <button onClick={() => setCount(count + 1)}>数字加-</button>{count}
            <br />
            <button onClick={() => setNum(num + 1)}>传给子组件的值加-</button>
            <p>----------------------------</p>
            <Son onClickSon={() => alert(111)} value={useMemo(() => ({ num: num, value: "其它参数" }), [num])} />
            <p>----------------------------</p>
        </div>
    )
}

import { memo } from "react"
export default memo((props) => {
    const { num, value } = props.value
    const { onClickSon } = props
    return (
        <div>
            子组件{Math.random()}
            <p>父组件的值：{num}---{value}</p>
            <button onClick={onClickSon}>子组件点击</button>
        </div>
    )
})

使用​​useCallback​​优化

<Son onClickSon={useCallback(() => alert(111), [])} 
 value={useMemo(() => ({ num: num, value: "其它参数" }), [num])} />

​​useCallback​​​可以看做是​​useMemo​​​的语法糖
也可以用​​​useMemo​​写

<Son onClickSon={useMemo(() => () => alert(111), [])} 
  value={useMemo(() => ({ num: num, value: "其它参数" }), [num])} />

总结

​​memo​​​使用在没有值和函数传递的子组件
​​​useMemo​​​使用在传递值的子组件
​​​useCallback​​​使用在传递函数的子组件
全部代码

import { useState, useMemo, useCallback } from "react"
import Son from "@/components/Son.jsx"
export default () => {
    const [count, setCount] = useState(0)
    const [num, setNum] = useState(0)

    return (
        <div>
            父组件
            <br />
            <button onClick={() => setCount(count + 1)}>数字加-</button>{count}
            <br />
            <button onClick={() => setNum(num + 1)}>传给子组件的值加-</button>
            <p>----------------------------</p>
            <Son onClickSon={useCallback(() => alert(111), [])} value={useMemo(() => ({ num: num, value: "其它参数" }), [num])} />
            <p>----------------------------</p>
        </div>
    )
}

import { memo } from "react"
export default memo((props) => {
    const { num, value } = props.value
    const { onClickSon } = props
    return (
        <div>
            子组件{Math.random()}
            <p>父组件的值：{num}---{value}</p>
            <button onClick={onClickSon}>子组件点击</button>
        </div>
    )
})