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

发布日期： 2021-12-23 阅读量： 作者： 网络

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

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

项目描述

为了更清晰描述实现过程，我们把实现方案当作一个项目来对待。
项目需求：使如下计数器功能的 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>
        <view>
          <text>count: {this.state.count}</text>
        </view>
        <view>
          <text>{text}</text>
        </view>
        <button>+1</button>
        <button>-1</button>
      </view>
    )
  }
}

# React # 小程序

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯31701 】【 SEO推广17678 】

上一篇: centos怎么解压zip文件

下一篇: centos怎么配置dns域名解析

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

随便看看