关于taro在微信小程序下函数组件多次执行问题

最新推荐文章于 2023-03-08 08:30:00 发布
最新推荐文章于 2023-03-08 08:30:00 发布
阅读量1.5k 收藏
点赞数
分类专栏： 前端 taro 小程序 文章标签： taro 跨平台 微信小程序 小程序 前端 react 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/htxhtx123/article/details/107334819
版权

今天和大家聊一聊taro在微信小程序下函数组件多次执行问题

关于taro和小程序

首先taro是一个针对多端小程序的编译框架。

对于微信小程序来说，taro的源码最终会编译成微信小程序可执行的代码。

在这里插入图片描述

因此对于使用taro进行开发来说，既会受到小程序的约束，又能利用小程序的优势

小程序初始数据

对于小程序来说，可以通过data进行数据绑定，为页面模板提供初始数据。

这种方式能够更有效的提升初始渲染的效率。

但是对于react来说，组件的初始状态来自于组件的构造函数中的初始state或者函数组件的usestate。

这就意味使用react语法的taro，在将react组件转换为小程序自定义组件时，需要多运行一次构造函数及render（对于类组件）或者函数组件，以产生小程序组件的data

对应的taro中的源码如下

最低0.47元/天 解锁文章
xinyue_htx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【taro react】---- h5跳转后生命周期多次执行
止于至善
05-06 541
1. 问题场景 从上图可以看到，进入页面同一个接口执行了两次【当然这个次数不是固定的，会出现三次也会出现一次】，检查了页面代码，只在onShow生命周期请求了一次接口！ 2. 问题原因 测试实例1：搜索参数name=123，正常 http://localhost:10086/#/pages/goodsList/goodsList?name=123 测试实例2：搜索参数name=a，正常 http://localhost:10086/#/pages/goodsList/goodsList?name=
按钮防止多次点击
weixin_43789753的博客
07-15 387
防止按钮在短时间内多次点击，多次触发事件 <button bindtap="toGetWithdraw" >确定</button> //点击确定按键 toGetWithdraw:function(){ var that=this; if(that.data.showis==true){ that.zhifu(); that.setData({
taro Input 聚焦两次
qq_38427709的博客
09-28 367
taro focus 多次弹框
避免重复点击的逻辑
吞石鱼的博客
08-19 862
有些时候，一个onclick触发类型事件在多次点击后会造成程序的错误显示，或者多次调用某个响应事件。那么我们如何来应对多次触发所带来的重复响应。 我们用一段伪代码来实现逻辑。 var flag=true; obj.onclick=function(){ if(flag){ //这里写响应事件的代码 console.log('点击并执行！'); //当正确响应后 ，设...
防止短时间内多次点击的方法ClickEffectUtil
宋伟的专栏
04-29 1728
工具类ClickEffectUtil可用于判断两次点击事件的时间间隔是否过短，具体代码如下： /** * 防多次点击 * */ public class ClickEffectUtil { private static long lastClickTime = 0; public static boolean isFastDoubleClick() { long time = Sy
基于taro微信小程序环形进度条
04-15
【标题】：“基于Taro微信小程序的环形进度条实现详解” 在开发微信小程序时，我们经常需要展示各种进度信息，环形进度条作为一种视觉效果良好、信息传递直观的组件，被广泛应用于加载状态、健康指标等场景。本文将...
基于 Taro 框架开发的一款在线云打印微信小程序源码.zip
06-06
这意味着开发者或学习者可以通过分析和修改这些源码，了解如何在微信小程序中集成云打印服务，或者在此基础上进行二次开发。 【标签解析】 1. **源码软件**：表明这个压缩包提供的是一套完整的软件源代码，可供...
微信小程序实现简单评论功能
10-17
在微信小程序中实现简单的评论功能，主要涉及到以下几个关键知识点： 1. **WXML结构**：WXML是微信小程序的标记语言，用于构建用户界面。在示例中，我们看到了一个简单的布局，包括一个显示评论数量的视图、一个...
猫眼电影Taro微信小程序React.zip
最新发布
09-30
猫眼电影Taro微信小程序React项目是一个基于Taro框架开发的微信小程序应用，主要用于提供电影信息查询、购票等服务。Taro是一款开源的多端开发框架，它允许开发者使用React语法编写代码，然后将这些代码转换成不同...
手把手教你用Taro框架写一个图像处理类微信小程序。
05-29
Taro 是一个开源的多端开发框架，它允许开发者编写一次代码，就能运行在微信小程序、H5、React Native等多个平台上。结合TypeScript的强类型特性，我们可以创建更稳定且易于维护的项目。 首先，让我们了解Taro的...
支付宝小程序-报错 This can happen when a component repeatedly calls setData inside didUpdate. We limits the
qq_39920234的博客
12-31 502
问题产生： 1.a页面 跳转 b页面 b页面赋值到 a页面里 2.场景更新某个组件的数据进行的业务处理 didupdate/deriveDataFromProps 报错： This can happen when a component repeatedly calls setData inside didUpdate. We limits the number of nested updates to prevent infinite loops. 原因： 1.组件内部调用 this.setDa
React利用Hook实现生命周期（需要清除的 effect，即只执行一次）
热门推荐
qq_40239859的博客
06-21 1万+
使用useEffect时，有些可能需要清楚effect的副作用，即类似获取后台数据这样的功能只需要获取一次就可以了。官方文档是这样写的 import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState...
Taro 实现购物车 点击修改商品数量 阻止事件冒泡
Kotoba209_的博客
03-17 716
场景描述： 使用：Taro框架、 TaroUi框架组件：(InputNumber 输入框)、 小程序原生组件(Checkbox) 问题： 购物车商品展示实现一般都是多选框包裹住商品信息，但这样随之而来的问题是，在点击数量增减的时候， checkbox的点击选中事件也会触发。 解决： 网上搜索Taro相关的阻止事件冒泡方法， 查到了 stopPropagation()方法， 在onClick事件上...
微信小程序第二节 —— 自定义组件。
是江迪呀 的博客
03-08 2094
想知道如何自定义微信小程序组件？以及自定义组件的常见用法？让我来告诉你！
小程序 5个生命周期函数的特点
pw12345q的博客
01-30 954
onLoad、onShow和onReady是按顺序依次执行的 onLoad与onReady在整个页面的生命周期种只会执行一次，除非这个页面被执行的onUnload卸载掉了（卸载掉了后这个页面的生命周期就结束了） onHide与onShow在一次生命周期内可能会执行多次 除了First Render第一次渲染，页面还有可能会Rerender再次渲染多次，数据更新会造成页面的重新渲染。小程序...
taro事件处理（点击事件操作）
m0_53912016的博客
06-14 7054
Checkbox PS 凡是打印错误获取不到都可以在后面加tostring来进行打印获取 使用Checkbox import { View, Text ,Checkbox} from '@tarojs/components'//我们要使用这个先把这个标签引入进来 <Checkbox></Checkbox>//然后在这个里面进行使用 使用Checkbox并监听状态 import Taro, { Component } from 'react' import { View, Tex
【taro react】----打包微信小程序后 onShow 多次执行（随着进入页面的次数在不断的累计）
止于至善
06-10 1713
2. 代码执行结果 6. 修改后的执行结果 页面组件 onShow 执行多次【累计执行】 1. 页面代码 2. 执行结果 5. 解决后执行结果
关于showModal的坑
weixin_49665042的博客
04-23 981
Taro.showModal 为消息提示框，但是里面的 content 不能写需要 setState 后的变量，因为如果写需要通 过 setState变量的话，showModal上的变量不会改变，它只会获取第一次的 state 里面的变量值，这样的话就不能实现 showModal 的实时更新！！！ 如果要实现 showModal 的效果，但是有需要里面的变量进行实时更新的话，需要自己写一个弹窗，弹窗的样式可以参考 showModal 的样式，但是由于是自己书写的弹窗，因此弹窗里面的值，会...
如何更换taro框架下的微信小程序的时间组件
04-01
1. 打开 Taro 项目，找到需要更换时间组件的页面。 2. 在页面中引入需要使用的时间组件，例如 weui-miniprogram 中的 picker 组件。...5. 最后，重新编译并运行小程序，即可看到新的时间组件已经生效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值