Convert to React

Secondary Development

Mini Program Native Code:

Page({
  data: {
    text: 'Hello World'
  }
})

<view class="container">
  {{ text }}
</view>

After conversion:

import { Block, View } from '@tarojs/components'
import React from 'react'
import Taro from '@tarojs/taro'
import withWeapp from '@tarojs/with-weapp'
import Title from '../../components/title/index'
import './index.scss'

@withWeapp({
  data: {
    text: 'Hello World'
  }
})
class _C extends React.Component {
  render() {
    const { text } = this.data
    return <View className="container">{text}</View>
  }
}

export default _C

t looks like a normal Taro component, the most important difference is the @withWeapp() decorator, which you can interpret as a runtime for conversion code. @withWeapp() adds some methods and properties that were not available in the original Taro, eg:

this.setData

The API of the converted this.setData is equivalent to the polyfill of this.setData of the mini program, the biggest difference between it and this.setState is that after this.setData the data of data is updated synchronously, while rendering is updated asynchronously, while setState is updated asynchronously. both are asynchronous.

this.data 和 this.properties

this.data and this.properties are aliases of Taro's this.state and this.props, and when their data is updated, the corresponding state and props will be updated as well.

Lifecycle

Taro converts the lifecycle of the native mini program into the lifecycle of Taro, and the complete correspondence is as follows.

Mini Program Lifecycle	Taro Lifecycle
onShow	componentDidShow
onHide	componentDidHide
App.onLaunch	onLaunch
Page.onLoad	onLoad
Page.onReady	onReady
Page.onUnload	componentWillUnmount
Component.created	componentWillMount
Component.attached	componentDidMount
Component.ready	Page.onReady
Component.detached	componentWillUnmount