react 和小程序对比

Lowky 发布于2019-08-23 11:57 / 3051人阅读

摘要：主要从以下几个方面对比下和微信小程序生命周期小程序页面加载时触发。数据绑定小程序中的动态数据均来自对应的。例如显示与隐藏元素小程序在微信小程序中使用和来控制组件的显示与隐藏。

主要从以下几个方面对比下react和微信小程序

生命周期

react

小程序
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的值（同步）。

注意：

直接修改this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致。

仅支持设置可JSON化的数据。

单次设置的数据不能超过1024kb，尽量避免一次设置过多的数据。

不要把data中任何一项的value设为undefined，否则这一项将不被设置并可能遗留一些潜在问题。

数据请求
在页面加载请求数据时，在小程序中一般会在onLoad或者onShow中请求数据。

数据绑定

react

小程序
WXML中的动态数据均来自对应Page的data。数据绑定使用Mustache（双大括号）将变量包起来。

   Hidden

注意：
（1）不要直接写hidden=’false’，其计算结果是一个字符串，转成boolean类型后代表真值。
（2）花括号和引号之间如果有空格，将最终被解析成为字符串。

   
       {{item}}

等同于

   {{item}}

可以在{{}}内进行简单的运算，支持的运算有：
(1) 三元运算

(2) 算数运算
{{a+b}}+{{c}}+d
(3) 逻辑判断
5}}’>
(4) 字符串运算

   {{"hello" + name}}

(5) 数据路劲运算
可以直接读取data中的属性值
{{ object.name }}
如果想在wxml中进行复杂一点的逻辑运算可以借助于wxs

列表渲染

react

小程序
在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

   
       {{index}}: {{item}}

使用wx:for-item可以指定数组当前元素的变量名，
使用wx:for-index可以指定数组当前下标的变量名。

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

也可以将wx:for用在标签上，以渲染一个包含多节点的结构块。例如：

   {{index}}: {{item}}

显示与隐藏元素

react

小程序
在微信小程序中使用wx:if 和hidden来控制组件的显示与隐藏。
wx:if中的模块也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，因为他会确保条件块在切换时销毁或重新渲染。同时wx:if是惰性的，如果初始渲染条件是false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
hidden：组件始终会被渲染，只是简单的控制它的显示与隐藏。
wx:if有更高的切换消耗，hidden有更高的初始渲染消耗。因此如果需要频繁切换的情境下，用hidden更好，如果在运行时条件不大可能改变则使用wx:if更好。

事件处理

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如id, dataset,touches。

react

小程序
事件的绑定和冒泡
在小程序中，事件绑定以key、value的形式，[key] = [value] key使用bind + event或者catch + event的形式，value 是一个字符串，需要在page中定义同名函数，不然触发事件时会报错。
事件

bind和 catch的区别：
bind事件绑定不会阻止冒泡事件向上冒泡
catch事件绑定可以阻止冒泡事件向上冒泡。

事件的捕获阶段
触摸类事件支持捕获阶段，捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch 关键字，后者将终端捕获阶段和取消冒泡阶段。

数据双向绑定

react

小程序
取值

       this.data.object

设置值

       this.setData({object});

通过setData进行改变this.data中的值，从而改变view层的显示

给事件绑定传参

react
通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面

小程序

在小程序不能直接给方法传递参数，必须通过 data-xx 的形式进行传递，然后在方法中通过 event.currentTarget.dataset.xx进行获取

父子组件通信

说明：在aa组件(aa.js)中有一个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还是在小程序中，子组件到父组件的数据传递都是通过回调函数获得的

私有云海外云主机个人小程序和公司小程序的区别小程序的开发和发布小程序和公众号的区别微信小程序和云服务器沟通

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97723.html

也许你并不需要第三方小程序框架

摘要：所以在小程序出现之后，一股框架之风也很快的出现，微信小程序刚推出之后，就出现了两个比较出名的小程序开发框架，。原文地址：https://ant-move.github.io/we... 这里说的去除小程序框架其实并不严谨，因为小程序本身也算是一个框架，而且是一个功能更加完善的框架系统。在前端的概念中，我们一般说一个框架是指一个用来帮助开发者构建用户界面的框架，而小程序框架本身不仅仅包...

red_bricks 2019-08-26 10:43 评论0 收藏0
珠峰前端架构师培养计划

摘要：公司的招聘要求都提到了至少熟悉其中一种前端框架，有前端工程化与模块化开发实践经验相关字眼。我们主要从端公众号移动端小程序三大平台进行前端的技术选型，并来说说选其技术的几大优势。技术的优势互联网前端大潮后，前端出现了大框架，分别是与。 1、技术选型的背景前端技术发展日新月异，互联网上出现的新型框架也比较多，如何让新招聘的人员...

ccj659 2021-11-22 15:24 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0
【Copy攻城狮日志】借助Taro暴改Nideshop实现电商支付宝小程序雏形

摘要：接下来，在支付宝小程序开发者工具中打，不出意外能跑起来一个电商支付宝小程序雏形。地址以上是我这个攻城狮对使用转换原生微信小程序为支付宝小程序的一次微不足道的实践。 showImg(https://segmentfault.com/img/bVbnCCN?w=1818&h=931);↑开局一张图，故事全靠编↑ 从一个需求说起作为底层的程序猿，哦不，我连猿都算不上，混的好的叫码神，混得一...

gnehc 2019-08-23 14:54 评论0 收藏0