文章 2024-02-27 来自:开发者社区

React组件间的通信

在React中,组件间的通信可以通过以下几种方式实现: 父子组件通信: 父组件通过props向子组件传递数据或回调函数。 子组件通过props接收数据或回调函数,并在需要时调用回调函数向父组件传递数据。 // 父组件...

文章 2024-02-04 来自:开发者社区

react服务端组件

相关博客如下: Introducing Zero-Bundle-Size React Server Components – React https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components 仓库地址: ...

react服务端组件
文章 2024-02-02 来自:开发者社区

快速上手React:从概述到组件与事件处理

一、React概述React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。在线立即尝试 React点击跳转地址React框架的书写方式分为两种,一种是脚本方式(JavaScript标签引入,练习使用);一种是react脚手架方式(常用)。脚本方式步骤1 :在页面中引入....

快速上手React:从概述到组件与事件处理
文章 2024-01-30 来自:开发者社区

React 的antd-mobile 组件库,嵌套路由

React 的antd-mobile 组件库(★★★)介绍与使用antd-mobile 是 Ant Design 的移动规范的 React 实现,服务于蚂蚁及口碑无线业务。特性UI 样式高度可配置,拓展性更强,轻松适应各类产品风格基于 React Native 的 iOS / Android / Web 多平台支持,组件丰富、能全面覆盖各类场景 (antd-mobile-rn)提供 “组件按需加....

文章 2024-01-30 来自:开发者社区

React组件生命周期

React组件生命周期(★★★)目标说出组件生命周期对应的钩子函数钩子函数调用的时机概述意义:组件的生命周期有助于理解组件的运行方式,完成更复杂的组件功能、分析组件错误原因等组件的生命周期: 组件从被创建到挂载到页面中运行,再到组件不在时卸载的过程生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数构造函数的作用:为开发人员在不同阶段操作组件提供了实际生命周期阶段创建时(挂载....

React组件生命周期
文章 2024-01-30 来自:开发者社区

React组件

React组件目标能够知道受控组件是什么能够写出受控组件了解非受控组件表单处理受控组件(★★★)HTML中的表单元素是可输入的,也就是有自己的可变状态而React中可变状态通常保存在state中,并且只能通过setState() 方法来修改React讲state与表单元素值value绑定在一起,有state的值来控制表单元素的值受控组件:值受到react控制的表单元素使用步骤在state中添加一....

文章 2024-01-26 来自:开发者社区

探索 React Hooks 的世界:如何构建出色的组件(下)

四、实际应用案例案例分析:使用 Hooks 构建复杂组件使用 Hooks 构建复杂组件是 React 函数组件的一种新方式,它允许我们在不编写类的情况下使用 state 和其他 React 特性。下面我将提供一个案例来说明如何使用 Hooks 构建复杂组件。假设我们正在构建一个博客应用程序,其中一个复杂组件是文章列表组件。该组件需要从后端获取文章数据,并显示文章的标题、作者和摘要等信息。首先,在....

探索 React Hooks 的世界:如何构建出色的组件(下)
文章 2024-01-26 来自:开发者社区

探索 React Hooks 的世界:如何构建出色的组件(上)

一、引言简述 Hooks 的背景和意义Hooks一般指系统运行到某一时期时,会调用被注册到该时机的回调函数。在前端领域,Hooks是指用于解决状态逻辑复用问题的一种方法。Hooks的背景是 React 团队在组件形式上推荐使用函数组件,而不是类组件,目的是解决函数组件中没有状态(state)、生命周期等问题。同时,类组件存在绑定关系冗长、复杂,不易读,This的指向不清晰等问题, Hooks可以....

探索 React Hooks 的世界:如何构建出色的组件(上)
文章 2024-01-23 来自:开发者社区

React组件中如何通讯

在React组件中,可以通过props和state来实现组件之间的通信。父组件向子组件传递数据:父组件可以通过props将数据传递给子组件,在子组件中通过this.props来获取传递的数据。子组件向父组件传递数据:子组件可以通过props中的一个函数属性来将数据传递给父组件,在子组件中通过this.props.函数名来调用这个函数,并将数据作为参数传递给函数。兄弟组件之间的通信:可以通过将数据....

文章 2024-01-16 来自:开发者社区

react 使用 antd-mobile组件库实现下滑加载数据

在许多的应用场景中都会存在的功能点,在商品列表展示时,所展示的仅仅是一部分数据,并非是完全展示,在存在大量数据时展示的所有的会导致页面渲染缓慢的问题,所以都是通过功能触发,增加更多的数据展示 第一步: npm i antd-mobile  //引入组件库import { InfiniteScroll, List } from 'antd-mobile' import { sleep }....

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注