useEffect
-
useEffect 可以弥补函数组件没有生命周期的缺点。我们可以在useEffect第一个参数回调函数中，做一些请求数据，事件监听等操作，第二个参数作为 dep 依赖项，当依赖项发生变化，重新执行第一个函数。
-
useEffect 看做 componentDidMount ，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
-
useEffect 执行顺序：组件更新挂载完成 => 浏览器 DOM 绘制完成 => 执行 useEffect 回调。
- 在 React 更新 DOM 之后运行一些额外的代码。比如发送网络请求，手动变更 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);
}
// 实时监听所有
// useEffect(()=>{
// console.log('num1', num1);
// console.log('num2', num2);
// console.log('============');
// })
// 只在初次渲染时监听
// useEffect(()=>{
// console.log('num1', num1);
// console.log('num2', num2);
// console.log('============');
// },[])
// 实时监听 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 返一个函数用于清除事件监听等操作。
import React, { useEffect, useState } from "react";
import './App.css';
/* 定时器 延时器等 */
const timer = setInterval(()=>console.log('setInterval'), 1000);
/* 模拟事件监听处理函数 */
const handleResize =()=>{
console.log('handleResize');
}
/* 事件监听 */
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;
