react底代码平台-异步状态的思考&处理

56 阅读1分钟

低代码可以简单的看作是N组件的自由组合,组件数据来自于后端,必定是个异步的过程。往往会遇到如下几种情况

场景

有一个input-1组件,初始值绑定一个数据源(后端数据)的一个字段。

处理方法1:

因为绑定了一个数据源字段,强制加一个loading,loading结束,开始render组件 情况1: 有另外一个组件input-20 的值绑定input-1,需绑定一个loading值,如果绑定了多个需要loading的组件,这里处理起来比较麻烦, 最后如果需要动态绑定,也是个让人头疼的处理过程

处理方法2:

不处理,默认值给undefined,loading结束后给值。 - 情况1: 值会产生多次变动,显示不是很友好。 - 情况2: 默认值的处理是一个昂贵的操作

function A({defaultValue}:{defaultValue:string}){
    useEffect(()=>{
        // defaultValue todo
    },[])
    // [] 这里没去监听defaultValue的变动 或者 初始化试一次昂贵的操作
}

处理方法3:

方法1的升级版本,采用react特性Suspense

需满足的条件:

  • 所有值的获取自动变为异步,
  • 使用上为同步-组件开发无感知

jotai.org/