React如何构建小程序？两种实现方案的分享（如何通过react构建项目）

react如何构建小程序？下面这篇文章通过1500行代码揭示了react如何运行到小程序平台，并介绍了react构建小程序的两种实现方案，希望对大家有所帮助！

你用过类似Taro和Remax的框架吗？你想知道这种框架如何将React代码运行到小程序平台吗？如果是这样，那么也许你可以在喝完一杯咖啡后继续阅读。本文将通过两种方案实现对applet平台的反应运行。如果你现在想阅读这1500行实现代码，你可以直接点击项目源代码来获取它（也许有更多杯咖啡）。

项目描述为了更清楚地描述实施过程，我们将实施方案视为一个项目。项目要求:运行以下计数器函数的React代码到微信小程序平台。

从& # 39；react & # 39从& # 39；@ Leo/components & # 39；导入& # 39；。/index . CSS & # 39；导出默认类索引扩展组件{ constructor（）{ super（）} this . state = { count:0 } this . on addclick = this . on addclick . bind（this）this . onreduceclick = this . onreducecclick . bind（this）} componentDidMount（）{ console . log（& # 39；执行componentDidMount & # 39）this . setstate（{ count:1 }）} on addclick（）{ this . setstate（{ count:this . state . count+1 }）} on reduceclick（）{ this . setstate（{ count:this . state . count -1 }）} render（）{ const text = this . state . count % 2 = = = 0？'偶数& # 39；: '奇数& # 39；return（count:{ this . state . count } { text }+1 -1）} } }如果您使用过Taro或Remax等框架，您应该对上面的代码感到熟悉，它正式模仿了此类框架的React DSL编写。如果您想查看紧急实现该需求的效果，您可以点击该项目的源代码以获取源代码，然后根据提示运行该项目，您可以观察到以下效果:

此时，我们清楚地知道了这个项目的需求以及最终结果是什么。接下来，我们将重点讨论从需求到结果的具体实现过程。

开发过小程序的同学都知道小程序包括一个主体和一个页面，其中主体由三个文件组成，必须放在根目录中。这三个文件是:app.js（必选，小程序逻辑）、app.json（必选，小程序公共配置）和app.wxss（非必选，小程序公共样式表）。因此，为了将React代码构建成一个小程序代码，您需要首先生成app.js和app.json文件。因为这个转换不涉及app.js文件，所以可以直接用写死App（{ }）来替换app.js的内容。App.json是一个配置文件。您可以直接在React项目中添加一个app.config.js来填写配置内容，即React代码项目的目录如下:

│-app.config.js//applet ├-src配置文件，用于生成app.json内容└ ──页面└────索引└ ├────索引。css └ ──代码index.jsx//react，也就是上面的计数器代码└──ts config。JSON app。config。js内容是applet的全局配置内容。

module.exports = {页数:

而如果要运行React到小程序平台，只需要开发一个小程序自定义渲染器即可。React官方提供了一个react-reconciler包来实现自定义渲染器，官方还提供了一个简单的演示来重写react-dom。

使用react -协调器实现渲染器有两个主要步骤。第一步是实现渲染函数（render方法），它类似于ReactDOM.render方法:

从& # 39；react -调解器& # 39；从& # 39；。/host config & # 39；//主机配置//创建Reconciler的实例并将HostConfig传递给Reconciler const react concilist = react conciler（Host config）/* *提供一个render方法。与ReactDom.render方法*和ReactDom类似，它接收三个参数* render（，container，（）=》console . log（& # 39；渲染& # 39；））*/exportfunctionrender（element，container，callback）{//创建根容器if（！集装箱。_ root container）{ container。_ root container = reactreconcilerinst . create container（container，false）；}//更新根容器，返回ReactConcierist。更新容器（元素，容器。_根容器，null，回调）；}步骤2:从‘导入主机配置。上图引用的‘/host config‘需要通过react-reconciler实现主机配置。主机配置是主机环境提供的一系列适配器方案和配置项，它定义了如何创建节点实例、构建节点树、提交和更新等。单击查看完整列表。值得注意的是，小程序平台上没有DOM API操作，数据只能通过setData传递到视图层。因此，Remax重新定义了一个VNode类型的节点，这样React将在协调过程中更新VNode，而不是直接更改DOM。主机配置文件的内容大致如下:

接口VNode { id:number；//节点id，这是用于标识节点的自增唯一id。集装箱:集装箱；//类似于ReactDOM。渲染（，文档。getElementByid（& # 39；根& # 39；）children中的第二个参数:VNode【】；//子节点。类型:字符串|符号；//节点的类型，即小程序中的基本组件，如视图、文本等。道具？:任何；//节点的属性。parent:VNode | null；//父节点文本？:字符串；//Text appendChild（node:VNode）:文本节点上的voidremove child（node:VNode）:void；insert before（new node:VNode，reference node:VNode）:void；...}//实现主机配置consthost config = {...//reconciler并执行它，触发容器更新数据（实际触发小程序的setdata）resetaftercommit:（container）=》{ container . applyuupdate（）；}，//创建一个主机组件实例，并初始化VNode节点Create instance（type，newprops，container）{ const ID = generate（）；常量节点=新虚拟节点（{...});返回节点；}，//插入节点Appendchild（parent，child）{ parent。Appendchild（孩子）；}，//insert before（parent，child，before child）{ parent . insert before（child，before child）；}，//移除节点remove child（parent，child）{ parent。removechild（子级）；} ...};除了上述配置之外，还需要提供一个容器来将VNode数据格式化为JSON数据，以便applet setData传递给视图层。该容器类实现如下:

类容器{构造函数（上下文）{ this . root = new VNode （{..});//根节点} to JSON（nodes，Data）{//Format VNode Data JSON Const JSON = Data | |【】nodes。foreach（node =》{ const node data = { type:node . type，props: node.props || {}，text: node.text，id: node.id，children:【】} if（node . children）{ this . tojson（node . children，nodeData . children）} JSON . push（nodeData）}）return JSON } applyUpdate（）{//host config配置} ...}接下来，我们封装一个createPageConfig方法来执行渲染，其中页面参数是React组件，它是上面计数器的组件。

导入*作为来自& # 39；react & # 39；从& # 39；。/container & # 39；；//从上面定义的容器导入渲染& # 39；。/render & # 39；；//上面定义的render方法exportdefault函数createpageconfig（component）{//component是React组件const config = {// applet逻辑对象的文字量。页面方法注册的数据:{root: {children:【】，}}，onload（）{ this . container = new container（this，& # 39；根& # 39；);const pageElement = react . createelement（component，{ page: this，}）；this . element = render（page element，this . container）；} };返回配置；}至此，小程序渲染器已经基本实现。为了使代码运行，您需要通过静态编译来转换React计数器组件，这实际上是在末尾插入一段代码:

从& # 39；react & # 39；导出默认类索引扩展了组件{ constructor（）{ super（）；this . state = { count:0 }；this . onaddclick = this . onaddclick . bind（this）；this . onreduceclick = this . onreduceclick . bind（this）；} ...} // app.js封装了上面的createPage方法页面（require（& # 39；../../NPM/app . js & # 39；).create page（Index））通过这种方式，React代码确实可以在小程序中运行，但这里仍有一个过程我们没有介绍。如何将上述容器类的applyUpdate方法中生成的页面的JSON数据更新到视图中？首先，让我们看看这个JSON数据是什么样子的:

//由于空间问题，这里只发布了一些数据{“type“:“root“、“props“:{ }、“ID“:0、“children“:【{“type“:“view“、“props“:{“class“:“container“}和“ID“。“Children“:【{“type“:“view“，“props“:{“class“:“conut“}，“id“:4，“Children“:【{“type“:“text“，“props“:{ }，“id“:3，“Children“:【{“type“:“plain -text“，“props“:{ }，“text“:“count:“，“id“:1，“Children“:“Children“:“【】:【】}，“:{“type“:“plain -text“，“props“:{ }，“text“:{ }:“1“，“id“:2要将这些数据呈现到页面中，可以使用applets提供的Temlate进行呈现。因为小程序模板的递归嵌套存在问题（受微信小程序平台限制），所以需要提供多个组件类型相同的模板进行递归渲染。代码如下:

......此时，您可以真正将React代码运行到小程序，并且可以在项目源代码中执行npm run build:runtime来查看效果。运行时方案的优点是没有语法限制（如果你不相信我，你可以尝试在这个项目中编写各种动态编写方法），但缺点是其性能较差，主要是因为其setData数据相对较大（上面发布的JSON数据适当大于编译时方案），因此其性能比编译时方案差。当然，业界也为运行时解决方案做了很多性能优化，比如本地更新、虚拟列表等。由于篇幅问题，我在这里不做解释（代码中没有实现）。

总之，本文描述了React的两种实现方案，以最简单的方式构建小程序。这两种方案各有利弊，各有千秋。对于追求良好性能的场景，编译时方案更适合。对于强调开发体验且对性能要求不高的场景，运行时方案是首选。如果你想了解更多的源代码实现，可以看看Taro和Remax的官方源代码。欢迎互相讨论。

项目地址【相关学习推荐:小程序开发教程】

React就是这样构建小程序的。两个实施方案的分享详情请关注主机参考其他相关文章了解更多详情！

这几篇文章你可能也喜欢：

• 如何部署React应用？GitLab CI 在云开发上部署React应用的详细步骤

本文由主机参考刊发，转载请注明：React如何构建小程序？两种实现方案的分享（如何通过react构建项目） https://zhujicankao.com/105470.html