高阶函数 - 属性代理在多表单中的应用

Pober_Wong · 简书 · · 2018-02-06 18:42

正文

请到「今天看啥」查看全文

背景介绍

我是做 ReactJS 的时候，偶然帮同事写一个多表单项目的部分模块，发现当前已有的项目代码上，已经堆积了无数个表单页面以及对应 mobx store，在观察了每一个表单对应的页面结构、行为、以及每一个 store 的结构、甚至 API 都极其类似，不仅让人联想到了用高阶组件来重新组织所有表单结构，需要调研的大致就是以下几个问题：

1. 各个字段默认值的问题：如果所有表单都由同一个高阶组件处理，那么每个表单对应的字段是什么？是不是需要去每个子页面中再写一次？
答：其实就算是之前的写法，都不需要在 store 中罗列出所有的字段值，除非需要给对应字段添加默认值，而不添加的话，我们的组件在接收到 undefined 的时候，绝大多数组件都是可以正常运行的，个别我们自己写的组件只需要保证不会 crash 即可，这样我们就只需要在 store 中设置一个能够被监听变化的空对象—— observable.map({})
2. 如果对应页面的部分字段需要默认值怎么办？
答：我们只需要在对应页面的构造函数中进行默认字段的添加即可。虽然在代码层面上看起来是很多个页面通过高阶组件使用了同一个 store，但实质上在内存层面看的话，它还是 N 多个页面各自有各自的 store 实例，因此我们不需要考虑多个页面之间的相互影响，只需要做两件事，在 store 中添加一个 injectFields 方法，在对应页面的构造函数中给我们的空对象注入需要默认值的字段即可。