【taro】taro react转小程序原理

前言

• 最近研究了老版taro的实现原理，总结一波。

原理

• 老版的taro原理就跟我们正常想的差不多。就是通过ast转成对应的小程序代码。
• 小程序的代码写起来是有特定套路的，所以你需要知道编译前的代码与编译后的代码啥样。
• 在过一遍ast时，taro会去收集4个东西：
  1、import导入的样式文件最后作为wxss
  2、config方法名作为.json文件
  3、render方法中提取的jsx作为wxml文件。
  4、其他逻辑提取为js文件。
• 一般情况，taro会把对应的包扔到npm文件夹下，然后查找在npm里面找对应的包名。
• 小程序的通用模板一般是：

Component(require('xxxx').createComponent(Index));

• 入口app则稍微改一下：

App(require('xxxx').createApp(_App));

• 就是在Component中去导入通用的创造组件函数，再将收集的js逻辑导入进去，创造小程序js格式。
• 小程序组件里有也有对应的生命周期，创建函数需要将小程序的生命周期对接编译后的方法名。比如componentDidMount对接小程序onReady，componentDidShow对接onshow等等。
• 这种模式就是先统一编译到一个类里去，然后导入到一个生成器或者说适配器，那个生成器去提取类，最后转换成小程序代码。
• 生成不同模式小程序只要控制require的导入的适配器即可。
• 所以这个了解原理其实并不难，但是体力活很多。