Skip to main content
Version: 3.x

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.datathis.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 LifecycleTaro Lifecycle
onShowcomponentDidShow
onHidecomponentDidHide
App.onLaunchonLaunch
Page.onLoadonLoad
Page.onReadyonReady
Page.onUnloadcomponentWillUnmount
Component.createdcomponentWillMount
Component.attachedcomponentDidMount
Component.readyPage.onReady
Component.detachedcomponentWillUnmount