1.useEffect
import React, { useState, useEffect } from "react";
import { Button } from 'antd';
import './Demo.less';
/*
useEffect：在函数组件中，使用生命周期函数
useEffect(callback)：没设置依赖
+ 第一次渲染完毕后，执行callback，等价于 componentDidMount
+ 在组件每一次更新完毕后，也会执行callback，等价于 componentDidUpdate
useEffect(callback,[])：设置了，但是无依赖
+ 只有第一次渲染完毕后，才会执行callback，每一次视图更新完毕后，callback不再执行
+ 类似于 componentDidMount
useEffect(callback,[依赖的状态(多个状态)])：
+ 第一次渲染完毕会执行callback
+ 当依赖的状态值(或者多个依赖状态中的一个)发生改变，也会触发callback执行
+ 但是依赖的状态如果没有变化，在组件更新的时候，callback是不会执行的
useEffect(()=>{
return ()=>{
// 返回的小函数，会在组件释放的时候执行
// 如果组件更新，会把上一次返回的小函数执行「可以“理解为”上一次渲染的组件释放了」
};
});
*/
const Demo = function Demo() {
let [num, setNum] = useState(0),
[x, setX] = useState(100);
useEffect(() => {
// 获取最新的状态值
console.log('@1', num);
});
useEffect(() => {
console.log('@2', num);
}, []);
useEffect(() => {
console.log('@3', num);
}, [num]);
useEffect(() => {
return () => {
// 获取的是上一次的状态值
console.log('@4', num);
};
}); // 这里传[num]和不传都一样
const handle = () => {
setNum(num + 1);
};
return <div className="demo">
<span className="num">{num}</span>
<Button type="primary"
size="small"
onClick={handle}>
新增
</Button>
</div>;
};
export default Demo;执行原理
2.useEffect和useLayoutEffect的细节
①不能把useEffect放在条件判断中，可以把条件判断放在useEffect的回调函数中
②useEffect的回调函数要么不返回值，要么只能返回一个函数
③经过async修饰之后，即使不写返回，默认返回Promise实例
import React, { useState, useEffect } from "react";
import { Button } from 'antd';
import './Demo.less';
// 模拟从服务器异步获取数据
const queryData = () => {
return new Promise(resolve => {
setTimeout(() => {
resolve([10, 20, 30]);
}, 1000);
});
};
const Demo = function Demo() {
let [num, setNum] = useState(0);
/* // useEffect必须在函数的最外层上下文中调用，不能把其嵌入到条件判断、循环等操作语句中
if (num > 5) {
useEffect(() => {
console.log('OK');
});
} */
useEffect(() => {
if (num > 5) {
console.log('OK');
}
}, [num]);
// 第一次渲染完毕后，从服务器异步获取数据
/* // useEffect如果设置返回值，则返回值必须是一个函数「代表组件销毁时触发」;下面案例中，callback经过async的修饰，返回的是一个promise实例，不符合要求！！
useEffect(async () => {
let data = await queryData();
console.log('成功：', data);
}, []); */
/* useEffect(() => {
queryData()
.then(data => {
console.log('成功：', data);
});
}, []); */
useEffect(() => {
const next = async () => {
let data = await queryData();
console.log('成功：', data);
};
next();
}, []);
const handle = () => {
setNum(num + 1);
};
return <div className="demo">
<span className="num">{num}</span>
<Button type="primary"
size="small"
onClick={handle}>
新增
</Button>
</div>;
};
export default Demo;3.useEffect与useLayoutEffect的区别
useLayoutEffect先于useEffect
两者都可以获取dom，
import React, { useState, useEffect, useLayoutEffect } from "react";
import { Button } from 'antd';
import './Demo.less';
const Demo = function Demo() {
// console.log('RENDER');
let [num, setNum] = useState(0);
/* useLayoutEffect(() => {
if (num === 0) {
setNum(10);
}
}, [num]); */
/*
useLayoutEffect会阻塞浏览器渲染真实DOM，优先执行Effect链表中的callback；
useEffect不会阻塞浏览器渲染真实DOM，在渲染真实DOM的同时，去执行Effect链表中的callback；
+ useLayoutEffect设置的callback要优先于useEffect去执行！！
+ 在两者设置的callback中，依然可以获取DOM元素「原因：真实DOM对象已经创建了，区别只是浏览器是否渲染」
+ 如果在callback函数中又修改了状态值「视图又要更新」
+ useEffect:浏览器肯定是把第一次的真实已经绘制了，再去渲染第二次真实DOM
+ useLayoutEffect:浏览器是把两次真实DOM的渲染，合并在一起渲染的
视图更新的步骤：
第一步：基于babel-preset-react-app把JSX编译为createElement格式
第二步：把createElement执行，创建出virtualDOM
第三步：基于root.render方法把virtualDOM变为真实DOM对象「DOM-DIFF」
useLayoutEffect阻塞第四步操作，先去执行Effect链表中的方法「同步操作」
useEffect第四步操作和Effect链表中的方法执行，是同时进行的「异步操作」
第四步：浏览器渲染和绘制真实DOM对象
*/
useLayoutEffect(() => {
console.log('useLayoutEffect'); //第一个输出
}, [num]);
useEffect(() => {
console.log('useEffect'); //第二个输出
}, [num]);
return <div className="demo"
style={{
backgroundColor: num === 0 ? 'red' : 'green'
}}>
<span className="num">{num}</span>
<Button type="primary" size="small"
onClick={() => {
setNum(0);
}}>
新增
</Button>
</div>;
};
export default Demo;