相同點: 這兩個hook一般作為性能優化的時候使用,useMemo 計算結果是 return 回來的值, 主要用于 緩存計算結果的值 ，應用場景如： 需要 計算的狀態 相當于vue中的計算屬性, 只有依賴的值發生變化,計算屬性才會重新計算

　　import React, { useEffect, useState, useMemo } from 'react';

　　import axios from 'axios';

　　const Test = () => {

　　const [keyword, setKeywordFn] = useState('')

　　const [collegeArr, setCollegeFn] = useState([])

　　const [count, setCount] = useState(0)

　　useEffect(() => {

　　//console.log('數據請求');

　　axios.get('https://api.i-lynn.cn/college').then(res => {

　　console.log('res', res);

　　setCollegeFn(res.data.data.list1)

　　})

　　}, [])

　　// 方式1: 當點擊count++ 時, 因為函數組件的數據變化了,函數組件重新執行,則重新執行函數組件中的所有的 代碼,那么getCollegelist 該值就會重新賦值.

　　// const getCollegelist = collegeArr.filter((item) => {

　　// console.log('代碼執行1');

　　// return item.school_name.includes(keyword)

　　// })

　　// console.log(getCollegelist);

　　// 方式2: 當點擊count++,getCollegelist的值不會重新賦值,因為只有依賴的keyword或collegeArr發生 變化, 該箭頭函數才會重新執行,并賦值

　　const getCollegelist = useMemo(() => collegeArr.filter((item) => {

　　console.log('代碼執行2');

　　return item.school_name.includes(keyword)

　　}), [keyword, collegeArr])

　　// console.log(getCollegelist);

　　return (

    <div>
            <p onClick={() => setCount(count + 1)}>count:{count}</p>
            <hr />
            <input value={keyword} onChange={(e) => {
                setKeywordFn(e.target.value)
            }} />
            <ul>
                {
                    getCollegelist.map((item) => {
                        return <li key={item.id}>{item.school_name}</li>
                    })
                }
            </ul>
        </div>
    );
}

export default Test;

　　useCallback 計算結果是 函數, 主要用于 緩存函數，應用場景如: 需要緩存的函數，因為函數式組件每次任何一個 state 的變化 整個組件 都會被重新刷新，一些函數是沒有必要被重新創建的，此時就應該緩存起來，提高性能，和減少資源浪費。

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

　　const Test2 = () => {

　　const [inpvalue, setinpvalue] = useState('');

　　const [userList, setUserList] = useState(['張三', '李四']);

　　const [useinfo, setUserinfo] = useState({ name: "小明", age: 10 });

　　// 情況1: 當不使用useCallback情況下, 當修改useinfo對象中的年齡的時候, 函數組件重新執行, 這樣導致

　　// addUser 函數重新被創建賦值, 消耗瀏覽器性能

　　// const addUser = () => {

　　// console.log('執行了', inpvalue);

　　// userList.push(inpvalue);

　　// // console.log(userList);

　　// setUserList([...userList])

　　// }

　　// 情況2: 當使用 useCallback 的時候, 會將當前useCallback中的參數如下的箭頭函數緩存起來, 這樣,

　　// 不會發生當函數組件中的數據被修改時, 函數組件代碼重新執行時, 里面的addUser 函數會被重新創建,

　　// 默認如果依賴值為空,也就是 useCallback 中的第二個參數為空數組,則會導致永遠都賦值的為初始函數,函數沒有被重新創建,導致添加不了用戶, 可以將數組的依賴項值賦值為輸入框中的變量,這樣當輸入框中的值改變時,才重新創建函數賦值,優化性能

　　const addUser = useCallback(() => {

　　userList.push(inpvalue)

　　// console.log(userList);

　　setUserList([...userList])

　　}, [inpvalue])

　　console.log('執行了');

　　return (

     <div>
            我是test2組件
            <p onClick={() => {
                setUserinfo({
                    ...useinfo,
                    age: useinfo.age + 1
                })
            }}>{useinfo.name}--{useinfo.age}</p>
            <hr />
            <p>
                <input value={inpvalue} onChange={
                    (e) => setinpvalue(e.target.value)
                } />
                <button onClick={addUser}>添加</button>
            </p>
            <hr />
            <ul>
                {
                    userList.map((item, index) => <li key={index}>{item}</li>)
                }
            </ul>

        </div>
    );
}

　　export default Test2;

　　總結: useMemo和useCallback都會在組件第一次渲染的時候執行，之后會在其依賴的變量發生改變時再次執行;并且這兩個hooks都可以實現數據緩存，useMemo返回緩存的變量(重新計算的值)，useCallback緩存的是函數。

上一篇

JS之元素獲取方法

下一篇

react生命周期16版本刪除了什么鉤子函數?