useEffect
-
useEffect 可以彌補函數(shù)組件沒有生命周期的缺點栅哀。我們可以在useEffect第一個參數(shù)回調(diào)函數(shù)中，做一些請求數(shù)據(jù)，事件監(jiān)聽等操作规求，第二個參數(shù)作為 dep 依賴項拂盯，當(dāng)依賴項發(fā)生變化佑女，重新執(zhí)行第一個函數(shù)。
-
useEffect 看做 componentDidMount 谈竿，componentDidUpdate 和 componentWillUnmount 這三個函數(shù)的組合团驱。
-
useEffect 執(zhí)行順序：組件更新掛載完成 => 瀏覽器 DOM 繪制完成 => 執(zhí)行 useEffect 回調(diào)。
- 在 React 更新 DOM 之后運行一些額外的代碼空凸。比如發(fā)送網(wǎng)絡(luò)請求嚎花，手動變更 DOM，記錄日志呀洲，這些都是常見的無需清除的操作贩幻。
import React, { useEffect, useState } from "react";
import './App.css';
function App() {
let [num1, setNum1] = useState(0);
let [num2, setNum2] = useState(0);
const add1 = () =>{
setNum1(num1+1);
}
const add2 = () =>{
setNum2(num2+1);
}
// 實時監(jiān)聽所有
// useEffect(()=>{
// console.log('num1', num1);
// console.log('num2', num2);
// console.log('============');
// })
// 只在初次渲染時監(jiān)聽
// useEffect(()=>{
// console.log('num1', num1);
// console.log('num2', num2);
// console.log('============');
// },[])
// 實時監(jiān)聽 num1
useEffect(()=>{
console.log('num1', num1);
console.log('num2', num2);
console.log('============');
},[num1]);
return (
<div className="App">
<h1 onClick={add1}>num1：{num1}</h1>
<h1 onClick={add2}>num2：{num2}</h1>
</div>
);
}
export default App;
-
useEffect 返一個函數(shù)用于清除事件監(jiān)聽等操作。
import React, { useEffect, useState } from "react";
import './App.css';
/* 定時器 延時器等 */
const timer = setInterval(()=>console.log('setInterval'), 1000);
/* 模擬事件監(jiān)聽處理函數(shù) */
const handleResize =()=>{
console.log('handleResize');
}
/* 事件監(jiān)聽 */
window.addEventListener('resize', handleResize);
function App() {
let [num1, setNum1] = useState(0);
const add1 = () =>{
setNum1(num1+1);
}
// num1的值變化時清除
useEffect(()=>{
return function(){
console.log('num1 值變化了');
clearInterval(timer);
window.removeEventListener('resize', handleResize);
}
}, [num1]);
return (
<div className="App">
<h1 onClick={add1}>num1：{num1}</h1>
</div>
);
}
export default App;
