乐趣区

关于react.js:React-根据状态动态化功能的一些思考

吾辈的博客原文在:https://blog.rxliuli.com/p/12…,欢送来玩!

场景

之前吾辈也在 SF 上询问过 相似的问题。

目前在理论业务中遇到了两种状况

  1. 程序的性能在分发给不同组织应用的时候有所差别,即不同的组织都会存在一些定制化的性能。
    最常见的差别例如

    • 表单的字段存在差别
    • 列表展现的字段与相干操作有所不同
  2. 组件内的代码在某个权限下才会执行,然而又依赖于组件内的一些状态,如何将这些代码宰割到不同的中央(例如不同的文件)便于之后的保护。

    • 一些按钮在指定权限下存在
    • 一些数据在指定权限下展现

计划

  • 应用动静配置渲染不同的页面(可序列化的配置)
  • 依据状态匹配不同的动静组件
  • 应用 hooks 封装不同的逻辑
  • 应用状态图管制状态和逻辑

理论调研后果

应用动静配置渲染不同的页面

实际上,之前有看过吾辈写的 react 通用列表组件封装 就晓得,实际上列表曾经被配置化了,能够应用配置的模式去渲染一个残缺的列表页面,因而能够依据不同的组织应用不同的配置就好了。然而,事实上并没有这么简略,因为就算是简略的列表,也依然蕴含 上下文,而这,正是配置不能拿到的内容。

上下文次要包含

  • 须要异步申请的数据,例如下拉框的选择项
  • 须要从路由上获取的数据,例如搜寻条件
  • 须要对页面内的其它组件进行操作时,例如点击按钮有个新增列表项的弹窗

能够有几种解决方案

  • 通过函数,而不是单纯的配置,这样,能够通过参数解决一些上下文的依赖状况
  • 通过函数且异步,能够解决 api 申请时,此时的 api 必然是能够用的,然而会依赖于 api。

但这依然会带来问题

  • 数据不再纯正,无奈序列化。
  • 不同配置依赖的数据可能不同,须要配置本人去解决,那么如果这样想的话,那么配置就须要自行获取数据,而不是内部传递数据了
  • 依然无奈应用 状态
  • 最重要的是,应用函数之后变得不再像是 配置

依据状态匹配不同的动静组件

  • 配置更为灵便,可能获取到组件的上下文
  • 接口申请也没有问题
  • 对不同配置,能够自行对数据进行解决

问题

  • 无奈如同纯数据配置那样,复用逻辑这么彻底,然而也能够通过 hooks 解决。
  • UI 复用问题
    先应用组件的形式编写一下,看具体后果如何
  • 无奈序列化也意味着无奈放到后端,甚至意味着很难做动静加载

应用

  • 应用一个 wrapper 组件来讲 UI 和通用逻辑给包裹进去
  • 应用另外一套组件去辨别不同租户的配置(因为是在组件外部写配置,所以该配置能够灵便的应用任意接口,组件上下文可能还不太行)也就是用多个组件来解决这个问题。

能够再尝试一下有没有解决方案。

应用 hooks 封装不同的代码

  • 相比于解决 是哪一个 ,更适宜解决 有或没有 的代码宰割
  • 可能应用 react 的状态

问题

  • 应用 hooks 必须放在函数组件最顶层,导致实质上无奈 lazy 加载。参考:Hook 规定
  • 应用 hooks 同样难以序列化存储到后端

应用状态图管制状态和逻辑

应用 hooks 封装代码最适宜解决元素级的权限管制,但在面对须要依据多个维度的状态决定程序的状态或行为时,就有点力不从心了。而这,也是为什么无限状态机为什么有用的起因。

论断

最终,咱们抉择了最灵便的 动静组件 + Hooks 共享逻辑 的模式,尽管应用动静组件会减少一些冗余度,但也能够通过子组件或 hooks 的模式复用逻辑,实际上在工程化减小的复杂度的收益是要高于代码冗余的。

应用示例

注销相干内容曾经应用该形式进行了重构

  • src/pages/register

    • common: 通用的一些组件和逻辑,例如申请后盾接口应该是对立的,但返回的数据类型却应该是独自的

      • form: 表单相干组件,提供给列表 / 详情页面应用
      • detail: 详情页面
      • list: 列表页面
    • organizations: 不同组织的目录

      • org1: 组织 1
      • org2: 组织 2

吾辈编写了一个简略的示例,代码在 dynamic_state

其余技术问题

  • [x] 如何在运行时依据组织切换性能

    • 能够再包一层组件而非简略的从 lazy component map 取出组件
  • [x] 如何在运行时增加新组织的性能

    • 可能须要插件的实现形式,反对动静加载进来,例如 vscode 的插件体系。
  • [x] 如何应用 hooks 更好的复用逻辑

    • 应用 hooks 封装逻辑,应用小型组件封装 UI/UX
  • [x] 如何在打包阶段干掉不相干组织的代码

    • 须要批改 webpack 相干的内容,目前不予考虑
退出移动版