React useCallback使用教程
開始之前請注意這句話：任何優(yōu)化都會增加復(fù)雜性，任何過早添加的優(yōu)化都會帶來風(fēng)險，因為優(yōu)化后的代碼可能會多次更改
useEffect
相關(guān)作用：監(jiān)聽 & 初始化
//最簡單用法
useEffect(() => {
//只有方法體，相當(dāng)于componentDidMount和componentDidUpdate中的代碼
document.title = count;
})
//加返回值用法
useEffect(() => {
//添加監(jiān)聽事件，相當(dāng)于componentDidMount和componentDidUpdate中的代碼
window.addEventListener('resize', onChange, false);
//返回的函數(shù)用于解綁事件，相當(dāng)于componentWillUnmount中的代碼
return () => {
window.removeEventListener('resize', onChange, false)
}
})
//加空數(shù)組參數(shù)用法
useEffect(() => {
// 相當(dāng)于 componentDidMount
window.addEventListener('resize', onChange, false)
return () => {
// 相當(dāng)于 componentWillUnmount
window.removeEventListener('resize', onChange, false)
}
}, []);
//加監(jiān)聽值用法
useEffect(() => {
//只有當(dāng)count的值發(fā)生變化，此函數(shù)才會執(zhí)行
console.log(`count change: count is ${count}`)
}, [ count ]);
useCallback
先看一個最簡單的例子：
// 用于記錄 getData 調(diào)用次數(shù)
let count = 0;
function App() {
const [val, setVal] = useState("");
function getData() {
setTimeout(()=>{
setVal('new data '+count);
count++;
}, 500)
}
useEffect(()=>{
getData();
}, []);
return (
<div>{val}</div>
);}
getData模擬發(fā)起網(wǎng)絡(luò)請求。在這種場景下，沒有useCallback什么事，組件本身是高內(nèi)聚的。
如果涉及到組件通訊，情況就不一樣了：
// 用于記錄 getData 調(diào)用次數(shù)
let count = 0;
function App() {
const [val, setVal] = useState("");
function getData() {
setTimeout(() => {
setVal("new data " + count);
count++;
}, 500);
}
return <Child val={val} getData={getData} />;}function Child({val, getData}) {
useEffect(() => {
getData();
}, [getData]);
return <div>{val}</div>;}
就這么輕輕松松，一個死循環(huán)就誕生了…
先來分析下這段代碼的用意，Child組件是一個純展示型組件，其業(yè)務(wù)邏輯都是通過外部傳進(jìn)來的，這種場景在實際開發(fā)中很常見。
再分析下代碼的執(zhí)行過程：
- App渲染Child，將val和getData傳進(jìn)去
- Child使用useEffect獲取數(shù)據(jù)。因為對getData有依賴，于是將其加入依賴列表
- getData執(zhí)行時，調(diào)用setVal，導(dǎo)致App重新渲染
- App重新渲染時生成新的getData方法，傳給Child
- Child發(fā)現(xiàn)getData的引用變了，又會執(zhí)行g(shù)etData
- 3 -> 5 是一個死循環(huán)
如果明確getData只會執(zhí)行一次，最簡單的方式當(dāng)然是將其從依賴列表中刪除。但如果裝了 hook 的lint 插件，會提示：React Hook useEffect has a missing dependency
useEffect(() => {
getData();}, []);
實際情況很可能是當(dāng)getData改變的時候，是需要重新獲取數(shù)據(jù)的。這時就需要通過useCallback來將引用固定住：
const getData = useCallback(() => {
setTimeout(() => {
setVal("new data " + count);
count++;
}, 500);}, []);
上面例子中g(shù)etData的引用永遠(yuǎn)不會變，因為他它的依賴列表是空?？梢愿鶕?jù)實際情況將依賴加進(jìn)去，就能確保依賴不變的情況下，函數(shù)的引用保持不變。
還有一個要注意的是
在開始監(jiān)聽一個鼠標(biāo)的移動的時候，想要刪除這個監(jiān)聽不生效，由于是, 加入useState導(dǎo)致組件再次渲染 handleMouse 函數(shù)在次渲染, handleMouse 作為組件內(nèi)的方法, 會跟著一同再次渲染, 并且在內(nèi)存里, 再次渲染出的 clickFunc !== 前clickFunc.
所以removeEventListener無法解除綁定, 再次addEventListener則會綁定一個新方法.
document.addEventListener('mousemove',handleMouse,true)解決方案 : useCallback 緩存改方法 這時候的 document.removeEventListener(‘mousemove’,handleMouse,true) 中的handleMouse 和添加中的方法就是一個了，就能刪除了。
onst handleMouse= useCallback(() => {
//xxxx
console.log("clicking");
}, []);
到此這篇關(guān)于React useCallback使用教程的文章就介紹到這了,更多相關(guān)React useCallback內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天我們來學(xué)習(xí)React是如何構(gòu)建起一個單頁應(yīng)用的，React作為目前最流行的前端框架之一，其受歡迎程度不容小覷，從這門框架上我們可以學(xué)到許多其他前端框架所缺失的東西，也是其創(chuàng)新性所在的地方，比如虛擬DOM、JSX等。下面一起來看看。2016-08-08
這篇文章主要為大家介紹了基于antd的autocomplete的二次封裝查詢示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
React項目動態(tài)設(shè)置title標(biāo)題的方法示例
這篇文章主要介紹了React項目動態(tài)設(shè)置title標(biāo)題的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了探究react-native 源碼的圖片緩存問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
React Native 使用Fetch發(fā)送網(wǎng)絡(luò)請求的示例代碼
本篇文章主要介紹了React Native 使用Fetch發(fā)送網(wǎng)絡(luò)請求的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
React學(xué)習(xí)之JSX與react事件實例分析
這篇文章主要介紹了React學(xué)習(xí)之JSX與react事件,結(jié)合實例形式分析了React中JSX表達(dá)式、屬性、嵌套與react事件相關(guān)使用技巧,需要的朋友可以參考下2020-01-01
這篇文章主要為大家介紹了React?之?Suspense提出的背景及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了在React項目中使用Eslint代碼檢查工具及常見問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
react項目打包后點擊index.html頁面出現(xiàn)空白的問題
這篇文章主要介紹了react項目打包后點擊index.html頁面出現(xiàn)空白的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
在React項目中使用iframe嵌入一個網(wǎng)站的步驟
本文介紹了如何在React項目中通過iframe嵌入百度網(wǎng)站的步驟,首先創(chuàng)建一個Baidu.js組件,并在該組件中設(shè)置iframe來加載百度,然后在App.js中引入并使用Baidu組件,還討論了因安全策略可能無法加載某些網(wǎng)站的問題,需要的朋友可以參考下2024-09-09