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(复用)；