React新文檔：不要濫用effect哦
作者：卡頌
簡介：《React技術揭秘》作者
來源：SegmentFault 思否社區(qū)
大家好，我卡頌。
你或你的同事在使用useEffect時有沒有發(fā)生過以下場景：
當你希望狀態(tài)a變化后發(fā)起請求，于是你使用了useEffect：
useEffect(() => { fetch(xxx);
}, [a])
這段代碼運行符合預期，上線后也沒問題。
隨著需求不斷迭代，其他地方也會修改狀態(tài)a。但是在那個需求中，并不需要狀態(tài)a改變后發(fā)起請求。
你不想動之前的代碼，又得修復這個bug，于是你增加了判斷條件：
useEffect(() => { if (xxxx) { fetch(xxx);
}
}, [a])
某一天，需求又變化了！現(xiàn)在請求還需要b字段。
這很簡單，你順手就將b作為useEffect的依賴加了進去：
useEffect(() => { if (xxxx) { fetch(xxx);
}
}, [a, b])
隨著時間推移，你逐漸發(fā)現(xiàn)：
是否發(fā)送請求與if條件相關 是否發(fā)送請求還與a、b等依賴項相關 a、b等依賴項又與很多需求相關
一些理論知識
Rendering code（渲染代碼） Event handlers（事件處理器）
function App() { const [name, update] = useState('KaSong');
return <div>Hello {name}</div>;
}
let count = 0;function App() {
count++; const [name, update] = useState('KaSong');
return <div>Hello {name}</div>;
}
處理副作用
更新input輸入框 提交表單 導航到其他頁面
function App() { const [name, update] = useState('KaSong');
const changeName = () => { update('KaKaSong');
}
return <div onClick={changeName}>Hello {name}</div>;
}
點擊按鈕，觸發(fā)狀態(tài)a變化 useEffect執(zhí)行，發(fā)送請求
點擊按鈕，在事件回調(diào)中獲取狀態(tài)a的值 在事件回調(diào)中發(fā)送請求
總結
評論
圖片
表情