优维低代码UseProviderHook

　　优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。
　　连载第三十九期
　　《高级指引：UseProviderHook》
　　useProviderHook可调用FlowApi生成的后台API接口，需要在ReactFunctionalComponents中使用。
　　基本用法
　　Hook运行在onMountcomponentDidMount时。最后一个参数〔〕意味着它将运行onMount，如果您将变量传递给它〔someVariable〕，它会在更改值onMount时再次运行。importReactfromreact；import｛useProvider｝fromnextcorebrickkit；functionTodos（）｛useProviderhook参数，args是provider的参数。constoptions｛args：〔TESTCHILD，｛page：1，pagesize：10｝，｛interceptorParams：｛ignoreLoadingBar：true｝｝，〕，｝；最后一个参数〔〕意思是在onMount生命周期调用。const｛loading，error，data〔〕，｝useProvider（easyops。api。cmdb。instanceSearchTotal：1。2。0，options，〔〕）；return（｛errorError！｝｛loadingLoading。。。｝｛data。map（（todo）（｛todo。name｝））｝）；｝
　　手动调用importReactfromreact；import｛useProvider｝fromnextcorebrickkit；functionTodos（）｛constoptions｛args：〔TESTCHILD，｛page：1，pagesize：10｝〕，｝；constrequestuseProvider（easyops。api。cmdb。instanceSearchTotal：1。2。0）；constaddTodo（）｛调用API。request。query（〔TESTCHILD，｛page：1，pagesize：10｝〕）；｝；return（buttononClick｛addTodo｝AddTodobutton｛errorError！｝｛request。loadingLoading。。。｝｛request。data。map（（todo）（｛todo。name｝））｝）；｝OrimportReactfromreact；import｛useProvider｝fromnextcorebrickkit；functionTodos（）｛constrequestuseProvider（）；constaddTodo（）｛调用API。request。query（easyops。api。cmdb。instanceSearchTotal：1。2。0，〔TESTCHILD，｛page：1，pagesize：10｝，〕）；｝；return（buttononClick｛addTodo｝AddTodobutton｛request。errorError！｝｛request。loadingLoading。。。｝｛request。data。map（（todo）（｛todo。name｝））｝）；｝
　　SuspenseModeimportReact，｛Suspense｝fromreact；import｛useProvider｝fromnextcorebrickkit；functionTodos（）｛constoptions｛args：〔TESTCHILD，｛page：1，pagesize：10｝〕，使用suspense。suspense：true，｝；const｛data：todos〔〕｝useProvider（easyops。api。cmdb。instanceSearchTotal：1。2。0，options，〔〕）；return（｛todos。map（（todo）（｛todo。name｝））｝）；｝constApp（）（Suspensefallbackloading。。。TodosSuspense）；
　　分页importReact，｛Suspense｝fromreact；import｛useProvider｝fromnextcorebrickkit；constTodos（）｛const〔page，setPage〕useState（1）；const｛data，loading｝useProvider（easyops。api。cmdb。instanceSearchTotal：1。2。0，｛args：〔TESTCHILD，｛page：page，pagesize：10｝，｛interceptorParams：｛ignoreLoadingBar：true｝｝，〕，transform：（currTodos，newTodos）〔。。。currTodos，。。。newTodos〕，添加新的todosdata：〔〕，｝，〔page〕）；当onMount和page更新时触发return（ul｛data。map（（todo）（likey｛todo。id｝｛todo。title｝li））｝｛loadingLoading。。。｝｛！loading（buttononClick｛（）setPage（page1）｝LoadMoreTodosbutton）｝ul）；｝；constApp（）（Todos）；
　　参数解构数组解构const〔request，response，loading，error〕useProvider（easyops。api。cmdb。instanceSearchTotal：1。2。0）；对象解构const｛request，response，loading，error，data，query｝useProvider（easyops。api。cmdb。instanceSearchTotal：1。2。0）；const｛loading，error，data，query｝request；ProviderOptionsconst｛设置loading为false。loading：false，当发生错误时调用。onError：（error）（｛｝），合并list数据或者返回某个字段的数据newData。someObject。transform：（currData，newData）（〔。。。currData，。。。newData〕），开启ReactSuspense模式。suspense：false，设置默认data。data：〔〕，provider参数。args：〔〕，解构的http参数。。。。HttpOptions｝options；