摘要：主要從以下幾個(gè)方面對比下和微信小程序生命周期小程序頁面加載時(shí)觸發(fā)。數(shù)據(jù)綁定小程序中的動(dòng)態(tài)數(shù)據(jù)均來自對應(yīng)的。例如顯示與隱藏元素小程序在微信小程序中使用和來控制組件的顯示與隱藏。

主要從以下幾個(gè)方面對比下react和微信小程序

react

小程序
onLoad: 頁面加載時(shí)觸發(fā)。一個(gè)頁面只會(huì)調(diào)用一次，可以在onload的參數(shù)options中獲取打開當(dāng)前頁面路徑中的參數(shù)。
onReady: 頁面初次渲染完成時(shí)觸發(fā)。一個(gè)頁面只會(huì)調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。注意：對界面內(nèi)容進(jìn)行設(shè)置的API如wx.setNavigationBarTitle，請?jiān)趏nReady之后進(jìn)行。
onShow: 頁面顯示/切入前臺(tái)時(shí)觸發(fā)。
onHide: 頁面隱藏/切入后臺(tái)時(shí)觸發(fā)。如navigateTo或底部tab切換到其他頁面，小程序切入后臺(tái)等。
onUnload: 頁面卸載時(shí)觸發(fā)。如redirectTo或navigateBack到其他頁面時(shí)。

Page.prototype.setData(Object data, Function callback)

   setData函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步），同時(shí)改變對應(yīng)的this.data的值（同步）。

注意：

直接修改this.data而不調(diào)用this.setData是無法改變頁面的狀態(tài)的，還會(huì)造成數(shù)據(jù)不一致。

僅支持設(shè)置可JSON化的數(shù)據(jù)。

單次設(shè)置的數(shù)據(jù)不能超過1024kb，盡量避免一次設(shè)置過多的數(shù)據(jù)。

不要把data中任何一項(xiàng)的value設(shè)為undefined，否則這一項(xiàng)將不被設(shè)置并可能遺留一些潛在問題。

數(shù)據(jù)請求
在頁面加載請求數(shù)據(jù)時(shí)，在小程序中一般會(huì)在onLoad或者onShow中請求數(shù)據(jù)。

react

小程序
WXML中的動(dòng)態(tài)數(shù)據(jù)均來自對應(yīng)Page的data。數(shù)據(jù)綁定使用Mustache（雙大括號）將變量包起來。

注意：
（1）不要直接寫hidden=’false’，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成boolean類型后代表真值。
（2）花括號和引號之間如果有空格，將最終被解析成為字符串。

   
       {{item}}
   

等同于

   {{item}}

可以在{{}}內(nèi)進(jìn)行簡單的運(yùn)算，支持的運(yùn)算有：
(1) 三元運(yùn)算

(2) 算數(shù)運(yùn)算
{{a+b}}+{{c}}+d
(3) 邏輯判斷
5}}’>
(4) 字符串運(yùn)算

   {{"hello" + name}}

(5) 數(shù)據(jù)路勁運(yùn)算
可以直接讀取data中的屬性值
{{ object.name }}
如果想在wxml中進(jìn)行復(fù)雜一點(diǎn)的邏輯運(yùn)算可以借助于wxs

react

小程序
在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item

   
       {{index}}: {{item}}
   

使用wx:for-item可以指定數(shù)組當(dāng)前元素的變量名，
使用wx:for-index可以指定數(shù)組當(dāng)前下標(biāo)的變量名。

       {{ idx }}: {{ itemName’}}

也可以將wx:for用在標(biāo)簽上，以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。例如：

   {{index}}: {{item}}

react

小程序
在微信小程序中使用wx:if 和hidden來控制組件的顯示與隱藏。
wx:if中的模塊也可能包含數(shù)據(jù)綁定，所以當(dāng)wx:if的條件值切換時(shí)，框架有一個(gè)局部渲染的過程，因?yàn)樗麜?huì)確保條件塊在切換時(shí)銷毀或重新渲染。 同時(shí)wx:if是惰性的，如果初始渲染條件是false，框架什么也不做，在條件第一次變成真的時(shí)候才開始局部渲染。
hidden：組件始終會(huì)被渲染，只是簡單的控制它的顯示與隱藏。
wx:if有更高的切換消耗，hidden有更高的初始渲染消耗。因此如果需要頻繁切換的情境下，用hidden更好，如果在運(yùn)行時(shí)條件不大可能改變則使用wx:if更好。

事件是視圖層到邏輯層的通訊方式。
事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。
事件對象可以攜帶額外信息，如id, dataset,touches。

react

小程序
事件的綁定和冒泡
在小程序中，事件綁定以key、value的形式，[key] = [value] key使用bind + event或者catch + event的形式，value 是一個(gè)字符串，需要在page中定義同名函數(shù)，不然觸發(fā)事件時(shí)會(huì)報(bào)錯(cuò)。
事件

bind和 catch的區(qū)別：
bind事件綁定不會(huì)阻止冒泡事件向上冒泡
catch事件綁定可以阻止冒泡事件向上冒泡。

事件的捕獲階段
觸摸類事件支持捕獲階段，捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達(dá)節(jié)點(diǎn)的順序與冒泡階段恰好相反。需要在捕獲階段監(jiān)聽事件時(shí)，可以采用capture-bind、capture-catch 關(guān)鍵字，后者將終端捕獲階段和取消冒泡階段。

react

小程序
取值

       this.data.object

設(shè)置值

       this.setData({object});

通過setData進(jìn)行改變this.data中的值，從而改變view層的顯示

react
通過 bind 方式向監(jiān)聽函數(shù)傳參，在類組件中定義的監(jiān)聽函數(shù)，事件對象 e 要排在所傳遞參數(shù)的后面

小程序

在小程序不能直接給方法傳遞參數(shù)，必須通過 data-xx 的形式進(jìn)行傳遞， 然后在方法中通過 event.currentTarget.dataset.xx進(jìn)行獲取

說明：在aa組件(aa.js)中有一個(gè)bb組件(bb.js)

在react中
（1） 父組件 ---> 子組件
//aa.js 存入

//bb.js 取出

備注：需要保持名字一致

      
（2） 子組件 ---> 父組件
//aa.js

//bb.js

在小程序中
（1） 父組件 ---> 子組件

   //aa.js 存入
   

//bb.js  使用

小程序中是直接使用，跟在data中定義的變量一樣。

（2） 子組件 ---> 父組件
//aa.js

//bb.js

備注：不管是在react還是在小程序中，子組件到父組件的數(shù)據(jù)傳遞都是通過回調(diào)函數(shù)獲得的