React中useMemo、useCallback的具體使用
useMemo
useMemo
用于 緩存 計算結(jié)果，避免不必要的重新計算。它返回一個記憶化的值，僅在 依賴項變化時重新計算，否則會返回上次計算的結(jié)果。這樣可以有效減少昂貴的計算或渲染。
語法：
let xxx = useMemo(callback,[dependencies])
- 第一次渲染組件的時候，
callback會執(zhí)行 - 后期只有依賴的狀態(tài)值發(fā)生改變，
callback才會再執(zhí)行 - 每一次會把callback執(zhí)行的返回結(jié)果賦值給xxx
useMemo具備“計算緩存”，在依賴的狀態(tài)值沒有發(fā)生改變，callback沒有觸發(fā)執(zhí)行的時候，xxx獲取的是上一次計算出來的結(jié)果- 和Vue中的計算屬性非常的類似??！
使用
const Demo = function Demo() {
console.log("渲染")
let [supNum, setSupNum] = useState(10),
[oppNum, setOppNum] = useState(5),
[x, setX] = useState(0);
let ratio = useMemo(() => {
console.log(useMemo,'useMemo')
let total = supNum + oppNum,
ratio = '--';
if (total > 0) ratio = (supNum / total * 100).toFixed(2) + '%';
return ratio;
}, [supNum, oppNum]);
return <div className="vote-box">
<div className="main">
<p>支持人數(shù)：{supNum}人</p>
<p>反對人數(shù)：{oppNum}人</p>
<p>支持比率：{ratio}</p>
<p>x:{x}</p>
</div>
<div className="footer">
<Button type="primary" onClick={() => setSupNum(supNum + 1)}>支持</Button>
<Button type="primary" danger onClick={() => setOppNum(oppNum + 1)}>反對</Button>
<Button onClick={() => setX(x + 1)}>干點別的事</Button>
</div>
</div>;
};
初始渲染，打印如下：
點擊新增，打印如下：
點擊干點別的事，打印如下：
注意事項
useMemo 不會提高性能的使用頻率，它只是優(yōu)化那些需要高開銷計算的場景。如果計算本身就很輕量化，使用 useMemo 反而可能帶來額外的性能開銷。
useMemo 不會阻止組件重新渲染，它只是在渲染過程中緩存某些計算值。
useCallback
useCallback 用于 緩存函數(shù)，避免函數(shù)在每次渲染時都被重新創(chuàng)建。它返回一個記憶化的回調(diào)函數(shù)，只有當依賴項變化時，才會重新創(chuàng)建該函數(shù)。雖然減少了堆內(nèi)存的開辟，但是useCallback本身也有自己的處理邏輯和緩存機制，這個也消耗時間。
語法
const xxx = useCallback(callback,[dependencies])
- 組件第一次渲染，
useCallback執(zhí)行，創(chuàng)建一個函數(shù)“callback”，賦值給xxx - 組件后續(xù)每一次更新，判斷依賴的狀態(tài)值是否改變，如果改變，則重新創(chuàng)建新的函數(shù)堆，賦值給
xxx；但是如果，依賴的狀態(tài)沒有更新「或者沒有設置依賴“[]”」則xxx獲取的一直是第一次創(chuàng)建的函數(shù)堆，不會創(chuàng)建新的函數(shù)出來！！ - 或者說，基于
useCallback，可以始終獲取第一次創(chuàng)建函數(shù)的堆內(nèi)存地址(或者說函數(shù)的引用)
適用場景
useCallback主要用于優(yōu)化傳遞給子組件的函數(shù)，避免每次父組件重新渲染時，子組件因為接受到新的函數(shù)引用而重新渲染。
父組件更新時，傳遞給子組件的屬性僅僅是一個函數(shù)「特點：基本應該算不變的」，不再讓子組件也跟著更新。
1、傳遞給子組件的屬性（函數(shù)），每一次需要是相同的堆內(nèi)存地址（是一致的），基于useCallback處理。
2、在子組件內(nèi)部也要做一個處理，驗證父組件傳遞的屬性是否發(fā)生改變，如果沒有變化，則讓子組件不能更新，有變化才需要更新。子組件需要判斷傳遞過來的屬性有沒有變化，此時
- 類組件可以使用
React.PureComponent即可「在shouldComponentUpdate中對新老屬性做了淺比較」 - 函數(shù)組件可以使用
React.memo函數(shù)，對新老傳遞的屬性做比較，如果不一致，才會把函數(shù)組件執(zhí)行，如果一致，則不讓子組件更新。
使用
父組件
const Demo = function Demo() {
let [x, setX] = useState(0);
// const handle = () => { }; //第一次:0x001 第二次:0x101 第三次:0x201 ...
const handle = useCallback(() => { }, []); //第一次:0x001 第二次:0x001 第三次:0x001 ...
return <div className="vote-box">
<Child handle={handle} />
<div className="main">
<p>{x}</p>
</div>
<div className="footer">
<Button type="primary" onClick={() => setX(x + 1)}>累加</Button>
</div>
</div>;
};
子組件為類組件
class Child extends React.PureComponent {
render() {
console.log('Child Render');
return <div>
我是子組件
</div>;
}
}
子組件為函數(shù)組件
const Child = React.memo(function Child(props) {
console.log('Child Render');
return <div>
我是子組件
</div>;
});
useCallback 對性能的優(yōu)化主要體現(xiàn)在避免子組件不必要的重新渲染，尤其是在子組件是 React.memo 或 shouldComponentUpdate 進行優(yōu)化時。
到此這篇關(guān)于React中useMemo、useCallback的具體使用的文章就介紹到這了,更多相關(guān)React useMemo useCallback內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 源碼分析React中useCallback和useMemo
- React中useMemo和useCallback的使用小結(jié)
- 詳解React中的useMemo和useCallback的區(qū)別
- React中useCallback useMemo使用方法快速精通
- React中useCallback useMemo到底該怎么用
- 解析React中useMemo與useCallback的區(qū)別
- react性能優(yōu)化useMemo與useCallback使用對比詳解
- react組件memo useMemo useCallback使用區(qū)別示例
- React useMemo和useCallback的使用場景
- React中useMemo 和 useCallback 的區(qū)別小結(jié)
相關(guān)文章
React.js組件實現(xiàn)拖拽排序組件功能過程解析
這篇文章主要介紹了React.js組件實現(xiàn)拖拽排序組件功能過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了React Hooks如何主動更新Hooks組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家詳細介紹了react中的axios模塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
今天我們來學習React是如何構(gòu)建起一個單頁應用的，React作為目前最流行的前端框架之一，其受歡迎程度不容小覷，從這門框架上我們可以學到許多其他前端框架所缺失的東西，也是其創(chuàng)新性所在的地方，比如虛擬DOM、JSX等。下面一起來看看。2016-08-08
這篇文章給大家總結(jié)了React中常用的一些鉤子函數(shù),文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了React精髓！一篇全概括小結(jié)(急速)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家介紹了react-native只保留3x圖原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
react項目中redux的調(diào)試工具不起作用的解決
這篇文章主要介紹了react項目中redux的調(diào)試工具不起作用的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了React操作DOM之forwardRef問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
React核心就在于虛擬DOM，也就是在React中不總是直接操作頁面真實的DOM元素，并且結(jié)合Diffing算法，可以做到最小化頁面重繪，有些時候不可避免的我們需要一種方法可以操作我們定義的元素標簽，并作出對應的修改。在React中提供了一種訪問DOM節(jié)點的方式，也就是這里的refs2022-11-11