文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React怎么构建小程序

2023-06-22 04:29

关注

这篇文章主要介绍“React怎么构建小程序”,在日常操作中,相信很多人在React怎么构建小程序问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”React怎么构建小程序”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

项目描述

为了更清晰描述实现过程,我们把实现方案当作一个项目来对待。
项目需求:使如下计数器功能的 React 代码运行到微信小程序平台。

import React, { Component } from 'react'import { View, Text, Button } from '@leo/components'import './index.css'export default class Index extends Component {  constructor() {    super()    this.state = { count: 0 }    this.onAddClick = this.onAddClick.bind(this)    this.onReduceClick = this.onReduceClick.bind(this)  }  componentDidMount () {    console.log('执行componentDidMount')    this.setState({ count: 1 })  }  onAddClick() {    this.setState({ count: this.state.count + 1 })  }  onReduceClick() {    this.setState({ count: this.state.count - 1 })  }  render () {    const text = this.state.count % 2 === 0 ? '偶数' : '奇数'    return (      <View className="container">        <View className="conut">          <Text>count: {this.state.count}</Text>        </View>        <View>          <Text className="text">{text}</Text>        </View>        <Button onClick={this.onAddClick} className="btn">+1</Button>        <Button onClick={this.onReduceClick} className="btn">-1</Button>      </View>    )  }}

如果使用过 Taro 或者 Remax 等框架,对上述代码应该有似曾相识的感觉,上述代码正式模仿这类框架的 React DSL 写法。如果想迫切看到实现这个需求的效果,可点击此项目源码进行获取源码,然后根据提示运行项目,即可观察到如下效果:

React怎么构建小程序

到这里,就清楚了知道这个项目的需求以及最终实现结果是什么,接下来便是重点阐述从需求点到结果这个过程的具体实现。

实现方案

构建小程序框架产物

开发过小程序的同学都知道,小程序框架包含主体和页面,其中主体是由三个文件生组成的,且必须放在根目录,这三个文件分别是: app.js (必需,小程序逻辑),app.json(必需,小程序公共配置),app.wxss(非必须,小程序公共样式表)。所以要将 React 代码构建成小程序代码,首先需要先生成app.jsapp.json文件。因为本次转换未涉及到app.js文件,所以app.js内容可以直接写死 App({})代替。app.json是配置文件,可以直接在 React 工程新增一个app.config.js用来填写配置内容,即 React 代码工程目录如下:

├── src│   ├── app.config.js          // 小程序配置文件,用来生成app.json内容      │   └── pages│       └── index│           ├── index.css│           └── index.jsx      // React代码,即上述计数器代码└── tsconfig.json

app.config.js内容即是小程序全局配置内容,如下:

module.exports = {  pages: ['pages/index/index'],  window: {    navigationBarTitleText: 'react-wxapp',    navigationBarBackgroundColor: '#282c34'  }};

有了这个配置文件,就可以通过如下方式生成app.jsapp.json文件。

fs.writeFileSync(path.join(outputDir, './app.js'), `App({})`)fs.writeFileSync(path.join(outputDir, './app.json'), JSON.stringify(config, undefined, 2)) // config即为app.config.js文件内容

小程序页面则是由四种类型文件构成,分别是js(必需,页面逻辑)、wxml(必需,页面结是构)、json(非必需、页面配置)、wxss(非必需、页面样式表)。而React代码转小程序,主要是考虑如何将React代码转换程序对应的jswxml类型文件,后文会详细阐述。

React运行到小程序平台方案分析

实现React代码运行到小程序平台上主要有两种方式,一种是编译时实现,一种是运行时实现,如果你已经查看的本项目项目源码,就可以发现源码里也体现出了这两种方式(编译时实现目录:packages/compile-core;运行时实现目录:packages/runtime-core)。

编译时方式主要通过静态编译将 JSX 转换成小程序对应的 template 来实现渲染,类似 Taro1.0 和 2.0,此方式性能接近原生小程序,但是语法却有很大的限制。运行时实现是通过react-reconciler重新在小程序平台定义一个 React 渲染器,使得 React 代码可以真正运行到小程序里,类似 Taro3.0、Remax 等,因此这种方式无语法限制,但是性能会比较差。本项目源码正是参照 Taro、Remax 这类框架源码并简化很多细节进行实现的,因此这个项目源码只是适合来学习的,并不能投入实际业务进行使用。

接下来将分别讲述如何通过编译时和运行时这两种方式来实现 React 运行到小程序平台。

编译时实现

在讲述具体实现流程之前,首先需要了解下编译时实现这个名词的概念,首先这里的编译并非传统的高大上“编译”,传统意义上的编译一般将高级语言往低级语言进行编译,但这里只是将同等水平语言转换,即将javascript代码字符串编译成另一种javascript代码字符串,因此这里的编译更类似于“转译”。其次,虽然这里称编译时实现,并非所有实现过程都是编译的,还是需要少部分实现需要运行时配合,因此这种方式称为重编译轻运行方式更为合适。同样的,运行时实现也含有少量编译时实现,亦可称为重运行轻编译方式。

为了方便实现将javascript代码字符串编译成另一种javascript代码字符串,这里直接采用Babel工具,由于篇幅问题,这里就不详细讲述Babel用法了,如果对Babel不熟的话,可以看看这篇文章简单了解下(没错,就是给自己打广告)。接下来我们来分析编译时实现步骤有哪些:

1. JSX转换成对应小程序的模板

React是通过JSX来渲染视图的,而小程序则通过wxml来渲染视图,要将 React 运行到小程序上,其重点就是要如何实现JSX转换成对应的小程序的wxml,其转换规则就是将JSX使用语法转换成小程序相同功能的语法,例如:

语法转换远不止上面这些类型,如果要保证开发者可以使用各种JSX语法开发小程序,就需要尽可能穷举出所有语法转换规则,否则很可能开发者用了一个写法就不支持转换。而事实是,有些写法(比如动态生成JSX片段等等)是根本无法支持转换,这也是前文为什么说编译时实现方案的缺点是语法有限制,开发者不能随意编码,需要受限于框架本身开发规则。

由于上述需要转换JSX代码语法相对简单,只需要涉及几种简单语法规则转换,这里直接贴出转换后的wxml结果如下,对应的实现代码位于:packages/compile-core/transform/parseTemplate.ts

<view class="container">  <view class="conut"><Text>count: {{count}}</Text></view>  <view>    <text class="text">{{text}}</text>  </view>  <button bindtap="onAddClick" class="btn">+1</button>  <button bindtap="onReduceClick" class="btn">-1</button></view>

2. 运行时适配

如前文所说,虽然这个方案称为编译时实现,但是要将React代码在小程序平台驱动运行起来,还需要在运行时做下适配处理。适配处理主要在小程序js逻辑实现,内容主要有三块:数据渲染、事件处理、生命周期映射。

小程序js逻辑是通过一个object参数配置声明周期、事件等来进行注册,并通过setData方法触发视图渲染:

Component({  data: {},  onReady () { this.setData(..) },  handleClick () {}})

而计数器React代码是通过class声明一个组件逻辑,类似:

class CustomComponent extends Component {  state = { }  componentDidMount() { this.setState(..)  }  handleClick () { }}

从上面两段代码可以看出,小程序是通过object声明逻辑,React 则是通过class进行声明。除此之外,小程序是通过setData触发视图(wxml)渲染,React 则是通过 setState 触发视图(render方法)渲染。所以要使得 React 逻辑可以运行到小程序平台,可以加入一个运行时垫片,将两者逻辑写法通过垫片对应起来。再介绍运行时垫片具体实现前,还需要对上述 React 计数器代码进行简单的转换处理,处理完的代码如下:

import React, { Component } from "../../npm/app.js";  // 1.app.js为垫片实现文件export default class Index extends Component {  static $$events = ["onAddClick", "onReduceClick"];  // 2.收集JSX事件名称  constructor() {    super();    this.state = {      count: 0    };    this.onAddClick = this.onAddClick.bind(this);    this.onReduceClick = this.onReduceClick.bind(this);  }  componentDidMount() {    console.log('执行componentDidMount');    this.setState({      count: 1    });  }  onAddClick() {    this.setState({      count: this.state.count + 1    });  }  onReduceClick() {    this.setState({      count: this.state.count - 1    });  }  createData() {                                      // 3.render函数改为createData,删除    this.__state = arguments[0];                      // 原本的JSX代码,返回更新后的state                                                      // 提供给小程序进行setData    const text = this.state.count % 2 === 0 ? '偶数' : '奇数';    Object.assign(this.__state, {      text: text    });    return this.__state;  }}    Page(require('../../npm/app.js').createPage(Index))。 // 4.使用运行时垫片提供的createPage                                                      // 方法进行初始化                                                      // 方法进行初始化

如上代码,需要处理的地方有4处:

运行时垫片(app.js)实现逻辑如下:

export class Component {                             // 重写Component的实现逻辑  constructor() {    this.state = {}  }  setState(state) {                                  // setState最终触发小程序的setData    update(this.$scope.$component, state)  }  _init(scope) {    this.$scope = scope  }}function update($component, state = {}) {  $component.state = Object.assign($component.state, state)  let data = $component.createData(state)            // 执行createData获取最新的state  data['$leoCompReady'] = true  $component.state = data  $component.$scope.setData(data)                    // 将state传递给setData进行更新}export function createPage(ComponentClass) {         // createPage实现逻辑  const componentInstance = new ComponentClass()     // 实例化传入进来React的Class组件  const initData = componentInstance.state       const option = {                                   // 声明一个小程序逻辑的对象字面量    data: initData,    onLoad() {      this.$component = new ComponentClass()      this.$component._init(this)      update(this.$component, this.$component.state)    },    onReady() {      if (typeof this.$component.componentDidMount === 'function') {        this.$component.componentDidMount()           // 生命逻辑映射      }    }  }  const events = ComponentClass['$$events']          // 获取React组件内所有事件回调方法名称  if (events) {    events.forEach(eventHandlerName => {                   if (option[eventHandlerName]) return      option[eventHandlerName] = function () {        this.$component[eventHandlerName].call(this.$component)      }    })  }  return option}

上文提到了重写Component类和createPage方法具体实现逻辑如上代码所示。

Component内声明的state会执行一个update方法,update方法里主要是将 React 产生的新state和旧state进行合并,然后通过上文说的createData方法获取到合并后的最新state,最新的state再传递给小程序进行setData,从而实现小程序数据渲染。

createPage方法逻辑首先是将 React 组件实例化,然后构建出一个小程序逻辑的对应字面量,并将 React 组件实例相关方法和这个小程序逻辑对象字面量进行绑定:其次进行生命周期绑定:在小程序onReady周期里出发 React 组件对应的componentDidMount生命周期;最好进行事件绑定:通过上文提到的回调事件名,取出React 组件实例内的对应的事件,并将这些事件注册到小程序逻辑的对应字面量内,这样就完成小程序平台事件绑定。最后将这个对象字面量返回,供前文所说的Page方法进行注册。

到此,就可以实现 React 代码运行到小程序平台了,可以在项目源码里执行 npm run build:compile 看看效果。编译时实现方案主要是通过静态编译JSX代码和运行时垫片结合,完成 React 代码运行到小程序平台,这种方案基本无性能上的损耗,且可以在运行时垫片做一些优化处理(比如去除不必要的渲染数据,减少setData数据量),因此其性能与使用小程序原生语法开发相近甚至某些场景会更优。然而这种方案的缺点就是语法限制问题(上文已经提过了),使得开发并不友好,因此也就有了运行时实现方案的诞生。

运行时实现

从上文可以看出,编译时实现之所以有语法限制,主要因为其不是让 React 真正运行到小程序平台,而运行时实现方案则可以,其原理是在小程序平台实现一个 React 自定义渲染器,用来渲染 React 代码。这里我们以 remax 框架实现方式来进行讲解,本项目源码中的运行时实现也正是参照 remax 框架实现的。

如果使用过 React 开发过 Web,入口文件有一段类似这样的代码:

import React from 'react'import ReactDom from 'react-dom'import App from './App'ReactDom.render(  App,  document.getElementById('root'))

可以看出渲染 Web 页面需要引用一个叫 react-dom 模块,那这个模块作用是什么?react-dom是 Web 平台的渲染器,主要负责将 React 执行后的Vitrual DOM数据渲染到 Web 平台。同样的,React 要渲染到 Native,也有一个针对 Native 平台的渲染器:React Native
React实现多平台方式,是在每个平台实现一个React渲染器,如下图所示。

React怎么构建小程序

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

使用react-reconciler实现渲染器主要有两步,第一步:实现渲染函数(render方法),类似ReactDOM.render方法:

import ReactReconciler from 'react-reconciler'import hostConfig from './hostConfig'      // 宿主配置// 创建Reconciler实例, 并将HostConfig传递给Reconcilerconst ReactReconcilerInst = ReactReconciler(hostConfig)export function render(element, container, callback) {  // 创建根容器  if (!container._rootContainer) {    container._rootContainer = ReactReconcilerInst.createContainer(container, false);  }  // 更新根容器  return ReactReconcilerInst.updateContainer(element, container._rootContainer, null, callback);}

第二步,如上图引用的import hostConfig from './hostConfig' ,需要通过react-reconciler实现宿主配置(HostConfig),HostConfig是宿主环境提供一系列适配器方案和配置项,定义了如何创建节点实例、构建节点树、提交和更新等操作,完整列表可以点击查看。值得注意的是在小程序平台未提供DOM API操作,只能通过setData将数据传递给视图层。因此Remax重新定义了一个VNode类型的节点,让 React 在reconciliation过程中不是直接去改变DOM,而先更新VNodehostConfig文件内容大致如下:

interface VNode {  id: number;              // 节点 id,这是一个自增的唯一 id,用于标识节点。  container: Container;    // 类似 ReactDOM.render(<App />, document.getElementById('root') 中的第二个参数  children: VNode[];       // 子节点。  type: string | symbol;   // 节点的类型,也就是小程序中的基础组件,如:view、text等等。  props?: any;             // 节点的属性。  parent: VNode | null;    // 父节点  text?: string;           // 文本节点上的文字  appendChild(node: VNode): void;  removeChild(node: VNode): void;  insertBefore(newNode: VNode, referenceNode: VNode): void;  ...}// 实现宿主配置const hostConfig = {  ...  // reconciler提交后执行,触发容器更新数据(实际会触发小程序的setData)  resetAfterCommit: (container) => {    container.applyUpdate();  },  // 创建宿主组件实例,初始化VNode节点  createInstance(type, newProps, container) {    const id = generate();    const node = new VNode({ ... });    return node;  },  // 插入节点  appendChild(parent, child) {    parent.appendChild(child);  },  //   insertBefore(parent, child, beforeChild) {    parent.insertBefore(child, beforeChild);  },  // 移除节点  removeChild(parent, child) {    parent.removeChild(child);  }    ...  };

除了上面的配置内容,还需要提供一个容器用来将VNode数据格式化为JSON数据,供小程序setData传递给视图层,这个容器类实现如下:

class Container {  constructor(context) {    this.root = new VNode({..});   // 根节点  }  toJson(nodes ,data) {            // 将VNode数据格式化JSON    const json = data || []    nodes.forEach(node => {      const nodeData = {        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() {                 // 供HostConfig配置的resetAfterCommit方法执行    const root = this.toJson([this.root])[0]    console.log(root)    this.context.setData({ root});  }  ...}

紧接着,我们封装一个createPageConfig方法,用来执行渲染,其中Page参数为 React 组件,即上文计数器的组件。

import * as React from 'react';import Container from './container'; // 上文定义的Containerimport render from './render';       // 上文定义的render方法export default function createPageConfig(component) {  // component为React组件  const config = {  // 小程序逻辑对象字面量,供Page方法注册    data: {      root: {        children: [],      }    },    onLoad() {      this.container = new Container(this, 'root');      const pageElement = React.createElement(component, {        page: this,      });      this.element = render(pageElement, this.container);    }  };  return config;}

到这里,基本已经实现完小程序渲染器了,为了使代码跑起来,还需要通过静态编译改造下 React 计数器组件,其实就是在末尾插入一句代码:

import React, { Component } from 'react';export default class Index extends Component {  constructor() {    super();    this.state = {      count: 0    };    this.onAddClick = this.onAddClick.bind(this);    this.onReduceClick = this.onReduceClick.bind(this);  }  ...} // app.js封装了上述createPage方法Page(require('../../npm/app.js').createPage(Index))

通过这样,就可以使得React代码在小程序真正运行起来了,但是这里我们还有个流程没介绍,上述Container类的applyUpdate方法中生成的页面JSON数据要如何更新到视图?首先我们先来看下这个JSON数据长什么样子:

// 篇幅问题,这里只贴部分数据{"type": "root","props": {},"id": 0,"children": [{"type": "view","props": {"class": "container"},"id": 12,"children": [{"type": "view","props": {"class": "conut"},"id": 4,"children": [{"type": "text","props": {},"id": 3,"children": [{"type": "plain-text","props": {},"text": "count: ","id": 1,"children": []}, {"type": "plain-text","props": {},"text": "1","id": 2,"children": []}]}]} ... ... }]}

可以看出JSON数据,其实是一棵类似Tree UI的数据,要将这些数据渲染出页面,可以使用小程序提供的Temlate进行渲染,由于小程序模板递归嵌套会有问题(微信小程序平台限制),因此需要提供多个同样组件类型的模板进行递归渲染,代码如下:

<template is="TPL" data="{{root: root}}" />  <!-- root为上述的JSON数据 --><template name="TPL"> <block wx:for="{{root.children}}" wx:key="id">  <template is="TPL_1_CONTAINER" data="{{i: item, a: ''}}" /> </block></template>    <template name="TPL_1_view">  <view    style="{{i.props.style}}"    class="{{i.props.class}}"    bindtap="{{i.props.bindtap}}"  >    <block wx:for="{{i.children}}" wx:key="id">      <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />    </block>  </view></template>  <template name="TPL_2_view">  <view    style="{{i.props.style}}"    class="{{i.props.class}}"    bindtap="{{i.props.bindtap}}"  >    <block wx:for="{{i.children}}" wx:key="id">      <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />    </block>  </view></template>  <template name="TPL_3_view">  <view    style="{{i.props.style}}"    class="{{i.props.class}}"    bindtap="{{i.props.bindtap}}"  >    <block wx:for="{{i.children}}" wx:key="id">      <template is="{{'TPL_' + (tid + 1) + '_CONTAINER'}}" data="{{i: item, a: a, tid: tid + 1 }}" />    </block>  </view></template> ......

至此,就可以真正实现 React 代码运行到小程序了,可以在项目源码里执行npm run build:runtime看看效果。

到此,关于“React怎么构建小程序”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯