- React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。 SuspenseSuspense是一个组件，它允许你声明一个区域，在该区域中的组件可能会异步加载。当这些组件的数据尚未准备就绪时，Suspense... React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。 SuspenseSuspense是一个组件，它允许你声明一个区域，在该区域中的组件可能会异步加载。当这些组件的数据尚未准备就绪时，Suspense...
- Jest 和 React Testing Library (RTL) 是前端开发中用于测试 React 应用的首选工具。Jest 是一个功能丰富的JavaScript测试框架，而React Testing Library 是一种提倡以用户角度编写测试的库，它鼓励测试组件的行为而不是内部实现细节。 安装和配置首先，确保你已经安装了react, react-dom, jest, @testing... Jest 和 React Testing Library (RTL) 是前端开发中用于测试 React 应用的首选工具。Jest 是一个功能丰富的JavaScript测试框架，而React Testing Library 是一种提倡以用户角度编写测试的库，它鼓励测试组件的行为而不是内部实现细节。 安装和配置首先，确保你已经安装了react, react-dom, jest, @testing...
- 1. 创建项目通过create-next-app脚手架创建一个新的Next.js项目：npx create-next-app my-appcd my-app 2. 自动SSR在Next.js中，每个.js或.jsx文件的组件都会被自动处理为SSR页面。例如，创建一个pages/index.js文件：// pages/index.jsimport React from 'react';fun... 1. 创建项目通过create-next-app脚手架创建一个新的Next.js项目：npx create-next-app my-appcd my-app 2. 自动SSR在Next.js中，每个.js或.jsx文件的组件都会被自动处理为SSR页面。例如，创建一个pages/index.js文件：// pages/index.jsimport React from 'react';fun...
- 使用React框架运行在Android环境上近年来，前端开发领域迅速发展，各种框架和工具层出不穷。React框架作为其中的一员，以其优雅的设计和高效的性能，受到了广大开发者的青睐。在传统的Web开发中，React主要用于构建用户界面，但随着移动应用的兴起，我们也可以使用React框架来开发运行在Android环境上的应用程序。准备工作在开始使用React框架开发Android应用之前，我们需... 使用React框架运行在Android环境上近年来，前端开发领域迅速发展，各种框架和工具层出不穷。React框架作为其中的一员，以其优雅的设计和高效的性能，受到了广大开发者的青睐。在传统的Web开发中，React主要用于构建用户界面，但随着移动应用的兴起，我们也可以使用React框架来开发运行在Android环境上的应用程序。准备工作在开始使用React框架开发Android应用之前，我们需...
- 最近在学习React Native跨平台开发，从零开始如何开发第一个基础应用并打包发布： 1. 环境准备安装Node.js安装React Native CLI设置Android或iOS开发环境（取决于你想要支持的平台） 2. 创建新项目 使用React Native CLI创建一个新的项目： npx react-native init MyProject 3. 检查项目结构 新项目会包含... 最近在学习React Native跨平台开发，从零开始如何开发第一个基础应用并打包发布： 1. 环境准备安装Node.js安装React Native CLI设置Android或iOS开发环境（取决于你想要支持的平台） 2. 创建新项目 使用React Native CLI创建一个新的项目： npx react-native init MyProject 3. 检查项目结构 新项目会包含...
- useState和useContext深度解析React Hooks 彻底改变了React组件的状态管理和功能复用方式，使得函数组件也能拥有类组件的功能。 useState：函数组件的状态管理 简介：useState是React中最基础的Hook，它允许我们在函数组件中添加状态。useState是React提供的一个内置Hook，用于在函数组件中添加局部状态。它接受一个初始值作为参数，返回... useState和useContext深度解析React Hooks 彻底改变了React组件的状态管理和功能复用方式，使得函数组件也能拥有类组件的功能。 useState：函数组件的状态管理 简介：useState是React中最基础的Hook，它允许我们在函数组件中添加状态。useState是React提供的一个内置Hook，用于在函数组件中添加局部状态。它接受一个初始值作为参数，返回...
- 一、前言在开发前端项目的时候，经常会遇到这样一种开发场景：多个模板页中应用的组件或者页面布局非常相似，比如较为熟悉的el-dialog、el-tooltip和el-table等页面布局。这时候就会考虑：是把它们拆分成多个不同的组件呢？还是只使用一个组件，创建足够的属性来改变不同的情况。这些解决方案都不够完美。如果拆分成多个组件，就不得不冒着如果功能变动你要在多个文件中更新它的风险。另一方面... 一、前言在开发前端项目的时候，经常会遇到这样一种开发场景：多个模板页中应用的组件或者页面布局非常相似，比如较为熟悉的el-dialog、el-tooltip和el-table等页面布局。这时候就会考虑：是把它们拆分成多个不同的组件呢？还是只使用一个组件，创建足够的属性来改变不同的情况。这些解决方案都不够完美。如果拆分成多个组件，就不得不冒着如果功能变动你要在多个文件中更新它的风险。另一方面...
- 顺手就是一套 callback业务场景在最新一期的需求中，我需要在所有的购买入口，添加"阅读购买须知"的模块。"阅读购买须知"的模块主要包括两部分内容：购买须知按钮和提示文案。提交购买时，也需要增加对应的校验：是否已经进行了阅读操作。如果未操作，给出提示且不能进行下一步操作；如果已操作，可以继续下一步操作。UI 展示效果组件化设计按照代码复用的设计理念，我将"购买须知"模块进行了组件化设计。... 顺手就是一套 callback业务场景在最新一期的需求中，我需要在所有的购买入口，添加"阅读购买须知"的模块。"阅读购买须知"的模块主要包括两部分内容：购买须知按钮和提示文案。提交购买时，也需要增加对应的校验：是否已经进行了阅读操作。如果未操作，给出提示且不能进行下一步操作；如果已操作，可以继续下一步操作。UI 展示效果组件化设计按照代码复用的设计理念，我将"购买须知"模块进行了组件化设计。...
- 一、前言ReactNative组件分为类组件和函数组件。实现ReactNative自定义组件基本流程如下：组件需要实现什么效果;组件基本逻辑是怎样的；继承Component或PureComponent实现render()方法;定义组件属性字段及其类型，以及是否必须，如不必须则默认字段值是什么;绑定点击或者触摸等事件方法，执行前需要判空;注册、调用。 二、参数传递React Native版本... 一、前言ReactNative组件分为类组件和函数组件。实现ReactNative自定义组件基本流程如下：组件需要实现什么效果;组件基本逻辑是怎样的；继承Component或PureComponent实现render()方法;定义组件属性字段及其类型，以及是否必须，如不必须则默认字段值是什么;绑定点击或者触摸等事件方法，执行前需要判空;注册、调用。 二、参数传递React Native版本...
- 一、前言在开发react-native App时，相信大家都遇到过这样的问题：当用户设置了系统的字体大小之后，导致APP布局紊乱，甚至有些内容会被切掉/隐藏，这对于用户来讲，是非常不好的用户体验。那为什么会出现这种情况呢？原因是我们在开发的时候，布局的前提是系统的字体大小设置为默认大小，所以只能保证在系统字体大小正常的情况下，我们的布局是友好的，那么，我们应该如何解决这个问题呢？今天这篇文... 一、前言在开发react-native App时，相信大家都遇到过这样的问题：当用户设置了系统的字体大小之后，导致APP布局紊乱，甚至有些内容会被切掉/隐藏，这对于用户来讲，是非常不好的用户体验。那为什么会出现这种情况呢？原因是我们在开发的时候，布局的前提是系统的字体大小设置为默认大小，所以只能保证在系统字体大小正常的情况下，我们的布局是友好的，那么，我们应该如何解决这个问题呢？今天这篇文...
- 一、前言在做RN App开发过程中离不了用户交互，在React Native中没有专门的按钮组件。为了让视图能够响应用户的点击事件，需要借助Touchablexxx组件来包裹视图。为什么说是Touchablexxx呢，因为它不只是一个组件，而是一组组件，以下四个组件都可以用来包裹视图来响应用户的点击事件。TouchableWithoutFeedback：响应用户的点击事件，如果你想在处理点... 一、前言在做RN App开发过程中离不了用户交互，在React Native中没有专门的按钮组件。为了让视图能够响应用户的点击事件，需要借助Touchablexxx组件来包裹视图。为什么说是Touchablexxx呢，因为它不只是一个组件，而是一组组件，以下四个组件都可以用来包裹视图来响应用户的点击事件。TouchableWithoutFeedback：响应用户的点击事件，如果你想在处理点...
- 概述所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图：如图，可以把组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；第三阶段：是组件卸载消亡的阶段... 概述所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图：如图，可以把组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；第三阶段：是组件卸载消亡的阶段...
- 一、前言数据持久化一直都是软件开发中重要的一个环节，几乎所有的应用都具备这项功能；什么是数据持久化呢？说白了就是数据的本地化存储，将数据存储到本地，在需要的时候进行调用。本文介绍两种在 React-Native 中比较常用的存储方式：AsyncStorage及Realm。AsyncStorage：官方使用的存储方式，类似于 iOS 中的 NSUserDefault ，区别在于，AsyncS... 一、前言数据持久化一直都是软件开发中重要的一个环节，几乎所有的应用都具备这项功能；什么是数据持久化呢？说白了就是数据的本地化存储，将数据存储到本地，在需要的时候进行调用。本文介绍两种在 React-Native 中比较常用的存储方式：AsyncStorage及Realm。AsyncStorage：官方使用的存储方式，类似于 iOS 中的 NSUserDefault ，区别在于，AsyncS...
- 一、前言ReactNative启动完成之后，就会加载jsbundle中的js代码，进入js层渲染。此篇博文重点讲解 ReactNative JS 层渲染涉及的 diff 算法。使用 React 写过 Web 和 ReactNative的，很明显感觉到：除了组件命名不一样之外，生命周期、刷新机制等几乎是完全一样的，这也就是 Facebook 所说的“learn once, write any... 一、前言ReactNative启动完成之后，就会加载jsbundle中的js代码，进入js层渲染。此篇博文重点讲解 ReactNative JS 层渲染涉及的 diff 算法。使用 React 写过 Web 和 ReactNative的，很明显感觉到：除了组件命名不一样之外，生命周期、刷新机制等几乎是完全一样的，这也就是 Facebook 所说的“learn once, write any...
- 一、前言先带大家分析2张架构图，对RN大致的运行加载过程有个印象。ReactNative系统框架图如下所示:启动流程图如下所示：在开始分析之前，先思考一个问题：为什么ReactNative能像web端一样实现跨端和热更新，同时又有接近Native的性能呢？ReactNative 的本质是在 JS 端编写 React 代码，通过 JavaScriptCore 引擎，把 JS 端编写的组件和事... 一、前言先带大家分析2张架构图，对RN大致的运行加载过程有个印象。ReactNative系统框架图如下所示:启动流程图如下所示：在开始分析之前，先思考一个问题：为什么ReactNative能像web端一样实现跨端和热更新，同时又有接近Native的性能呢？ReactNative 的本质是在 JS 端编写 React 代码，通过 JavaScriptCore 引擎，把 JS 端编写的组件和事...
上滑加载中
推荐直播
-
探秘仓颉编程语言：华为开发者空间的创新利器2025/02/22 周六 15:00-16:30
华为云讲师团
本期直播将与您一起探秘颉编程语言上线华为开发者空间后，显著提升开发效率，在智能化开发支持、全场景跨平台适配能力、工具链与生态完备性、语言简洁与高性能特性等方面展现出的独特优势。直播看点： 1.java转仓颉的小工具 2.仓颉动画三方库lottie 3.开发者空间介绍及如何在空间用仓颉编程语言开发
回顾中 -
大模型Prompt工程深度实践2025/02/24 周一 16:00-17:30
盖伦 华为云学堂技术讲师
如何让大模型精准理解开发需求并生成可靠输出？本期直播聚焦大模型Prompt工程核心技术：理解大模型推理基础原理，关键采样参数定义，提示词撰写关键策略及Prompt工程技巧分享。
去报名 -
华为云 x DeepSeek：AI驱动云上应用创新2025/02/26 周三 16:00-18:00
华为云 AI专家大咖团
在 AI 技术飞速发展之际，DeepSeek 备受关注。它凭借哪些技术与理念脱颖而出？华为云与 DeepSeek 合作，将如何重塑产品与应用模式，助力企业数字化转型？在华为开发者空间，怎样高效部署 DeepSeek，搭建专属服务器？基于华为云平台，又该如何挖掘 DeepSeek 潜力，实现智能化升级？本期直播围绕DeepSeek在云上的应用案例，与DTSE布道师们一起探讨如何利用AI 驱动云上应用创新。
去报名
热门标签