- 前几天有分享过一篇react18+arco-design开发后台管理系统,今天再分享一篇react18+跨端技术electron打造桌面端OS系统应用。https://bbs.huaweicloud.com/blogs/413317electron-react-macOs 基于electron27+react18+arco.esign+zustand+axios等技术打造的一款桌面版仿华为m... 前几天有分享过一篇react18+arco-design开发后台管理系统,今天再分享一篇react18+跨端技术electron打造桌面端OS系统应用。https://bbs.huaweicloud.com/blogs/413317electron-react-macOs 基于electron27+react18+arco.esign+zustand+axios等技术打造的一款桌面版仿华为m...
- 一、概述react-native-scrollable-tab-view 标签导航组件可实现点击切换,每个 tab 可以有自己的 ScrollView,点击切换的时候可以维护自己的滚动方向。 二、使用react-native-scrollable-tab-view插件1、通过npm将插件加入项目npm install --save react-native-scrollable-tab-v... 一、概述react-native-scrollable-tab-view 标签导航组件可实现点击切换,每个 tab 可以有自己的 ScrollView,点击切换的时候可以维护自己的滚动方向。 二、使用react-native-scrollable-tab-view插件1、通过npm将插件加入项目npm install --save react-native-scrollable-tab-v...
- 一、前言项目开发过程中,需要获取设备信息,例如获取设备名称。可通过使用开源的第三方组件react-native-device-info,该组件适用于iOS和Android双平台。在ReactNative项目中可通过npm命令下载 react-native-device-info 组件依赖包:npm install --save react-native-device-info 二、Andr... 一、前言项目开发过程中,需要获取设备信息,例如获取设备名称。可通过使用开源的第三方组件react-native-device-info,该组件适用于iOS和Android双平台。在ReactNative项目中可通过npm命令下载 react-native-device-info 组件依赖包:npm install --save react-native-device-info 二、Andr...
- 一、简介第三方组件库react-native-tab-navigator是用于在场景之间切换的选项卡栏,用JS编写以提供跨平台支持。它适用于iOS和Android。该组件与React Native 0.16和更高版本兼容。外观与本地导航器略有不同,但在某些方面会更好。也是纯JavaScript。注:这是与TabNavigation不一样的,使用了ExNavigation,API和实现方式略... 一、简介第三方组件库react-native-tab-navigator是用于在场景之间切换的选项卡栏,用JS编写以提供跨平台支持。它适用于iOS和Android。该组件与React Native 0.16和更高版本兼容。外观与本地导航器略有不同,但在某些方面会更好。也是纯JavaScript。注:这是与TabNavigation不一样的,使用了ExNavigation,API和实现方式略...
- 最近一直在学习react18 hooks知识,借助vite.js构建工具创建react18项目,构建/运行编译速度杠杠滴,真香!webchat-react18:基于react18.x hooks+arco design+zustand+react-router v6等技术开发的一款仿微信web界面聊天实例项目。项目中所用到的弹窗及滚动条功能都是基于react18 hooks自定义组件实现应用... 最近一直在学习react18 hooks知识,借助vite.js构建工具创建react18项目,构建/运行编译速度杠杠滴,真香!webchat-react18:基于react18.x hooks+arco design+zustand+react-router v6等技术开发的一款仿微信web界面聊天实例项目。项目中所用到的弹窗及滚动条功能都是基于react18 hooks自定义组件实现应用...
- 最近同事突发好奇问了一个问题:React 会不会被 Vue 取代?听到这个问题,其实大脑有飞速运转想了一下,但我认为:目前 React 和 Vue 都保持着自己的独特地位,并没有明显的一个取代另一个的趋势,所以很难相互取代。既然同事问了这个问题,也想试着深入的探讨下:React:Facebook的非凡杰作React 大家都很熟悉了,它是用于构建用户界面的 JavaScript 库,Faceb... 最近同事突发好奇问了一个问题:React 会不会被 Vue 取代?听到这个问题,其实大脑有飞速运转想了一下,但我认为:目前 React 和 Vue 都保持着自己的独特地位,并没有明显的一个取代另一个的趋势,所以很难相互取代。既然同事问了这个问题,也想试着深入的探讨下:React:Facebook的非凡杰作React 大家都很熟悉了,它是用于构建用户界面的 JavaScript 库,Faceb...
- React,也称为 ReactJS,是开发人员用来构建用户界面的 JavaScript 库,它改变了 Web 开发的格局。React 是一个库,而不是许多人认为的 JavaScript 框架。框架提供了完整的结构和工具集开发应用程序。就 React 而言,它被认为是一个库,因为它专注于提供构建用户界面的声明性方法。它由 Facebook 开发,Instagram、Netflix、Twitte... React,也称为 ReactJS,是开发人员用来构建用户界面的 JavaScript 库,它改变了 Web 开发的格局。React 是一个库,而不是许多人认为的 JavaScript 框架。框架提供了完整的结构和工具集开发应用程序。就 React 而言,它被认为是一个库,因为它专注于提供构建用户界面的声明性方法。它由 Facebook 开发,Instagram、Netflix、Twitte...
- 一、概述react-native-scrollable-tab-view 标签导航组件可实现点击切换,每个 tab 可以有自己的 ScrollView,点击切换的时候可以维护自己的滚动方向。 二、使用react-native-scrollable-tab-view插件1、通过npm将插件加入项目npm install --save react-native-scrollable-tab-v... 一、概述react-native-scrollable-tab-view 标签导航组件可实现点击切换,每个 tab 可以有自己的 ScrollView,点击切换的时候可以维护自己的滚动方向。 二、使用react-native-scrollable-tab-view插件1、通过npm将插件加入项目npm install --save react-native-scrollable-tab-v...
- React 是一个流行的JavaScript库,用于构建用户界面。在 React 16.8 版本中引入了钩子(Hooks)的概念,它为函数组件提供了状态管理和其他功能。本文将着重介绍最常用的钩子之一:useState()。 useState() 简介useState() 是 React 中的一个钩子函数,用于在函数式组件中声明和使用状态。它解决了类组件中使用状态的繁琐问题,并且非常容易上手。... React 是一个流行的JavaScript库,用于构建用户界面。在 React 16.8 版本中引入了钩子(Hooks)的概念,它为函数组件提供了状态管理和其他功能。本文将着重介绍最常用的钩子之一:useState()。 useState() 简介useState() 是 React 中的一个钩子函数,用于在函数式组件中声明和使用状态。它解决了类组件中使用状态的繁琐问题,并且非常容易上手。...
- 概述所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:如图,可以把组件生命周期大致分为三个阶段:第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;第三阶段:是组件卸载消亡的阶段... 概述所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:如图,可以把组件生命周期大致分为三个阶段:第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;第三阶段:是组件卸载消亡的阶段...
- 一、前言如果需要在React组件之间进行传值,那么props属性就起到了这个作用,在React中props和state是两个非常重要的属性。state 和 props 主要区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。Note:属性是用于设置默认值,不改... 一、前言如果需要在React组件之间进行传值,那么props属性就起到了这个作用,在React中props和state是两个非常重要的属性。state 和 props 主要区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。Note:属性是用于设置默认值,不改...
- 读者对象:本文面向熟悉 JavaScript、希望学习 React 的初学者,以及希望复习 React 组件的人。概述本文介绍了 React 组件,讨论了它们的类型、创建、组成和可重用性。它进一步解释了组件如何通过“props”进行通信并使用“state”管理内部数据。最后,它探讨了 React 中的组件生命周期方法,增强了对构建动态应用程序的理解。React 是一个流行的 JavaScri... 读者对象:本文面向熟悉 JavaScript、希望学习 React 的初学者,以及希望复习 React 组件的人。概述本文介绍了 React 组件,讨论了它们的类型、创建、组成和可重用性。它进一步解释了组件如何通过“props”进行通信并使用“state”管理内部数据。最后,它探讨了 React 中的组件生命周期方法,增强了对构建动态应用程序的理解。React 是一个流行的 JavaScri...
- 一、前言在React SPA项目开发过程中,路由跳转必不可少。本篇博文主要介绍下React中路由相关知识。在React中,常用的有两个包可以实现这个需求,那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。 二、安装首先进入项目目录,使用npm安装react-router-dom:npm install react-rou... 一、前言在React SPA项目开发过程中,路由跳转必不可少。本篇博文主要介绍下React中路由相关知识。在React中,常用的有两个包可以实现这个需求,那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。 二、安装首先进入项目目录,使用npm安装react-router-dom:npm install react-rou...
- 在本文中,我们将讨论如何通过仅加载用户在任何时间点需要的 JavaScript、减少他们在页面加载时必须下载和执行的代码量以及使应用程序交互速度更快。😎 很酷不是吗?我们将使用 React.lazy 和 Suspense 来延迟加载复杂组件(例如 KendoReact 的 StockChart),直到单击按钮。了解动态导入我们可以在用户与应用程序交互时逐渐发送较小的包,而不是在初始页面加载... 在本文中,我们将讨论如何通过仅加载用户在任何时间点需要的 JavaScript、减少他们在页面加载时必须下载和执行的代码量以及使应用程序交互速度更快。😎 很酷不是吗?我们将使用 React.lazy 和 Suspense 来延迟加载复杂组件(例如 KendoReact 的 StockChart),直到单击按钮。了解动态导入我们可以在用户与应用程序交互时逐渐发送较小的包,而不是在初始页面加载...
- 在 React 应用中,当用户将鼠标悬停在某个元素上时,我们经常需要显示一些相关的文本,以提供额外的信息或交互提示。本文将详细介绍如何在 React 中实现鼠标悬停显示文本的功能,并提供示例代码帮助你理解和应用这个功能。 使用状态管理在 React 中,我们可以使用状态管理来处理鼠标悬停事件,并根据悬停状态来控制文本的显示与隐藏。 示例代码下面是一个示例代码,演示了如何使用状态管理实现鼠标悬... 在 React 应用中,当用户将鼠标悬停在某个元素上时,我们经常需要显示一些相关的文本,以提供额外的信息或交互提示。本文将详细介绍如何在 React 中实现鼠标悬停显示文本的功能,并提供示例代码帮助你理解和应用这个功能。 使用状态管理在 React 中,我们可以使用状态管理来处理鼠标悬停事件,并根据悬停状态来控制文本的显示与隐藏。 示例代码下面是一个示例代码,演示了如何使用状态管理实现鼠标悬...
上滑加载中