副作用：和外部有交互

引用外部變量

調(diào)用外部函數(shù)

修改dom、全局變量

ajax

計時器（依賴window.setTimeout）

存儲相關(guān)

純函數(shù)：相同的輸入一定會得到相同的輸出
Effect Hook可以讓你在函數(shù)組件中執(zhí)行副作用操作

類組件中處理副作用

• 在componentDidMount/componentDidUpdate聲明周期中（真實dom構(gòu)建以前）

useEffect執(zhí)行時機(jī)

• 初次渲染之后 didMount（真實dom構(gòu)建以后）
• 渲染更新時 didUpdate
• 是異步的，在回調(diào)函數(shù)中拿到更新的state

存在清理函數(shù)

首次執(zhí)行： render → useEffect

再次執(zhí)行： render → 清理函數(shù) → useEffect

清理函數(shù)：組件更新、組件銷毀時執(zhí)行

組件更新

useEffect(() => {console.log('useEffect')return () => {console.log('clear Effect')} })

import { useState, useEffect } from 'react' export default function App(props) {const [count, setCount] = useState(() => {console.log(1); // 惰性初始化，只會打印一次return 1});useEffect(() => {// 持續(xù)遞增console.log('useEffect')let timer = setInterval(() => { // 2. 每一次副作用都會重新初始化一個timersetCount(count + 1)}, 1000)return () => {clearInterval(timer) // 1.閉包 第二次運(yùn)行時，先清理上一次的timerconsole.log('clear Effect')}})return (<><h1>{count}</h1></>) }

組件銷毀

import { useState, useEffect } from 'react' function Test() {const [count, setCount] = useState(1);useEffect(() => {console.log('useEffect')return () => {console.log('clear Effect') // 組件更新、銷毀時執(zhí)行}})return (<><h1>{count}</h1><button onClick={() => setCount(count + 1)}>add</button></>) } export default function App() {const [show, setShow] = useState(true)return (<>{show && <Test />}<button onClick={() => setShow(!show)}>changeShow</button></>) }

只在didMount時執(zhí)行

依賴項

• 指定當(dāng)前effect函數(shù)所需要的依賴項
• 若依賴項是[]，在初次渲染和卸載的時候執(zhí)行
• 若依賴項不變，effect不執(zhí)行
• 存在依賴項 && 依賴項更新時，effect執(zhí)行

import { useState, useEffect } from 'react' function Test() {const [count, setCount] = useState(1);useEffect(() => {console.log('useEffect')let timer = setInterval(() => { // didMount時執(zhí)行一次// setCount(count + 1) // 若在依賴項中未填入count，則此時count拿到的一直是0！// 但填入count依賴不能解決“只在didMount時執(zhí)行”的問題// 改成回調(diào)的方式，能獲取最新的countsetCount(count => count + 1)}, 1000)return () => {clearInterval(timer) // 組件銷毀時執(zhí)行，didMount時不執(zhí)行console.log('clear Effect')}}, []) // 增加了依賴項return (<><h1>{count}</h1><button onClick={() => setCount(count + 1)}>add</button></>) } export default function App() {const [show, setShow] = useState(true)return (<>{show && <Test />}<button onClick={() => setShow(!show)}>changeShow</button></>) }

競態(tài)問題

• 接口返回的時長不同，后返回的覆蓋了之前的數(shù)據(jù)，導(dǎo)致沒有渲染正確的結(jié)果

現(xiàn)象：結(jié)果3覆蓋了4

import { useState, useEffect } from 'react' const API = {async queryEmployeesByid(id) {return new Promise((resolve) => {setTimeout(() => {resolve({id,currentDepartment: `currentDepartment:${id}`})}, 300 * (10 - id))// id越大，返回越快，模擬后發(fā)的請求比先發(fā)的請求快})} } const Department = props => {let { id } = props;let [employees, setEmployees] = useState({})useEffect(() => {let didCancel = false; // 解決競態(tài)問題(async function fetchData() {let employee = await API.queryEmployeesByid(id)// 解決競態(tài)問題，最后一次點的時候先true再false，拿到對應(yīng)id的請求結(jié)果if (!didCancel) {setEmployees(employee)}})()return () => { // 解決競態(tài)問題didCancel = true}}, [id])return (<>{employees.currentDepartment}</>) } const App = params => {let [id, setId] = useState(1)return (<><p>id:{id}</p><Department id={id} /><br /><button onClick={() => setId(id + 1)}>id++</button></>) } export default App 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的2 Effect Hook的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。