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

相关文章

springboot项目如何开启https服务

《springboot项目如何开启https服务》:本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为:Linux+JDK+MariDB(MySQL)+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll