低代码可以简单的看作是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
需满足的条件:
- 所有值的获取自动变为异步,
- 使用上为同步-组件开发无感知