[转]如何用React写小程序-2-白红宇

由于上一篇文章比较突兀就进入转换入口. 考虑了一下还是需要补全一些前置说明. 书接上回, 我们已经整理了小程序的前置知识. 这次先来补齐一些设计.

代码转换可以使用 webpack, rollup等打包工具作为入口, 如webpack设置entry. 然后通过babel及自定义插件进行编译, 转换成小程序代码.

转成小程序代码后, 为何还考虑增加react-miniapp-core包. 有以下几方面考虑.

方便扩展

生命周期Bridge

生命周期Bridge

我们知道一个 React组件的包括从构造函数开始(getInitialState替代品), 到getDerivedStateFromProps, 到render等等一系列的生命周期钩子. 这些生命周期函数将会在React渲染中的对应各个阶段被调用.

但是在小程序中, 这一系列生命周期将会失效. 因为 在小程序中, 渲染各个周期的生命函数钩子由小程序生命周期API指定, 在小程序中, React 生命周期钩子无法直接使用, 但是我们又希望拥有原汁原味的React开发体验. 这时就需要我们在runtime实现Page和Component的生命周期,并唤起React组件相应的生命周期钩子. 由于我的工程未实现runtime部分功能. 以下为 taro 的生命周期bridge代码:

const weappPageConf = {    onLoad (options) {      page._init(this)      page.$router.params = options      componentTrigger(page, 'componentWillMount')    },    onReady () {      componentTrigger(page, 'componentDidMount')    },    onShow () {      componentTrigger(page, 'componentDidShow')    },    onHide () {      componentTrigger(page, 'componentDidHide')    },    onUnload () {      componentTrigger(page, 'componentWillUnmount')    },    ...  }复制代码

下面我们来开始正题, 对babel插件开发说明

Babel

使用es6开发的人都不会对这个库陌生. 我们通常使用 Babel 时会创建.babelrc 进行以下配置

{ "presets": [ ... ], "plugins": [ ... ],}复制代码

配置中包含presets和plugins. 其实presets也只是一堆插件的集合. 那么其实我们需要开发一款把React代码转换为小程序代码的babel插件.

那么我们先来看看Babel有那些部分

Babel 编译

Babel有很多很多的子库, 其中最核心的就是 @babal/core.

但是其实涉及核心编译生命周期主要是以下三步:

parse 是指把源码解析成AST.

traverse 通过对AST进行解析, 可对原AST进行相应转换.

generate 把AST再次生成目标版本代码.

@babel/core 分别使用相应的子库来实现这三个生命周期. 这里不深入讨论, 有兴趣的可以去看babel的源码. babel主要插件也分两部分: parser plugin 和 traverse plugin. 而我们需要自行实现的plugin就是traverse plugin.

到这里我们完成了铺垫. 下次会继续说明插件的实现方式如果时间足够还可以讨论实现思路.

项目代码: https://github.com/PepperYan/react-miniapp)

喜欢这篇文章的大佬, 点个赞和star, ٩(๑´0`๑)۶

该项目参考了mpvue, taro, weact等.