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

53 阅读 0 评论 35 点赞

我是靠谱客的博主明亮海燕，最近开发中收集的这篇文章主要介绍React 页面加载前的请求方式 useLayoutEffect useEffect，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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