❤React-React 组件基础(类组件)

❤React-React 组件基础

1、组件化开发介绍

组件化开发思想:分而治之

React的组件按照不同的方式可以分成类组件:

划分方式一(按照组件的定义方式)

函数组件(Functional Component )和类组件(Class Component);

划分方式二(按照据组件内部是否有状态需要维护)

无状态组件(Stateless Component )和有状态组件(Stateful Component)

划分方式三(按照据组件的不同职责)

展示型组件(Presentational Component)和容器型组件(Container Component)

函数式组件是官方推荐的,也是接下来我们主要应该学的重点

异步组件-高阶组件

组件包含: React 组件介绍 React 组件的两种创建方式 React 事件处理有状态组件和无状态组件组件中的 state 和 setState()事件绑定 this 指向表单处理

组件特点 可复用、独立、可组合

2、组件化创建的两种方式

(1)函数创建组件---无状态组件 使用JS函数(或者箭头函数)创建的组件 名称以大写字母开头 函数必须有返回值,表示该组件的结构 渲染函数组件:用函数名作为组件标签名 可以是单标签或者双标签

(2)class创建组件---有状态组件

类组件:使用 ES6 的 class 创建的组件
  • 约定1:类名称也必须以大写字母开头
  • 约定2:类组件应该继承 React.Component 父类,从而可以使用父类中提供的方法或属性
  • 约定3:类组件必须提供render0) 方法
  • 约定4:render0)方法必须有返回值,表示该组件的结构

简单编写一个我们的类组件如下

js代码解读
复制代码import React from 'react'class Header extends React.Component {render() {return (<div>header</div>)}
}class Content extends React.Component {render() {return (<div>content</div>)}
}export default class App extends React.Component {render() {// return (//   createElement(//     Fragment,//     null,//     createElement(//       Header//     ),//     createElement(//       Content//     )//   )// )return (<><Header></Header><Content></Content></>)}
}

(3) 抽离为JS文件 将我们之前的部分进行抽离出来

js代码解读
复制代码import React from 'react'
class Header extends React.Component {render() {return (<div>header</div>)}}
export default Header;

导入和渲染使用即可

js代码解读
复制代码import Header from "./header";
<Header></Header>

3、组件事件处理

1 事件绑定

React 事件绑定语法与 DOM 事件语法相似 语法:on+事件名称={事件处理程序},比如:onClick={0)=>{}注意:React 事件采用驼峰命名法,比如:onMouseEnter、onFocus 在函数组件中绑定事件

类组件的方式写法:

函数式组件的方式写法

2事件对象

解释:可以通过事件处理程序的参数获取到事件对象React中的事件对象叫做:合成事件(对象)合成事件:兼容所有浏览器,无需担心跨浏览器兼容性问题

写法如下:

3 有状态组件(类组件)和无状态组件(函数组件)

4 组件的state和setState

5 组件state

6 setState修改状态

7 从JSX之中抽离逻辑代码

事件绑定this指向的转换(三种)

(1) 箭头函数

箭头函数自身不绑定this

(2) Function.prototype.bind()

利用ES中的bind方法,将事件处理程序中的this与组件事例绑定到一起

(3) class的事例方法

8 表单绑定

受控组件

demo (输入框、文本框、富文本框、下拉框)

javascript代码解读
复制代码
import React from 'react';
class Hrllo extends React.Component{state = {count:0,txt:'11',textarea:'富文本框',city:'bg',ischecked:false,}handleTxtx=e=>{console.log('你刚刚点击了'+e.target);this.setState({txt:e.target.value,}) console.log(this.state.txt)}handleTextarea=e=>{console.log('你刚刚点击了'+e.target);this.setState({textarea:e.target.value,}) console.log(this.state.textarea)}handleCity=e=>{console.log('你刚刚点击了'+e.target);this.setState({city:e.target.value,}) console.log(this.state.city)}handleChecked=e=>{console.log('你刚刚点击了'+e.target);this.setState({ischecked:e.target.checked,}) console.log(this.state.ischecked)}render() {return (<div>{/* 输入框 */}<div><input value={this.state.txt} name="txt" onChange={this.handleTxtx}></input></div>{/* 复选框 */}<div><textarea value={this.state.textarea} onChange={this.handleTextarea}></textarea></div>{/* 单选框 */}<select value={this.state.city} onChange={this.handleCity}><option value="sh">上海</option><option value="bj">北京</option><option value="cd">成都</option></select>{/* 复选框 */}<input type="checkbox" checked={this.state.ischecked} onChange={this.handleChecked}></input></div> )}
}
export default Hrllo

受控组件的优化

javascript代码解读
复制代码
import React from 'react';
class Hrllo extends React.Component{state = {count:0,txt:'11',textarea:'富文本框',city:'bg',ischecked:false,}handleChange=e=>{const target=e.target;const value=target.type === 'checkbox'?target.checked:target.value;const name=target.name;console.log('你刚刚点击了'+e.target);this.setState({[name]:value,}) console.log(this.state)}render() {return (<div>{/* 输入框 */}<div><input value={this.state.txt} name="txt" onChange={this.handleChange}></input></div>{/* 复选框 */}<div><textarea value={this.state.textarea} name="textarea" onChange={this.handleChange}></textarea></div>{/* 单选框 */}<select value={this.state.city} onChange={this.handleChange} name="city" ><option value="sh">上海</option><option value="bj">北京</option><option value="cd">成都</option></select>{/* 复选框 */}<input type="checkbox" checked={this.state.ischecked} name="ischecked" onChange={this.handleChange}></input></div> )}
}
export default Hrllo

非受控组件(DOM方式)

javascript代码解读
复制代码
// 非受控组件
import React from 'react';
class Hrllo extends React.Component{constructor(){super()this.txtref=React.createRef(); }getTxt=()=>{console.log('文本框架的值'+this.txtref.current.value);}render() {return (<div>{/* 输入框 */}<input type="text" ref={this.txtref}/><button onClick={this.getTxt}>获取文本框的值</button></div> )}
}
export default Hrllo

9 组件部分小案例:

评论列表:

报错:非大写字母开头

把大些字母改成小写字母就可以正常使用啦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/470837.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024/11/13 英语每日一段

The new policy has drawn many critics. Data and privacy experts said the Metropolitan Transit Authority’s new initiative doesn’t address the underlying problem that causes fare evasion, which is related to poverty and access. Instead, the program tries “…

MySQL重难点(一)索引

目录 一、引子&#xff1a;MySQL与磁盘间的交互基本单元&#xff1a;Page 1、重要问题&#xff1a;为什么 MySQL 每次与磁盘交互&#xff0c;都要以 16KB 为基本单元&#xff1f;为什么不用多少加载多少&#xff1f; 2、有关MySQL的一些共识 3、如何管理 Page 3.1 单个 P…

【软件工程】一篇入门UML建模图(类图)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;软件开发必练内功_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前…

vue2+ element ui 集成pdfjs-dist

目录 1. 下载Pdf.js1.1 下载1.2 修改配置1.2.1 将pdfjs-3.8.162-dist复制到项目中1.2.2 解决跨域问题1.2.3 将pdf.worker.js文件复制到public目录下1.2.4 安装 pdfjs-dist1.2.5 前端vue代码(示例) 3. 参考资料 1. 下载Pdf.js 1.1 下载 下载链接&#xff08;官方&#xff09;需…

蓝桥杯每日真题 - 第7天

题目&#xff1a;&#xff08;爬山&#xff09; 题目描述&#xff08;X届 C&C B组X题&#xff09; 解题思路&#xff1a; 前缀和构造&#xff1a;为了高效地计算子数组的和&#xff0c;我们可以先构造前缀和数组 a&#xff0c;其中 a[i] 表示从第 1 个元素到第 i 个元素的…

大语言模型:解锁自然语言处理的无限可能

0.引言 在当今的科技时代&#xff0c;自然语言处理技术正以前所未有的速度发展&#xff0c;语言大模型作为其中的核心力量&#xff0c;对各个领域产生了深远的影响。本文旨在探讨语言大模型的发展历程、核心技术以及广泛的应用场景&#xff0c;以帮助读者更好地理解这一前沿技…

【vue2.0入门】vue基本语法

目录 引言一、页面动态插值1. 一般用法 二、计算属性computed三、动态class、style绑定四、条件渲染与列表渲染五、事件处理六、表单输入绑定七、总结 引言 本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容&#xff0c;并不…

【STM32F1】——无线收发模块RF200与串口通信

【STM32F1】——无线收发模块RF200与串口通信 一、简介 本篇主要对调试无线收发模块RF200的过程进行总结&#xff0c;实现了以下功能。 串口普通收发&#xff1a;使用STM32F103C8T6的USART2串口接收中断&#xff0c;实现两个无线收发模块RF200间的通信。 二、RF200介绍 电压…

《TCP/IP网络编程》学习笔记 | Chapter 8:域名及网络地址

《TCP/IP网络编程》学习笔记 | Chapter 8&#xff1a;域名及网络地址 《TCP/IP网络编程》学习笔记 | Chapter 8&#xff1a;域名及网络地址域名系统什么是域名&#xff1f;DNS 服务器IP 地址和域名之间的转换使用域名的必要性利用域名获取 IP 地址利用 IP 地址获取域名 基于 Wi…

前端开发中常用的包管理器(npm、yarn、pnpm、bower、parcel)

文章目录 1. npm (Node Package Manager)2. Yarn (Yarn Package Manager)3. pnpm4. Bower5. Parcel总结 前端开发中常用的包管理器主要有以下几个&#xff1a; 1. npm (Node Package Manager) 简介&#xff1a; npm 是 Node.js 的默认包管理器&#xff0c;也是最广泛使用的包…

HarmonyOS 如何实现传输中的数据加密

文章目录 摘要引言数据传输加密概述选择加密算法和传输协议加密实现方案与 Demo 代码配置 HTTPS/TLSAES 加密的实现代码详解RSA加密的实现代码详解 QA环节总结参考资料 摘要 本文将介绍在 HarmonyOS 应用中如何实现数据传输的加密策略。我们将讨论常见的加密算法&#xff08;如…

ArkTs简单入门案例:简单的图片切换应用界面

在鸿蒙 OS 应用开发的过程中&#xff0c;我们常常需要通过组合各种组件和编写相应的逻辑来实现丰富多样的功能。今天&#xff0c;我就来和大家详细解析一段实现简单图片切换功能的代码&#xff0c;希望能帮助到那些刚接触鸿蒙 OS 应用开发的朋友们。 一、代码导入部分 Entry …

influxDB 时序数据库安装 flux语法 restful接口 nodjsAPI

安装 Install InfluxDB | InfluxDB OSS v2 Documentation Debian和Ubuntu用户可以用apt-get包管理来安装最新版本的InfluxDB。 对于Ubuntu用户&#xff0c;可以用下面的命令添加InfluxDB的仓库&#xff0c;添加之后即可apt-get 安装influxdb2 wget -q https://repos.influx…

丹摩征文活动|丹摩智算平台使用指南

目录 1. 登录平台与工作环境设置1.1 访问与登录1.2 创建或选择项目1.3 初始化项目环境 2. 数据上传与管理2.1 数据上传2.2 数据管理与预处理2.3 数据可视化 3. 模型构建与训练3.1 模型选择3.2 参数配置3.3 模型训练与评估 4. 模型部署与应用4.1 模型部署4.2 接口调用与集成4.3 …

NAT网络工作原理和NAT类型

NAT基本工作流程 通常情况下&#xff0c;某个局域网中&#xff0c;只有路由器的ip是公网的&#xff0c;局域网中的设备都是内网ip&#xff0c;内网ip不具备直接与外部应用通信的能力。 处于内网的设备如何借助NAT来实现访问外网的应用&#xff1f; 对于开启了NAT功能的局域网…

LLMs 如何处理相互矛盾的指令?指令遵循优先级实验

编者按&#xff1a;想象一下&#xff0c;你正在开发一个 AI 助手&#xff0c;突然发现 system message 和用户提示词存在冲突&#xff0c;这时 AI 会听谁的&#xff1f;这种情况不仅困扰着开发者&#xff0c;还可能导致 AI 系统的不稳定和不可预测&#xff0c;影响用户体验和系…

qt QProcess详解

1、概述 QProcess是Qt框架提供的一个类&#xff0c;它用于在应用程序中执行外部进程。QProcess提供了一系列函数来启动、控制和与外部进程进行交互&#xff0c;使得开发者能够在自己的应用程序中集成和调用其他程序或服务。这个类在需要执行系统命令、启动其他应用程序或进行文…

Appium配置2024.11.12

百度得知&#xff1a;谷歌从安卓9之后不再提供真机layout inspector查看&#xff0c;仅用于支持ide编写的app调试用 所以最新版android studio的android sdk目录下已经没有了布局查看工具... windows x64操作系统 小米k30 pro手机 安卓手机 Android 12 第一步&#xff1a…

《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明

参考 《element plus 使用 icon 图标(两种方式)》使用 icon 升级 Vue2 升级 Vue3 项目时&#xff0c;遇到命名时的实心与空心点差异&#xff01; ElementUI&#xff1a; 实心是 el-icon-more空心是 el-icon-more-outline ElementPlus&#xff1a; 实心是 el-icon-more-fill…

WebSocket和HTTP协议的性能比较与选择

WebSocket和HTTP协议的性能比较与选择 引言&#xff1a; 在web应用开发中&#xff0c;无论是实时聊天应用、多人在线游戏还是实时数据传输&#xff0c;网络连接的稳定性和传输效率都是关键要素之一。目前&#xff0c;WebSocket和HTTP是两种常用的网络传输协议&#xff0c;它们…