react 和 小程序 對比

原文鏈接：https://segmentfault.com/a/1190000016383077

目錄

生命週期

數據綁定

列表渲染

顯示與隱藏元素

事件處理

數據雙向綁定

給事件綁定傳參

父子組件通信

---

要從以下幾個方面對比下react和微信小程序

生命週期

1. react

2. 小程序
   onLoad: 頁面加載時觸發。一個頁面只會調用一次，可以在onload的參數options中獲取打開當前頁面路徑中的參數。
   onReady: 頁面初次渲染完成時觸發。一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。注意：對界面內容進行設置的API如wx.setNavigationBarTitle，請在onReady之後進行。
   onShow: 頁面顯示/切入前臺時觸發。
   onHide: 頁面隱藏/切入後臺時觸發。如navigateTo或底部tab切換到其他頁面，小程序切入後臺等。
   onUnload: 頁面卸載時觸發。如redirectTo或navigateBack到其他頁面時。

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

   setData函數用於將數據從邏輯層發送到視圖層（異步），同時改變對應的this.data的值（同步）。

   注意：

   1. 直接修改this.data而不調用this.setData是無法改變頁面的狀態的，還會造成數據不一致。
   2. 僅支持設置可JSON化的數據。
   3. 單次設置的數據不能超過1024kb，儘量避免一次設置過多的數據。
   4. 不要把data中任何一項的value設爲undefined，否則這一項將不被設置並可能遺留一些潛在問題。

數據請求
在頁面加載請求數據時，在小程序中一般會在onLoad或者onShow中請求數據。

數據綁定

1. react

2. 小程序
   WXML中的動態數據均來自對應Page的data。數據綁定使用Mustache（雙大括號）將變量包起來。

   <view hidden=“{{false}}”>Hidden</view>

   注意：
   （1）不要直接寫hidden=’false’，其計算結果是一個字符串，轉成boolean類型後代表真值。
   （2）花括號和引號之間如果有空格，將最終被解析成爲字符串。

      <view  wx:for=’{{[1, 2, 3]}}  ’>
          {{item}}
      </view>

   等同於
   <view wx:for=’{{[1, 2, 3]+’ ’}}’>

   {{item}}

   </view>
   可以在{{}}內進行簡單的運算，支持的運算有：
   (1) 三元運算
   <view hidden=“{{flag?true:false}}”>Hidden</view>
   (2) 算數運算
   <view>{{a+b}}+{{c}}+d</view>
   (3) 邏輯判斷
   <view wx:if=’{{length>5}}’></view>
   (4) 字符串運算

   <view>{{"hello" + name}}</view>

   (5) 數據路勁運算
   可以直接讀取data中的屬性值
   <view>{{ object.name }}</view>
   如果想在wxml中進行復雜一點的邏輯運算可以藉助於wxs
   

列表渲染

1. react

2. 小程序
   在組件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的數據重複渲染該組件。默認數組的當前項的下標變量名默認爲index，數組當前項的變量名默認爲item

      <view wx:for=’{{array}}’>
          {{index}}: {{item}}
      </view>

   使用wx:for-item可以指定數組當前元素的變量名，
   使用wx:for-index可以指定數組當前下標的變量名。
   <view wx:for=’{{array}}’ wx:for-index=’{{idx}}’ wx:for-item=’{{ itemName’}}’ >

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

   </view>

   也可以將wx:for用在<block/>標籤上，以渲染一個包含多節點的結構塊。例如：
   <block wx:for=’{{array}}’>

   <view>{{index}}: {{item}}</view>

   </block>
   

顯示與隱藏元素

1. react
2. 小程序
   在微信小程序中使用wx:if 和hidden來控制組件的顯示與隱藏。
   wx:if中的模塊也可能包含數據綁定，所以當wx:if的條件值切換時，框架有一個局部渲染的過程，因爲他會確保條件塊在切換時銷燬或重新渲染。 同時wx:if是惰性的，如果初始渲染條件是false，框架什麼也不做，在條件第一次變成真的時候纔開始局部渲染。
   hidden：組件始終會被渲染，只是簡單的控制它的顯示與隱藏。
   wx:if有更高的切換消耗，hidden有更高的初始渲染消耗。因此如果需要頻繁切換的情境下，用hidden更好，如果在運行時條件不大可能改變則使用wx:if更好。

事件處理

事件是視圖層到邏輯層的通訊方式。
事件可以將用戶的行爲反饋到邏輯層進行處理。
事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
事件對象可以攜帶額外信息，如id, dataset,touches。

1. react
2. 小程序
   事件的綁定和冒泡
   在小程序中，事件綁定以key、value的形式，[key] = [value] key使用bind + event或者catch + event的形式，value 是一個字符串，需要在page中定義同名函數，不然觸發事件時會報錯。
   <view bindtab = ‘changehandle’>事件</view>

   bind和 catch的區別：
   bind事件綁定不會阻止冒泡事件向上冒泡
   catch事件綁定可以阻止冒泡事件向上冒泡。

   事件的捕獲階段
   觸摸類事件支持捕獲階段，捕獲階段位於冒泡階段之前，且在捕獲階段中，事件到達節點的順序與冒泡階段恰好相反。需要在捕獲階段監聽事件時，可以採用capture-bind、capture-catch 關鍵字，後者將終端捕獲階段和取消冒泡階段。

數據雙向綁定

1. react

2. 小程序
   取值

   this.data.object

   設置值

   this.setData({object});

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

給事件綁定傳參

1. react
   通過 bind 方式向監聽函數傳參，在類組件中定義的監聽函數，事件對象 e 要排在所傳遞參數的後面

1. 小程序

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

父子組件通信

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

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

//bb.js 取出

備註：需要保持名字一致

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

//bb.js

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

      //aa.js 存入
      

//bb.js  使用

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

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

//bb.js

備註：不管是在react還是在小程序中，子組件到父組件的數據傳遞都是通過回調函數獲得的