- 概述所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。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 中，我们可以使用状态管理来处理鼠标悬停事件，并根据悬停状态来控制文本的显示与隐藏。 示例代码下面是一个示例代码，演示了如何使用状态管理实现鼠标悬...
- React 是一种流行的 JavaScript 库，用于构建动态用户界面。在一个 React 应用程序中，有时需要一个按钮或链接来触发显示或隐藏一个相关的组件。这种需求可以通过使用 React 状态管理和事件处理机制来实现。在本文中，我们将介绍如何使用 React 来实现点击显示或隐藏另一个组件。我们将首先讨论如何使用 React 状态管理来控制组件的可见性，然后介绍如何使用事件处理机制来响... React 是一种流行的 JavaScript 库，用于构建动态用户界面。在一个 React 应用程序中，有时需要一个按钮或链接来触发显示或隐藏一个相关的组件。这种需求可以通过使用 React 状态管理和事件处理机制来实现。在本文中，我们将介绍如何使用 React 来实现点击显示或隐藏另一个组件。我们将首先讨论如何使用 React 状态管理来控制组件的可见性，然后介绍如何使用事件处理机制来响...
- 在 React 应用中，我们经常需要根据用户的点击事件来执行相应的操作。在某些情况下，我们需要获取用户点击元素的唯一标识符（ID），以便进行进一步的处理。本文将详细介绍如何在 React 中获取点击元素的 ID，并提供示例代码帮助你理解和应用这个功能。 使用事件处理函数在 React 中，我们可以使用事件处理函数来获取点击元素的信息。通过事件对象（event object）可以访问到点击元素... 在 React 应用中，我们经常需要根据用户的点击事件来执行相应的操作。在某些情况下，我们需要获取用户点击元素的唯一标识符（ID），以便进行进一步的处理。本文将详细介绍如何在 React 中获取点击元素的 ID，并提供示例代码帮助你理解和应用这个功能。 使用事件处理函数在 React 中，我们可以使用事件处理函数来获取点击元素的信息。通过事件对象（event object）可以访问到点击元素...
- 在 React 中，一些 HTML 元素，比如 input 和 textarea，具有 onChange 事件。onChange 事件是一个非常有用、非常常见的事件，用于捕获输入框中的文本变化。有时候，我们需要将多个参数同时传递给 onChange 事件处理函数，在本文中，我们将介绍如何实现这一目标。 单个参数传递在 React 中，通常情况下，onChange 事件处理函数接收一个 eve... 在 React 中，一些 HTML 元素，比如 input 和 textarea，具有 onChange 事件。onChange 事件是一个非常有用、非常常见的事件，用于捕获输入框中的文本变化。有时候，我们需要将多个参数同时传递给 onChange 事件处理函数，在本文中，我们将介绍如何实现这一目标。 单个参数传递在 React 中，通常情况下，onChange 事件处理函数接收一个 eve...
- 一、react篇1、react 生命周期函数• 初始化阶段：– getDefaultProps:获取实例的默认属性– getInitialState:获取每个实例的初始化状态– componentWillMount：组件即将被装载、渲染到页面上– render:组件在这里生成虚拟的 DOM 节点– componentDidMount:组件真正在被装载之后• 运行中状态：– component... 一、react篇1、react 生命周期函数• 初始化阶段：– getDefaultProps:获取实例的默认属性– getInitialState:获取每个实例的初始化状态– componentWillMount：组件即将被装载、渲染到页面上– render:组件在这里生成虚拟的 DOM 节点– componentDidMount:组件真正在被装载之后• 运行中状态：– component...
- 一、前言在前期博文《ReactNative进阶（三）：ReactNative 项目启动原理介绍》讲解了RN启动过程及原理，今天主要讲解下RN项目启动运行接口AppRegistry。 二、AppRegistry 简介每一个应用程序的运行都需要有一个入口文件或者入口函数，而在React Native 中，AppRegistry是RN应用的入口函数。AppRegistry负责注册运行React ... 一、前言在前期博文《ReactNative进阶（三）：ReactNative 项目启动原理介绍》讲解了RN启动过程及原理，今天主要讲解下RN项目启动运行接口AppRegistry。 二、AppRegistry 简介每一个应用程序的运行都需要有一个入口文件或者入口函数，而在React Native 中，AppRegistry是RN应用的入口函数。AppRegistry负责注册运行React ...
- 一、前言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...
- 6、属性节点属性节点（Attr）在DOM也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作如何操作属性节点 ? 方式一：读取：元素.属性名（注意，class属性需要使用className来读取）读取一个布尔值时，会返回true或false修改：元素.属性名 = 属性值 方式二：读取：元素.getAttribute(属性名)修改：元素.setAttribute(属性名, ... 6、属性节点属性节点（Attr）在DOM也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作如何操作属性节点 ? 方式一：读取：元素.属性名（注意，class属性需要使用className来读取）读取一个布尔值时，会返回true或false修改：元素.属性名 = 属性值 方式二：读取：元素.getAttribute(属性名)修改：元素.setAttribute(属性名, ...
- 字符串 split()可以根据正则表达式来对一个字符串进行拆分 search()可以去搜索符合正则表达式的内容第一次在字符串中出现的位置 replace()根据正则表达式替换字符串中的指定内容 match()根据正则表达式去匹配字符串中符合要求的内容 matchAll()根据正则表达式去匹配字符串中符合要求的内容(必须设置g 全局匹配)它返回的是一个迭代器 <script> ... 字符串 split()可以根据正则表达式来对一个字符串进行拆分 search()可以去搜索符合正则表达式的内容第一次在字符串中出现的位置 replace()根据正则表达式替换字符串中的指定内容 match()根据正则表达式去匹配字符串中符合要求的内容 matchAll()根据正则表达式去匹配字符串中符合要求的内容(必须设置g 全局匹配)它返回的是一个迭代器 <script> ...
- 正则表达式 正则表达式正则表达式用来定义一个规则通过这个规则计算机可以检查一个字符串是否符合规则或者将字符串中符合规则的内容提取出来正则表达式也是JS中的一个对象，所以要使用正则表达式，需要先创建正则表达式的对象new RegExp() 可以接收两个参数（字符串） 1.正则表达式 2.匹配模式 <script> let reg = new RegExp('a','i... 正则表达式 正则表达式正则表达式用来定义一个规则通过这个规则计算机可以检查一个字符串是否符合规则或者将字符串中符合规则的内容提取出来正则表达式也是JS中的一个对象，所以要使用正则表达式，需要先创建正则表达式的对象new RegExp() 可以接收两个参数（字符串） 1.正则表达式 2.匹配模式 <script> let reg = new RegExp('a','i...
上滑加载中
推荐直播
-
OpenHarmony应用开发之网络数据请求与数据解析2025/01/16 周四 19:00-20:30
华为开发者布道师、南京师范大学泰州学院副教授，硕士研究生导师，开放原子教育银牌认证讲师
科技浪潮中，鸿蒙生态强势崛起，OpenHarmony开启智能终端无限可能。当下，其原生应用开发适配潜力巨大，终端设备已广泛融入生活各场景，从家居到办公、穿戴至车载。 现在，机会敲门！我们的直播聚焦OpenHarmony关键的网络数据请求与解析，抛开晦涩理论，用真实案例带你掌握数据访问接口，轻松应对复杂网络请求、精准解析Json与Xml数据。参与直播，为开发鸿蒙App夯实基础，抢占科技新高地，别错过！
回顾中 -
Ascend C高层API设计原理与实现系列2025/01/17 周五 15:30-17:00
Ascend C 技术专家
以LayerNorm算子开发为例，讲解开箱即用的Ascend C高层API
回顾中
热门标签