转换成 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 |