react——useMemo——useCallback——性能优化——React.memo

Posted 2022-10-28 勇敢*牛牛

useMemo缓存计算结果值

记忆组件，可以理解为计算属性(它是类组件中的memoizeOne组件是一样的，只不过，useMemo是内置功能，无需安装) 性能优化

---

useMemo它可以对于【数值】进行缓存，如果你的依赖项没有发生改变，则下一次调用时，读取上一次的缓存，从而提升性能。

---

使用的方法：

• 将计算函数放入useMemo，作为参数一，缓存计算结果
• 如果useMemo参数2为一个空数据，则它只会执行一次，后续它所计算的变量的值发生的改变，它也不会重新计算，因为它没有依赖
• 如果参数2中的数组为多个元素，则其中任意一个元素发生了改变，则它都会重新计算一次

import React,  useMemo, useState  from 'react'
const App = () => 
    const [num1, setNum1] = useState(1)
    const [num2, setNum2] = useState(2)
    const sum = () => 
        console.log('fn')/* 买菜 */
        return num1 + num2
    
    const sum1 = useMemo(() => 
        console.log('useMemo')
        return num1 + num2
      , [num1, num2])
    
    return (
        <div>
            <h1>执行三次</h1>
            <div>sum()</div>
            <div>sum()</div>
            <div>sum()</div>
            <hr />
            <h3>useMemo计算出来的数值</h3>
            <div>sum1</div>
            <div>sum1</div>
            <div>sum1</div>

            <button onClick=() => setNum1(v => v + 1)>修改num1值</button>
      		<button onClick=() => setNum2(v => v + 1)>修改num2值</button>
        </div>
    );


export default App;

useCallback 它是用来缓存函数的

如果给 子组件一个方法，用来修改父组件的数据。那么每执行一次，父组件就会重新赋值一次方法给 子组件。子组件也就要重新渲染。

import React,  useCallback, useState, useEffect  from 'react'
const Child = ( addCount ) => 
    useEffect(() => 
        console.log('更新了 addCount')
    , [addCount])

    return (
        <div>
            <h3>Child组件</h3>
            <button
                onClick=() => 
                    addCount(1)
                
            >
                修改count值 -- Child组件
            </button>
        </div>
    )


const App = () => 
    const [count, setCount] = useState(100)

	在没有缓存此函数时，App组件重新执行后，它会再次赋值一次
    const addCount = n => 
        console.log('addcount')
        setCount(v => v + n)
    
    return (
        <div>
            <h3>App -- count</h3>
            <Child addCount=addCount />
        </div>
    )

export default App

useCallback来缓存函数

import React,  useCallback, useState, useEffect  from 'react'
import _ from 'lodash'
// useCallback 它是用来缓存函数的
const Child = ( addCount ) => 
    useEffect(() => 
        console.log('更新了 addCount')
    , [addCount])

    return (
        <div>
            <h3>Child组件</h3>
            <button
                onClick=() => 
                    addCount(1)
                
            >
                修改count值 -- Child组件
            </button>
        </div>
    )


const App = () => 
    const [count, setCount] = useState(100)
    const addCount = useCallback(n => 
        setCount(v => v + n)
      , [])
    return (
        <div>
            <h3>App -- count</h3>
            <Child addCount=addCount />
        </div>
    )

export default App

React.memo

React.memo顶层Api方法，它可以用来减少子组件的重复渲染次数，从而提升组件渲染性能.

• React.memo它是一个只能在函数组件中使用的顶层Api方法
• shouldComponentUpdate它必须要有一个返回值，true则表示继续渲染，false停止渲染
• React.memo参数2返回值如果为true则表示停止渲染，false继续渲染

prevProps 旧的props数据   object
nextProps 新的props数据   object
可以比较两者的不同，来决定是否重新渲染
参数2写的回调函数，一般情况下都在props传过来的数据为引用类型，才需要手动来判断，如果是基本类型则不需要写参数2，来手动判断。

import React,  useState, memo  from 'react'
import _ from 'lodash'
const Child = memo(
    ( count ) => 
        console.log('child')
        return (
            <div>
                <h3>child组件 -- count.n</h3>
            </div>
        )
    ,
    (prevProps, nextProps) => _.isEqual(prevProps, nextProps)
)
const App = () => 
    let [count, setCount] = useState( n: 100 )
    let [name, setName] = useState('张三')

    return (
        <div>
            <h3>App -- count.n</h3>
            <input type="text" value=name onChange=e => setName(e.target.value) />
            <button
                onClick=() => 
                    setCount( n: Date.now() )
                
            >
                ++++
            </button>
            <Child count=count />
        </div>
    )


export default App