# wanmi mobile taro

## 整体介绍

- 组件：对页块以及逻辑的封装；<br/>
- 模板：对页块以及逻辑的总结；<br/>
- 组件与模板都是对项目中可复用代码的提取；不同点在于组件侧重于通过被引用来复用（代码控制权在组件内），模板则通过被复制来复用（代码控制权在业务中）。<br/>

## 配合开发插件来使用

- 在业务代码中，利用模板/组件可以快速编写页面整体结构，然后通过开发插件一键生成相关代码<br/>
- 对于符合约定的页面，也可以通过模板块增加地添加逻辑<br/>

## 组件/模板设计原则

- 对于组件的封装，要保证其的单一职责、高内聚；对于一些不常用的、关联性不大的特性，可以单独提取成模板；<br/>
- 对于强交互类的组件，由于这类组件不易提取代码，所以要考虑周全组件的各种使用场景；<br/>
- 对于模板的封装：<br/>
1.要充分考虑模板之间的上下级关系，以及模板是如何组合成页面的；（添加的模板要符合组件描述语言的文法）；<br/> 
2.添加模板时要从业务出发、充分理解背后的数据状态后，尽可能的覆盖常见的页面场景；<br/> 
3.模板的属性(props)要尽可能的精简：能用一个属性描述的、不要用两个（如 FormItem.label）、非重要属性不要封装进来；<br/> 
4.要了解模板的作用是：通过简单的配置来拼装并生成相应的代码块，细节部分可以提取代码后再调整；<br/>

## 组件/模板开发原则

- 使用 react hook 开发，组件的 props、state 要用 ts 明确申明，非必传 props 要有默认值；<br/>
- 多余的包引入、console.log、alert需及时清理掉；<br/>
- && 前需要为明确的boolean类型；<br/>
- 类型定义需要明确是否必传, 非必传的需要做非空判断, 或者是业务处理，或者是有默认值；<br/>
- 注释部分要补全；<br/>
- 变量名要有可读性；<br/>
- 对于 hook 中出现状态不同步问题时，可以先用 common/hooks/use-ref-state.ts 来解决；<br/>
- 逻辑不是太复杂的组件，建议直接在 index.tsx 中封装；<br/>
- 对于模板、可提取组件，编写时逻辑要尽量清晰、简约、不用奇怪的语法，从而有利于提取算法的识别；<br/>
- classNames名、文件名统一用脊柱命名<br/>
- 样式命名规则：第一层样式名为 wm-{compName} wm-{compName}-{status}；其余层样式名尽量简约不用加 wm-{compName}前缀；<br/>
- 样式命名要利于 props 解析，如 longText、largeText、middleText 可以直接用`${size}Text`来解析<br/>
- 单个文件原则上不超过150行，过长的话进行拆分<br/>
- 内部方法变量不需要以"_"开头，内部渲染方法以renderXXX命名<br/>

## 组件模型
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(复用)；