React 页面加载前的请求方式 useLayoutEffect useEffect

最新推荐文章于 2025-08-27 09:20:22 发布

原创最新推荐文章于 2025-08-27 09:20:22 发布 · 2.6k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

runrun117

关注

标签

#react.js #javascript #前端

分类前端开发

前端同时被 2 个专栏收录

66 篇文章

订阅专栏

react

2 篇文章

订阅专栏

本文探讨了useLayoutEffect与useEffect的区别，前者在DOM更新后同步执行，适合布局调整，而后者异步操作避免阻塞视觉更新。讲解了何时使用layoutEffect以及在其中处理网络请求的注意事项，包括避免async/await。

useLayoutEffect其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前， useLayoutEffect 内部的更新计划将被同步刷新，尽可能使用标准的 useEffect 以避免阻塞视觉更新。

简单来讲，就是：useEffect是异步的，useLayoutEffect是同步的，异(同)步是相对于浏览器执行刷新屏幕Task来说的。

useLayoutEffect 可以请求的参数是对页面进行合理化配置的，必须获取到参数后，才能加载页面

useEffect 请求的参数可以是一些隐藏的不影响第一屏页面展示的参数

在这两个方法中，不能在参数里使用异步方法，也就是async/await

如果你对async/await熟悉的话，你会知道，每个async函数都会默认返回一个隐式的promise。但是，useEffect不应该返回任何内容。这就是为什么会在控制台日志中看到以下警告：

Warning: useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => …) are not supported, but you can call an async function inside an effect

不建议在useEffect中使用asynv

一方面可以使用这样的网络请求请求

getRootNode(null, 1).then((res) => {
    if (res !== null) {
        setTreeData(res)
    }
});

2、可以使用

const fetchDataGetRootNode = async () => {
    const res1 = await getRootNode(null, 1).then((res) => {
        if (res !== null) {
            setTreeData(res)
        }
    });
};
fetchDataGetRootNode().then(r => {});

3、

const fetchDataGetRootNode = async () => {
   const info = await queryAllLoginNum();
if(result.code === '00'){
    setAllLoginNum(info.data);
}
};
fetchDataGetRootNode().then(r => {});

useEffect使用指南_大灰狼的小绵羊哥哥的博客-CSDN博客_useeffect