转换成 React

二次开发

原生小程序代码:

  1. Page({
  2. data: {
  3. text: 'Hello World'
  4. }
  5. })
  6. <view class="container">
  7. {{ text }}
  8. </view>

转换后:

  1. import { Block, View } from '@tarojs/components'
  2. import React from 'react'
  3. import Taro from '@tarojs/taro'
  4. import withWeapp from '@tarojs/with-weapp'
  5. import Title from '../../components/title/index'
  6. import './index.scss'
  7. @withWeapp({
  8. data: {
  9. text: 'Hello World'
  10. }
  11. })
  12. class _C extends React.Component {
  13. render() {
  14. const { text } = this.data
  15. return <View className="container">{text}</View>
  16. }
  17. }
  18. export default _C

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

this.setData

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

this.datathis.properties

this.datathis.properties 相当于 Taro 的 this.statethis.props 的 alias,当它们的数据更新时,对应的 stateprops 也会同步更新。

生命周期

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

小程序生命周期Taro 生命周期
onShowcomponentDidShow
onHidecomponentDidHide
App.onLaunchonLaunch
Page.onLoadonLoad
Page.onReadyonReady
Page.onUnloadcomponentWillUnmount
Component.createdcomponentWillMount
Component.attachedcomponentDidMount
Component.readyPage.onReady
Component.detachedcomponentWillUnmount