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

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

react

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

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

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

注意：

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

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

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

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

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

react

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

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

   
       {{item}}
   

等同于

   {{item}}

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

事件是視圖層到邏輯層的通訊方式。
事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。
事件對(duì)象可以攜帶額外信息，如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)聽(tīng)事件時(shí)，可以采用capture-bind、capture-catch 關(guān)鍵字，后者將終端捕獲階段和取消冒泡階段。

react

小程序
取值

       this.data.object

設(shè)置值

       this.setData({object});

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

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

小程序

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

說(shuō)明：在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ù)傳遞都是通過(guò)回調(diào)函數(shù)獲得的