建立网站的新手看过来—淘宝小程序数据流转

摘要: 文本文档文档文件目录序言一、淘宝网网网手机上手机微信手机微信微信小程序的数据信息信息内容信息内容內容运作二、升级方式1.由父及子 #xff08;1 #xff09;官方网网网普遍式2.由子及父...

文档文件目录前言一、淘宝网网手机微信微信小程序的数据信息信息内容运行二、升級方法1.由父及子 #xff08;1 #xff09;官方网网广泛式2.由子及父(反了孟子)总结前言 最近做了许多手机微信微信小程序 #xff0c;感觉本身review之前编号难以受了 #xff0c;数据信息信息内容和文档文件目录结构都比较乱 #xff0c;因而在这里里一一篇文章里总结一些选用的…


前言

最近做了许多手机微信微信小程序 感觉本身review之前编号难以受了 数据信息信息内容和文档文件目录结构都比较乱 因而在这里里一一篇文章里总结一些选用的方法 方便快捷自身的同时 也希望能与阅读文章文章内容这一段文字的大家共勉。

一、淘宝网网手机微信微信小程序的数据信息信息内容运行

这可以参考一下淘宝网网的 官方网网文字文本文档。
[标识:內容1]
构件性命周期时间時间提醒图下列

性命周期时间時间涵数具体信息内容內容见下表

性命周期时间時间关键主要参数说明onInit无构件创建时打开deriveDataFromPropsnextProps构件创建时和升級前打开didMount无构件创建完毕时打开didUpdate(prevProps,prevData)构件升級完毕时打开didUnmount无构件删除时打开

淘宝网网/支付宝手机微信微信小程序的逻辑性性层的数据信息信息内容升級与vue的处理一些相仿 原素三d3D渲染情况下追踪数据信息信息内容借助 唯一借助的数据信息信息内容升級时 这类状况件才会重三d3D渲染。这一点还是做得想当十分好的 但是对于它的新 props 也只做了浅对比 含义是倘若你仅仅简单的用setData升級一个json总体目标里的value 那不必说构件 就现如今网页页面网页页面都不会升级。详细的升級方法我过后再写。

说复活命周期时间時间上 十分非常值得注意的是在这其中的 deriveDataFromProps方法。

deriveDataFromProps 在构件创建和升級时全是打开。在deriveDataFromProps 里能够:
访问 this.is、this.$id、this.$page 等特点
访问 this.data、this.props 等特点
访问构件 methods 中的自定特点
开启 this.setData、this.$spliceData 修改数据信息信息内容
可让用 nextProps 关键主要参数得到将要升級的 props 关键主要参数

deriveDataFromProps中的nextProps是全新升级的props 可以将其传输给初始化或者升級涵数处理数据信息信息内容并setData/setState升級网页页面网页页面 而不用在 didUpdate 时setData/setState(那般网页页面网页页面至少会打开两次didUpdate) 在一些务必快速处理并升级网页页面网页页面的地域十分作用强劲(例如画板原素拖动、倒数记时等) 一般可以节省许多特点 当然也务必在 deriveDataFromProps 做好不是是务必升級数据信息信息内容的辨别。
它相仿于 react 中的 getDerivedStateFromProps 对于它的详尽详细介绍可以参照 文中。

举例说明表明

 // 网页页面网页页面初始化涵数
 onInit () {
 this._refreshData();
 deriveDataFromProps (nextProps) {
 const {updateTime: lastTime} this.props;
 const {updateTime: nowTime} nextProps;
 // 辨别不是是务必升級 对于一些不能易打开又常常务必升級的构件,我比较钟爱给他们们传现如今时间戳
 if (lastTime ! nowTime) {
 this._refreshData(nextProps);
 // 升級数据信息信息内容涵数
 _refreshData (props this.props) {
 const {id} props;
 this.setData({id});
二、升級方法

方法很多 一共有作几个类吧。一个是顺着数据信息信息内容流(最好如此)——由父及子 一个是逆着数据信息信息内容流——由子及父。

1.由父及子 1 官方网网广泛式

具体可以参考 官方网网文字文本文档 例如

 // /pages/index/index.js 网页页面网页页面 父级
 Page({
 data: {
 id: 0,
 otherProps: {
 // ...arga
 plus() {
 this.counter.plus();
 // saveRef 方法的关键主要参数 ref 为自定构件实例 运行时由构架传输给 saveRef
 saveRef(ref) {
 // 存储自定构件实例 方便快捷以后开启
 this.counter ref;
 // 一些升級数据信息信息内容的涵数
 refreshData () {
 this.setData({
 id: 2
 !-- /pages/index/index.axml -- 
 my-component ref saveRef id {{id}} other-props {{otherProps}} / 
 button onTap plus /button 
 // /components/myComponent/myComponent.js 构件 子级
 didUpdate() {
 console.log(this.props) // 可以看到传入的关键主要参数 这儿大约是 { id : 2, otherProps: {}}
 deriveDataFromProps (nextProps) {
 const {id: lastId} this.props;
 const {id: newId} nextProps;
 console.log({lastId, newId}) // 这儿大约是 { lastId : 0, newId : 2}
 // 一些其他处理
2.由子及父(反了孟子)

后边再升級啦…

总结



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:免费建网站哪个好