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

ops/2024/11/17 11:01:49/

❤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.ppmy.cn/ops/134406.html

相关文章

StructRAG Boosting Knowledge 论文笔记

StructRAG: Boosting Knowledge Intensive Reasoning of LLMs via Inference-time Hybrid Information Structurization 论文精读 背景知识 知识密集型推理任务&#xff08;knowledeg- intensive reasoning task&#xff09;: 知识密集型推理任务&#xff08;knowledge-inte…

简单理解回调函数

回调函数是编程中一个非常重要的概念&#xff0c;它是一种以函数作为参数并在某个事件或条件满足时被调用的函数。这种机制使得程序能够以非线性的方式执行&#xff0c;增加了代码的灵活性和模块化。下面我将详细解释回调函数的几个关键点&#xff1a; 定义和作用 回调函数是一…

创新方法教学:挖掘自闭症儿童潜能的重要机构

在浩瀚的宇宙中&#xff0c;每一颗星星都闪烁着独特的光芒&#xff0c;而在这个世界上&#xff0c;每一个自闭症儿童都是一颗未被完全发掘的璀璨星辰。他们或许在社交互动、语言表达上存在障碍&#xff0c;但他们的内心世界却同样丰富多彩&#xff0c;充满了无限的潜能与可能。…

【Linux】多线程(中)

目录 一、线程互斥 1.1 互斥概念 1.2 互斥量mutex 1.3 互斥量相关API &#xff08;1&#xff09;初始化互斥量 &#xff08;2&#xff09;销毁互斥量 &#xff08;3&#xff09;互斥量加锁和解锁 1.4 互斥量原理 1.5 重入和线程安全 二、死锁 2.1 概念 2.2 造成死锁…

vue 项目使用 nginx 部署

前言 记录下使用element-admin-template 改造项目踩过的坑及打包部署过程 一、根据权限增加动态路由不生效 原因是Sidebar中路由取的 this.$router.options.routes,需要在计算路由 permission.js 增加如下代码 // generate accessible routes map based on roles const acce…

利用Excel批量生成含二维码的设备管理标签卡片

在日常办公中&#xff0c;批量制作标签是常见且繁琐的任务&#xff0c;尤其当这些标签需要包含大量数据并附带二维码以便快速扫描识别时&#xff0c;难度更是成倍增加。尽管传统的Word邮件合并功能在数据插入方面表现出色&#xff0c;但在二维码生成上却显得有些捉襟见肘。 为…

高鑫零售实现扭亏为盈,逆市增长的高鑫零售未来何在?

大润发母公司高鑫零售发布截至9月30日的2025财年中期业绩报告&#xff1a;营收347.08亿元人民币&#xff0c;税后溢利1.86亿元&#xff0c;同比增加5.64亿元&#xff0c;实现扭亏为盈&#xff0c;高鑫零售的成绩单我们该如何分析&#xff1f; 首先&#xff0c;整体来看&#x…

吉林大学 超星慕课 高级语言程序设计 学习通部分题目极其答案

题目编号:Exp04-Basic06&#xff0c;GJBook3-06-04 题目名称:循环右移 题目描述:编写程序&#xff0c;不使用其它辅助数组&#xff0c;把一维整型数组中的各个素循环右移位。 输入: 第一行输入两个整数&#xff0c;n表示数组长度(0<n<100)&#xff0c;j表示循环右移的…