React如何构建小程序？两种实现方案分享

React如何构建小程序？两种实现方案分享
React如何构建小程序？下面本篇文章给大家通过1500行代码揭秘React如何运行到小程序平台，介绍一下React 构建小程序两种实现方案，希望对大家有所帮助！

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

你是否使用过 Taro、Remax 类似的框架？你是否想了解这类框架如何实现 React 代码运行到小程序平台？如果是的话，那么也许你可以花喝一杯咖啡的时间继续往下阅读，本文将通过两种方案实现 React 运行到小程序平台。如果你现在就想阅读这1500行的实现代码，那么可以直接点击项目源码进行获取（也许要多喝几杯咖啡）。

项目描述

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

import React, { Component } from &#39;react&#39;import { View, Text, Button } from &#39;@leo/components&#39;import &#39;./index.css&#39;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(&#39;执行componentDidMount&#39;) 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 ? &#39;偶数&#39; : &#39;奇数&#39; 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> ) }}