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到其他页面时。

   扫描二维码关注公众号，回复： 7628565 查看本文章

   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还是在小程序中，子组件到父组件的数据传递都是通过回调函数获得的