wanmi mobile taro
整体介绍
- 组件：对页块以及逻辑的封装；
- 模板：对页块以及逻辑的总结；
- 组件与模板都是对项目中可复用代码的提取；不同点在于组件侧重于通过被引用来复用（代码控制权在组件内），模板则通过被复制来复用（代码控制权在业务中）。
配合开发插件来使用
- 在业务代码中，利用模板/组件可以快速编写页面整体结构，然后通过开发插件一键生成相关代码
- 对于符合约定的页面，也可以通过模板块增加地添加逻辑
组件/模板设计原则
- 对于组件的封装，要保证其的单一职责、高内聚；对于一些不常用的、关联性不大的特性，可以单独提取成模板；
- 对于强交互类的组件，由于这类组件不易提取代码，所以要考虑周全组件的各种使用场景；
- 对于模板的封装：
1.要充分考虑模板之间的上下级关系，以及模板是如何组合成页面的；（添加的模板要符合组件描述语言的文法）；
2.添加模板时要从业务出发、充分理解背后的数据状态后，尽可能的覆盖常见的页面场景；
3.模板的属性(props)要尽可能的精简：能用一个属性描述的、不要用两个（如 FormItem.label）、非重要属性不要封装进来；
4.要了解模板的作用是：通过简单的配置来拼装并生成相应的代码块，细节部分可以提取代码后再调整；
组件/模板开发原则
- 使用 react hook 开发，组件的 props、state 要用 ts 明确申明，非必传 props 要有默认值；
- 多余的包引入、console.log、alert需及时清理掉；
- && 前需要为明确的boolean类型；
- 类型定义需要明确是否必传, 非必传的需要做非空判断, 或者是业务处理，或者是有默认值；
- 注释部分要补全；
- 变量名要有可读性；
- 对于 hook 中出现状态不同步问题时，可以先用 common/hooks/use-ref-state.ts 来解决；
- 逻辑不是太复杂的组件，建议直接在 index.tsx 中封装；
- 对于模板、可提取组件，编写时逻辑要尽量清晰、简约、不用奇怪的语法，从而有利于提取算法的识别；
- classNames名、文件名统一用脊柱命名
- 样式命名规则：第一层样式名为 wm-{compName} wm-{compName}-{status}；其余层样式名尽量简约不用加 wm-{compName}前缀；
- 样式命名要利于 props 解析，如 longText、largeText、middleText 可以直接用
${size}Text来解析
- 单个文件原则上不超过150行，过长的话进行拆分
- 内部方法变量不需要以"_"开头，内部渲染方法以renderXXX命名
组件模型
props对应input、props.onChange对应output、state对应inner； 元信息(meta)：对输入参数(input)、输出参数通道(output)、内部状态的描述(inner)； 组件默认信息(defaultInfo)：props、state、meta的默认值； 组件初始信息(initialInfo)：由props和defaultValue合并，表示props、state、meta的初始值；
connect方法的作用
计算当前组件的initialValue，以及传入的内部组件的initialValue； 这样组件内可用的确定量就不止props了，还有meta；
插件算法
在extract-parts时，识别输入props、组件内的defaultValue，子组件的props、defaultValue，然后计算initialValue(复用)；