react18中的useEffect和useLayoutEffect的原理分析

useEffect 是 React 中用于处理副作用的函数。它可以在组件渲染后执行一些额外的操作,例如发送网络请求、更新 DOM 等。

useEffect 的基本语法如下:

js 复制代码
useEffect(() => {
  // 副作用代码
}, [依赖项]);

其中,第一个参数是一个回调函数,会在组件渲染后执行;第二个参数是一个数组,表示该副作用函数所依赖的变量或状态。如果第二个参数为空数组,则该副作用函数只会在组件第一次渲染时执行一次。如果第二个参数包含某个变量或状态,则该副作用函数会在该变量或状态发生变化时重新执行。

不带依赖项的 useEffect 示例:

  • 只要组件渲染时执行一次
js 复制代码
useEffect(() => {
  // 副作用代码
});

useEffect 依赖项为空数组的示例:

  • 初始化时执行一次
js 复制代码
useEffect(() => {
  // 副作用代码
}, []);

useEffect 依赖项有值时的示例:

  • a, b, c, d 任意一个值变化时执行
js 复制代码
useEffect(() => {
  // 副作用代码
}, [a, b, c, d]);

useEffect中,我们可以使用async/await语法来处理异步操作。例如:

js 复制代码
useEffect(async () => {
  const result = await fetch("xxxxxxxxxxxxxxxxxxxxxxxxxxxx");
  const data = await result.json();
  console.log("🚀 ~ useEffect ~ data:", data);
  return () => {}; // 返回一个清理函数,否则就会报错
}, []);

因为useEffect要返回的函数是清理函数,当我们在 callback 前面加上 async,返回了一个 promise,这个时候就需要返回一个清理函数,否则会报错。

或者可以这样写

js 复制代码
const getData = async () => {
  const result = await fetch("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
  const data = await result.json();
  console.log("🚀 ~ useEffect ~ data:", data);
  return data;
};
getData();

清除函数的副作用,比如在组件卸载时清除定时器,且在里面函数里面获取的状态是上次更新的状态,不是当前最新的值,所以需要使用 useRef 保存状态

js 复制代码
useEffect(async () => {
  const [count, setCount] = useState(0);
  return () => {
    console.log(count)
}, []);

useEffect 的原理

函数组件在渲染(或更新)期间,遇到 useEffect 操作,会基于 MountEffect 方法把 callback(和依赖项)加入到 effect 链表中!

在视图渲染完毕后,基于 UpdateEffect 方法,通知链表中的方法执行!

1、按照顺序执行期间,首先会检测依赖项的值是否有更新「有容器专门记录上一次依赖项的值」;有更新则把对应的 callback 执行,没有则继续处理下一项!!

2、遇到依赖项是空数组的,则只在第一次渲染完毕时,执行相应的 callback

3、遇到没有设置依赖项的,则每一次渲染完毕时都执行相应的 callback

useLayoutEffect 的原理

其函数签名与 useEffect 相同,但它会在所有的 DOM 变更之后同步调用 effect。

可以使用它来读取 DOM 布局并同步触发重渲染。

在浏览器执行绘制之前,useLayoutEffect 内部的更新计划将被同步刷新。

尽可能使用标准的 useEffect 以避免阻塞视觉更新。

相关推荐
西西木科技丨Shopify开发机构2 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙8 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到119 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆14 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er18 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0621 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444024 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆25 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子28 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain935 分钟前
Gradle 8.11.1的升级之旅
前端