React中Fetch请求loading状态实现的思考

wordpress大概用了一年,也折腾了好些时候,但是发现了问题的所在:
1. 太笨重了,不得不说功能是很强大,插件、主题应有尽有,但是后台管理系统的复杂程度,不太适合仅仅做一个用于博客的网站
2. 作为一个前端,唯一能修改的就是页面样式,php的代码一窍不通

所以最近着手在自己开发一个基于Nodejs的服务端和React的后台管理系统,做这个系统的时候,引出了我关于交互体验——loading的思考

Loading状态我觉得在后台管理系统中尤为重要,后台管理系统通常都是与数据打交道,CRUD,每次请求后如果页面没有任何的请求反馈,那可能都不知道到底有没有发出请求

在React中,如果使用dva或者直接就用ant design pro,那么基于dva的数据流管理会自带一个loading状态,无论是全局,页面级,甚至只是一个effect请求,都会有相对于的Loading状态,这一点实在是非常方便,局限性就是,你只能用dva

比如class component中,如果想在组件中保存一个loading的state,由于setState是异步的,那么很可能代码就是如下

    ...
    this.setState({loading:true },()=>{
        // fetch
        fetch.then(()=>{
            this.setState({loading:false})
        })
  });
    ...

实际上我并没有试过不把请求写在setState的callback里,因为setState是异步的,如果不写在callback里也许会出现和预期不一样的问题,也可能并没有什么问题~

这是在class component中的写法,但是hooks的出世,很少写class了,不是说class不好用,实在是hooks太方便,某些情况下我认为class还是很方便的,比如可以this可以存数据,不像hooks必须用ref.current
在hooks里的问题就是,useState并没有callback,所以只能写成

    ...
    setLoading(true);
    await fetch...
    setLoading(false)
    ...

或者是用Promise把useState改造一下,预想中useState都没有callback,那resovle也不知道放在哪里执行,但是实际上可以达到效果的,可能是异步顺序执行的原因

但是每一个组件里,可能有多个loading的状态,管理起来是十分麻烦,命名也不好想

因为dva loading只能用dva,但是我之前学习的graphql,客户端用的apollo client,它提供了查询的React组件,每一个查询组件可以对应一个自己的loading,查询结果会通过render props的方式传递给children组件,着实好用,但是我觉得性能上也许不是最佳,因为观察组件发现会有额外的执行次数

我想象中,如果通过组件的方式,把loading状态传给子组件,把请求方法写在组件里,通过render props再传给子组件调用,感觉还是不错的,但是其中有一个很致命的问题,就是多个请求的情况,会发生多个请求组件嵌套的情况,这时候不仅是jsx看上去不美观,而且命名问题也会存在

    ...
    <Query cb={fetch}>
    {
        (loading1,fn1)=>(
        <Spin loading={loadng} onClick={fn1}>
            <Query cb={fetch}>
            {
                (loading2,fn2)=>(
                <Spin lading={loadng} onClick={fn2}>
                    // 除去嵌套问题,loading和fn重名,eslint会报错
                </Spin>)
            }
            </Query>
        </Spin>)
    }
    </Query>
    ...

另外一个想法就是通过hooks来实现,传入一个方法到自定的hooks,传出一个loading和包装过的方法,感觉这个方法会更加实用一点,不过还没有想好怎么写

所以想完发现dva loading才真的很好用,佩服云谦大佬,我现在的程度还根本没法想出是如何实现的

这两天想做一个纯粹的极客,把电脑装成了Manjaro,折腾了好久,过两天再写个记录,hackintosh太复杂,我的nuc8i7好像还得换网卡,驱动也没有,所以还是努力工作,mac mini yes吧~

最近家里事真的好烦,哎,可与人言无一二,越长大越觉得伯牙子期之神奇了,可能是我本身也不愿意和别人交流吧

Leave a Reply

Your email address will not be published. Required fields are marked *