React + Taro 项目 实际书写 感受

2024-06-01 09:28

本文主要是介绍React + Taro 项目 实际书写 感受,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

之前我总结了部分react 基础 根据官网的内容 以及Taro 框架的内容

今天我试着开始写了一下页面和开发 说一下我的感受 我之前写的是vue3 今天是第一次真正根据需求做页面开发 和逻辑功能 代码的书写

主体就是开发了这个页面 

虽说这个页面 很简单 但是如果你要是第一次写 难说

1.定义变量 

看这一段代码 

我想在想设置一个变量 需要接收一下我计算的高度 就需要使用到 useState 这个 状态管理 

突然去写这个代码 你会很不习惯 的 因为之前 用的就是ref reactive 直接就定义了 直接就使用了 而这个不太一样 

2. 页面渲染执行代码

当我们想进入这个组件或者页面的时候 就执行某一个函数的时候 我们就需要使用生命周期或者监听函数 在vue 中我们之前使用的是onMounted 生命周期 

但是在react 中我们使用的是

 userEffect 钩子函数 

我们暂且就把他当我 onMounted 来看待

3. 组件的创建

虽然vue 和react 在渲染机制和 模式上不同 但是我们开发者不用去纠结这个问题 我们只需要 使用语法和逻辑去完成功能就行了

当然创建组件的文件或者 文件的都是差不多的 index.jsx 文件和 index.scss 文件

4. 父组件和子组件之间的数据交换

在 vue 中 我们使用 props 父向子组件中传递数据 emit 自定义函数 子组件向父组件传递组件 

但是在react 中其实大差不差 也是props 也是自定义函数

我们看个例子
 

这个是我的页面 首页

我们可以看到用到了Header 组件 filter 组件

 我们拿Filter 组件来说 这个问题 

我们传递了一个数组 给他 看一下Filter 组件是怎么接收的 

我们写的是函数式组件 在参数中 有tab s  以及 onTabChange 方法 都是父组件 传递过来的 所以我感觉react  让我更加理解了 父子组件之间的传值 其实和vue 是一样的 有可能写法不太一样

所以大差不差

也是有一个自定义事件 能把改变的数据 告诉父组件 父组件根据 状态 做相应的逻辑处理

目前写的其实就这些 对于我真正开始书写react 代码 其实还是不容易的 因为 太缭绕了 毕竟写了很长时间 的vue 代码 跟这个代码完全不一样 所以得多多练习

最大的感受 不是难  是感觉比vue 麻烦

这篇关于React + Taro 项目 实际书写 感受的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1020619

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

SpringBoot项目是如何启动

启动步骤 概念 运行main方法,初始化SpringApplication 从spring.factories读取listener ApplicationContentInitializer运行run方法读取环境变量,配置信息创建SpringApplication上下文预初始化上下文,将启动类作为配置类进行读取调用 refresh 加载 IOC容器,加载所有的自动配置类,创建容器在这个过程

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo