在 Taro 可以通過 ?import * as React from 'react'? 來使用 React，JSX 語法沒有任何限制，但和在瀏覽器中使用 React 依然有一些不同，具體體現(xiàn)在：

入口組件

每一個 Taro 應(yīng)用都需要一個入口組件用來注冊應(yīng)用，入口文件默認是 ?src? 目錄下的 ?app.js?，在 Taro 中使用 React，入口組件必須導出一個 React 組件，在入口組件中我們可以設(shè)置全局狀態(tài)或訪問小程序入口實例的生命周期：

importReact,{Component}from'react'
// 假設(shè)我們要使用 Redux
import{Provider}from'react-redux'
import configStore from'./store'
import'./app.css'
const store = configStore()
classAppextendsComponent{
  componentDidMount (){}
// 對應(yīng) onShow
  componentDidShow (){}
// 對應(yīng) onHide
  componentDidHide (){}
// 對應(yīng) onError
  componentDidCatchError (){}
  render (){
// 在入口組件不會渲染任何內(nèi)容，但我們可以在這里做類似于狀態(tài)管理的事情
return(
<Provider store={store}>
{this.props.children}/* this.props.children 是將要被渲染的頁面 */
</Provider>
)
}
}
exportdefaultApp

對于一個入口文件(例如?app.jsx?)而言，我們可以新增一個 ?app.config.js? 的文件進行全局配置，?app.config.js? 的默認導出就是全局配置，配置規(guī)范基于微信小程序的全局配置進行制定，所有平臺進行統(tǒng)一:

// app.config.js
exportdefault{
  pages:[
'pages/index/index'
],
  window:{
    backgroundTextStyle:'light',
    navigationBarBackgroundColor:'#fff',
    navigationBarTitleText:'WeChat',
    navigationBarTextStyle:'black'
}
}

組件生命周期

onLaunch(options)

在微信/百度/字節(jié)跳動/支付寶小程序中這一生命周期方法對應(yīng) app 的 ?onLaunch?

在此生命周期中通過 ?getCurrentInstance().router.params?，可以訪問到程序初始化參數(shù)。

componentWillMount()

監(jiān)聽程序初始化，初始化完成時觸發(fā)（全局只觸發(fā)一次）

參數(shù)格式如下

其中，場景值 scene，在微信小程序和百度小程序中存在區(qū)別，請分別參考 微信小程序文檔 和 百度小程序文檔

來源信息 referrerInfo 的數(shù)據(jù)結(jié)構(gòu)如下

componentDidMount()

頁面初次渲染完成時觸發(fā)，一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互。此生命周期可以無法訪問 ?getCurrentInstance().router?。此生命周期可以訪問 Taro DOM 并且更改 DOM 或添加事件，但無法通過 ?Taro.createSelectorQuery? 查找小程序 DOM。

componentDidShow(options)

在微信/百度/字節(jié)跳動/支付寶小程序中這一生命周期方法對應(yīng) ?onShow?，在 H5/RN 中同步實現(xiàn)

程序啟動，或從后臺進入前臺顯示時觸發(fā)，微信小程序中也可以使用 ?Taro.onAppShow? 綁定監(jiān)聽

在此生命周期中通過 ?getCurrentInstance().router.params?，可以訪問到程序初始化參數(shù)。

參數(shù)與 ?componentWillMount? 中獲取的基本一致，但百度小程序中補充兩個參數(shù)如下

componentDidHide()

在微信/百度/字節(jié)跳動/支付寶小程序中這一生命周期方法對應(yīng) ?onHide?，在 H5/RN 中同步實現(xiàn)

程序從前臺進入后臺時觸發(fā)，微信小程序中也可以使用 ?Taro.onAppHide? 綁定監(jiān)聽

componentDidCatchError(String error)

在微信/百度/字節(jié)跳動/支付寶小程序中這一生命周期方法對應(yīng) ?onError?，H5/RN 中尚未實現(xiàn)

程序發(fā)生腳本錯誤或 API 調(diào)用報錯時觸發(fā)，微信小程序中也可以使用 ?Taro.onError? 綁定監(jiān)聽

componentDidNotFound(Object)

在微信/字節(jié)跳動小程序中這一生命周期方法對應(yīng) ?onPageNotFound?，其他端尚未實現(xiàn)微信小程序中，基礎(chǔ)庫 1.9.90 開始支持

程序要打開的頁面不存在時觸發(fā)，微信小程序中也可以使用 ?Taro.onPageNotFound? 綁定監(jiān)聽

參數(shù)如下

頁面組件

每一個 Taro 應(yīng)用都至少包括一個頁面組件，頁面組件可以通過 Taro 路由進行跳轉(zhuǎn)，也可以訪問小程序頁面的生命周期：

importReact,{Component}from'react'
import{View,Button,Text}from'@tarojs/components'
classIndexextendsComponent{
    config ={
    navigationBarTitleText:'首頁'
}
// 對應(yīng) onShow
  componentDidShow (){}
// 對應(yīng) onHide
  componentDidHide (){}
// 對應(yīng) onPullDownRefresh，除了 componentDidShow/componentDidHide 之外，
// 所有頁面生命周期函數(shù)名都與小程序相對應(yīng)
  onPullDownRefresh (){
},
// 對應(yīng) onPullDownRefresh
  onReachBottom (){
},
  componentWillUnmount (){}
  componentDidShow (){}
  componentDidHide (){}
  render (){
return(
<View className='index'>
</View>
)
}
}
exportdefaultIndex

配置文件

和入口組件一樣，對于一個頁面文件(例如?./pages/index/index.jsx?)而言，我們可以新增一個 ?./pages/index/index.config.js? 的文件進行頁面配置，?index.config.js? 的默認導出就是頁面配置:

// ./pages/index/index.jsx
exportdefault{
  navigationBarTitleText:'首頁'
}

生命周期

onReady()

頁面首次渲染完畢時執(zhí)行，此生命周期在小程序端對應(yīng)小程序頁面的 ?onReady? 生命周期。從此生命周期開始可以使用 ?createCanvasContext? 或 ?createselectorquery? 等 API 訪問真實 DOM。

在可以非頁面組件中，可以使用 Taro 內(nèi)置的 消息機制 訪問頁面組件的 ?onReady()? 生命周期：

import{ eventCenter, getCurrentInstance }from'@tarojs/taro'
classTestextendsReact.Component{
  componentDidMount (){
    eventCenter.once(getCurrentInstance().router.onReady,()=>{
const query =Taro.createSelectorQuery()
      query.select('#only').boundingClientRect()
      query.exec(res =>{
        console.log(res,'res')
})
      console.log('onReady')
})
}
  render (){
return(
<View id="only">
</View>
)
}
}

onLoad(options)

頁面創(chuàng)建時執(zhí)行，此生命周期在小程序端對應(yīng)小程序頁面的 ?onLoad? 生命周期。此生命周期可以訪問 ?getCurrentInstance().router?。

componentWillMount()

頁面加載時觸發(fā)，一個頁面只會調(diào)用一次，此時頁面 DOM 尚未準備好，還不能和視圖層進行交互

componentDidMount()

頁面初次渲染完成時觸發(fā)，一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互。此生命周期可以訪問 ?getCurrentInstance().router?。此生命周期可以訪問 Taro DOM 并且更改 DOM 或添加事件，但無法通過 ?Taro.createSelectorQuery? 查找小程序 DOM。

shouldComponentUpdate(nextProps, nextState)

頁面是否需要更新，返回 false 不繼續(xù)更新，否則繼續(xù)走更新流程

componentWillUpdate(nextProps, nextState)

頁面即將更新

componentDidUpdate(prevProps, prevState)

頁面更新完畢

componentWillUnmount()

頁面卸載時觸發(fā)，如 redirectTo 或 navigateBack 到其他頁面時

componentDidShow()

頁面顯示/切入前臺時觸發(fā)

componentDidHide()

頁面隱藏/切入后臺時觸發(fā)， 如 navigateTo 或底部 tab 切換到其他頁面，小程序切入后臺等

在以上所有的生命周期方法中，都可以通過 ?getCurrentInstance().router.params? 獲取打開當前頁面路徑中的參數(shù)。

頁面事件處理函數(shù)

在小程序中，頁面還有在一些專屬的事件處理函數(shù)，如下

onPullDownRefresh()

監(jiān)聽用戶下拉刷新事件

• 需要在全局配置的 window 選項中或頁面配置中開啟 enablePullDownRefresh
• 可以通過 Taro.startPullDownRefresh 觸發(fā)下拉刷新，調(diào)用后觸發(fā)下拉刷新動畫，效果與用戶手動下拉刷新一致。
• 當處理完數(shù)據(jù)刷新后，Taro.stopPullDownRefresh 可以停止當前頁面的下拉刷新

onReachBottom()

監(jiān)聽用戶上拉觸底事件

• 可以在全局配置的 window 選項中或頁面配置中設(shè)置觸發(fā)距離 onReachBottomDistance
• 在觸發(fā)距離內(nèi)滑動期間，本事件只會被觸發(fā)一次

onPageScroll(Object)

監(jiān)聽用戶滑動頁面事件

Object 參數(shù)說明：

注意：請只在需要的時候才在 page 中定義此方法，不要定義空方法。以減少不必要的事件派發(fā)對渲染層-邏輯層通信的影響。注意：請避免在 onPageScroll 中過于頻繁的執(zhí)行 this.setState() 等引起邏輯層-渲染層通信的操作。尤其是每次傳輸大量數(shù)據(jù)，會影響通信耗時。

onShareAppMessage(Object)

監(jiān)聽用戶點擊頁面內(nèi)轉(zhuǎn)發(fā)按鈕（Button 組件 openType=’share’）或右上角菜單“轉(zhuǎn)發(fā)”按鈕的行為，并自定義轉(zhuǎn)發(fā)內(nèi)容。

注意：只有定義了此事件處理函數(shù)，右上角菜單才會顯示“轉(zhuǎn)發(fā)”按鈕

Object 參數(shù)說明：

此事件需要 return 一個 Object，用于自定義轉(zhuǎn)發(fā)內(nèi)容，返回內(nèi)容如下：

自定義轉(zhuǎn)發(fā)內(nèi)容

示例代碼

exportdefaultclassIndexextendsComponent{
  onShareAppMessage (res){
if(res.from==='button'){
// 來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕
      console.log(res.target)
}
return{
      title:'自定義轉(zhuǎn)發(fā)標題',
      path:'/page/user?id=123'
}
}
  render (){
return(
<View className='index'>
<Text>1</Text>
</View>
)
}
}

onResize(object)

只有微信小程序支持基礎(chǔ)庫 2.4.0 開始支持

小程序屏幕旋轉(zhuǎn)時觸發(fā)。詳見 響應(yīng)顯示區(qū)域變化

onTabItemTap(Object)

微信小程序中，基礎(chǔ)庫 1.9.0 開始支持

點擊 tab 時觸發(fā)

Object 參數(shù)說明：

componentWillPreload()

目前只有微信小程序支持

預加載鉤子

onTitleClick()

只有支付寶小程序支持，基礎(chǔ)庫 1.3.0 開始支持

點擊標題觸發(fā)

onOptionMenuClick()

只有支付寶小程序支持，基礎(chǔ)庫 1.3.0 開始支持

點擊導航欄額外圖標觸發(fā)

onPopMenuClick()

只有支付寶小程序支持，基礎(chǔ)庫 1.11.0 開始支持

暫無說明

onPullIntercept()

只有支付寶小程序支持，基礎(chǔ)庫 1.3.0 開始支持

下拉截斷時觸發(fā)

H5 暫時沒有同步實現(xiàn) onReachBottom 、 onPageScroll 這兩個事件函數(shù)，可以通過給 window 綁定 scroll 事件來進行模擬，而 onPullDownRefresh 下拉刷新則暫時只能用 ScrollView 組件來代替了。

頁面事件函數(shù)各端支持程度如下

以上成員方法在 Taro 的頁面中同樣可以使用，書寫同名方法即可，不過需要注意的，目前暫時只有小程序端支持（支持程度如上）這些方法，編譯到 H5/RN 端后這些方法均會失效。

內(nèi)置組件/Props

Taro 中使用 React，內(nèi)置組件遵循小程序組件規(guī)范，所有內(nèi)置組件都必須從 ?@tarojs/components? 引入，組件的 Props 遵從大駝峰式命名規(guī)范：

Taro

import{View}from'@tarojs/components'
<View hoverClass='test'/>

對應(yīng)小程序:

<viewhover-class=''/>

事件

在 Taro 中事件遵從小駝峰式命名規(guī)范，所有內(nèi)置事件名以 ?on? 開頭，在事件處理函數(shù)中第一個參數(shù)是事件本身，可以通過調(diào)用 ?stopPropagation? 來阻止冒泡。

functionComp(){
// 只有 onClick 對應(yīng) bindtap
// 其余內(nèi)置事件名
function clickHandler (e){
    e.stopPropagation()// 阻止冒泡
}
function scrollHandler (){
//
}
return<ScrollView onClick={clickHandler} onScroll={scrollHandler}/>
}

其它限制

由于小程序不支持動態(tài)引入，因此小程序中無法使用 ?React.lazy? API。