• 技术文章 >开发工具 >composer

    大佬封装React Context Composer的详细步骤(分享)

    藏色散人藏色散人2021-12-20 13:57:25转载350
    本文由composer教程栏目给大家介绍大佬是如何一步步封装一个React Context Composer,希望对需要的朋友有所帮助!

    我是如何一步步封装一个React Context Composer?

    动机

    React的状态管理方案有很多,比如Redux、Mobx、Recoil等,目前我只体验过Redux,觉得还是比较笨重一点。因为平时写Hooks比较多,所以我比较倾向于使用Context Provider配合useContext这个hook来做,这样也易于状态的拆分与组合。这里,我们不讨论各家状态管理方案的优劣,将目光聚焦于在使用Context时遇到的一个多层嵌套的问题。

    下图,是我最近在写的一个taro + react hooks + ts项目抽离出来的一些代码。我对一些全局状态进行了拆分(拆分的目的是为了减少不必要的重新渲染),然后再把它们嵌套起来。这种写法让我回想起了曾经被回调地狱支配的感觉,很难受。因此,我想到了自己去封一个高阶组件,从写法上把结构“扁平化”。

    <LoadingContext.Provider value={{ loading, setLoading }}>
      <UserDataContext.Provider value={{ name: "ascodelife", age: 25 }}>
        <ThemeContext.Provider value={"light"}>
        {/* ....more Providers as long as you want */}
        </ThemeContext.Provider>
      </UserDataContext.Provider>
    </LoadingContext.Provider>

    最易得的方案

    这里,我很快的就写出了第一种方案,借助reduceRight去完成Provider的嵌套。

    这里用reduceRight而不用reduce的原因是,我们更加习惯从外层到内层的书写顺序。

    // ContextComposer.tsx
    import React from 'react';
    type IContextComposerProps = {
      contexts: { context: React.Context<any>; value: any }[];
    };
    const ContextComposer: React.FC<IContextComposerProps> = ({ contexts, children }) => {
      return (
        <>
          {contexts.reduceRight((child, parent) => {
            const { context, value } = parent;
            return <context.Provider value={value}>{child}</context.Provider>;
          }, children)}
        </>
      );
    };
    export default ContextComposer;
    // App.tsx
    <ContextComposer
      contexts={[
        { context: ThemeContext, value: "light" },
        { context: UserDataContext, value: { name: "ascodelife", age: 25 } },
        { context: LoadingContext, value: { loading, setLoading } },
      ]}>
        { children }
    </ContextComposer>

    实际体验后发现,虽然说能用是能用,但是开发体验差那么一点。它的问题在于,组件入参时传的value是any类型,这就意味着放弃了ts的静态类型检查。在传参时,由于不会对value做静态类型检查,敲起代码来不仅不会有任何代码提示,也有可能造成一些比较低级的运行时错误。差评!

    基于React.cloneElement()的改造方案

    为了改造上面的这种方案,我翻到了一个比较冷门但好用的函数—— React.cloneElement()。这个函数没有很多需要值得注意的点,主要看一眼它的三个入参,第一个是parent element,第二个是parent props,第三个是剩余参数...children,除第一个参数外,其他都是可选值。

    举个例子:

    <!-- 调用函数 -->
    React.cloneElement(<div/>,{},<span/>);
    <!-- 相当于创建了这样一个结构 -->
    <div> 
        <span></span>
    </div>

    那么下面开始改造,reduceRight的架子不动,改一下入参的类型和reduceRight的回调。

    // ContextComposer.tsx
    import React from 'react';
    type IContextComposerProps = {
      contexts: React.ReactElement[];
    };
    const ContextComposer: React.FC<IContextComposerProps> = ({ contexts, children }) => {
      return (
        <>
          {contexts.reduceRight((child, parent) => {
            return React.cloneElement(parent,{},child);
          }, children)}
        </>
      );
    };
    export default ContextComposer;
    // App.tsx
    <ContextComposer
      contexts={[
          <ThemeContext.Provider value={"light"} />,
          <UserDataContext.Provider value={{ name: "ascodelife", age: 25 }} />,
          <LoadingContext.Provider value={{ loading, setLoading }} />,
      ]}>
        { children }
    </ContextComposer>

    经过改造后,我们在传参时就好像是真的在创建一个组件(当然实际上也创建了组件,只是这个组件本身没有被渲染到虚拟Dom上,实际渲染上去的是被克隆后的副本)。同时,我们刚才关注的value的静态类型检查问题也得到了解决。

    tips: React.cloneElement(parent,{},child)等价于React.cloneElement(parent,{children:child}),你知道为什么吗?

    相关资源

    源码已经同步到了github(https://github.com/ascodelife/react-context-provider-composer)。

    同时也打包到了npm仓库中(https://www.npmjs.com/package/@ascodelife/react-context-provider-composer),欢迎体验。

    以上就是大佬封装React Context Composer的详细步骤(分享)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:juejin,如有侵犯,请联系admin@php.cn删除
    专题推荐:React Context Composer
    上一篇:解决php Composer出现SSL报错问题 下一篇:Windows/Linux下Composer的安装与使用(详解)
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• linux下怎么安装composer并改源• composer install一直失败是什么情况?• 分析composer怎么做到仅仅更新自动加载?• 解决php Composer出现SSL报错问题
    1/1

    PHP中文网