转换成 React

二次开发

原生小程序代码：

Page({

data: {

text: 'Hello World'

}

})

<view class="container">

{{ text }}

</view>

转换后：

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

它看起来就像普通的 Taro 组件，最重要的区别就在于 @withWeapp() 这个装饰器，你可以将它理解为转换代码的运行时，@withWeapp() 会增加一些原来 Taro 没有方法和属性，例如：

this.setData

转换后的 this.setData 的 API 相当于小程序的 this.setData 的 polyfill，他和 this.setState 最大的区别就在于，this.setData 之后 data 的数据是同步更新，而渲染是异步更新，而 setState 两者都是异步的。

this.data 和 this.properties

this.data 和 this.properties 相当于 Taro 的 this.state 和 this.props 的 alias，当它们的数据更新时，对应的 state 和 props 也会同步更新。

生命周期

Taro 会将原生小程序的生命周期转换为 Taro 的生命周期，完整对应关系如下：

小程序生命周期	Taro 生命周期
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