React入门 组件学习笔记

项目页面以组件形式层层搭起来,组件提高复用性,可维护性

目录

一、函数组件

 二、类组件

三、 组件的事件绑定

四、获取事件对象

五、事件绑定传递额外参数

六、组件状态

初始化状态

读取状态

修改状态

七、组件-状态修改counter案例

 八、this问题说明

九、总结 


一、函数组件

目标:能够独立使用函数完成react组件的创建和渲染

函数组件概念:使用JS的函数(或者箭头函数)创建的组件,就叫做 函数组件

函数组件的创建和渲染

//函数组建的创建
//创建
function Hello(){return <div>hello这是一个函数组件</div>
}
  1. 组件的名称必须首字母大写,react内部会根据这个来判断是组件还是普通的HTML标签
  2. 函数组件必须有返回值,表示该组件的 UI 结构;如果不需要渲染任何内容,则返回 null
  3. 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容,对于函数组件来说,渲染的内容是函数的返回值就是对应的内容
  4. 使用函数名称作为组件标签名称,可以成对出现也可以自闭合
//函数组建的创建
//创建
function Hello(){return <div>hello这是一个函数组件</div>;
}//渲染 <Hello/> 自闭和
//    <Hello></Hello>成对function App() {return (<div className="App">{/*渲染Hello组件 */}<Hello/><Hello></Hello></div>);
}export default App;

 二、类组件

能够独立完成类组件的创建和渲染

  1. 类名称也必须以大写字母开头
  2. 类组件应该继承 React.Component 父类,从而使用父类中提供的方法或属性
  3. 类组件必须提供 render 方法render 方法必须有返回值,表示该组件的 UI 结构
// 引入React
import React from 'react'// 定义类组件
class HelloComponent extends React.Component{render(){return <div>这是个一个类组件</div>}
}function App() {return (<div className="App">{/*渲染Hello组件 */}<Hello/><Hello></Hello><HelloComponent/><HelloComponent></HelloComponent></div>);
}

三、 组件的事件绑定

前端开发所有交互都是基于事件

语法:

on + 事件名称 ={事件处理程序}

例如  :

function Hello(){const clickHandler = () =>{console.log('函数组件中的事件被触发了');}return <div onClick={clickHandler}>hello这是一个函数组件</div>
}

注意,react事件采用驼峰命名法

类组件中例子,注意回调函数的写法,标准写法,实际工作中的写法

class HelloComponent extends React.Component{//事件回调函数 类中有写法差别//回调函数不加const 这是标准写法,避免this指向问题//这样写,回调函数中的this 指向的是当前的组件实例对象clickHandler =()=>{console.log('类组件中的点击事件触发了');}render(){return <div onClick={this.clickHandler}>这是个一个类组件</div>}
}

四、获取事件对象

获取事件对象e只需要在事件的回调函数中补充一个形象e即可拿到

在函数组件中试一下,打印了一个对象,里面很多属性

function Hello(){const clickHandler = (e) =>{console.log('函数组件中的事件被触发了',e);}return <div onClick={clickHandler}>hello这是一个函数组件</div>
}

 为事件加个跳转

 右侧打印出,然后原页跳转了

如果只想打印,不想跳转,那就要拿到事件对象e去阻止默认行为

五、事件绑定传递额外参数

触发事件传递自定义参数怎么做?

改造事件绑定为箭头函数 在箭头函数中完成参数的传递

1、只需要一个额外参数 {clickHandler}   变成   {()=>clickHandler('自定义参数')}

2、既需要事件对象e也需要额外的参数 {(e)=>clickHandler(e,'自定义参数')}

function Testl(){const clickHandler=(msg)=>{console.log('函数组件的事件被触发了',msg)}return <div onClick={()=>clickHandler('this is msg')}>点击这里</div>
}

function Testl(){const clickHandler=(e,msg)=>{console.log('函数组件的事件被触发了',e, msg)}return <div onClick={(e) => clickHandler(e,'this is msg')}>点击这里</div>
}

 类组件的事件绑定

整体和函数组件方式差别不大

唯一需要注意的是 因为处于class类语境下,所定义事件回调函数以及写法有不同

定义的时候: class Fields语法

使用的时候: 需要借助this关键词获取

import React from "react";
class CComponent extends React.Component {// class FieldsclickHandler1 = (e, num) => {// 这里的this指向的是正确的当前的组件实例对象// 可以非常方便的通过this关键词拿到组件实例身上的其他属性或者方法console.log(this);};clickHandler2() {// 这里的this 不指向当前的组件实例对象而指向undefined 存在this丢失问题console.log(this);}render() {return (<div><button onClick={(e) => this.clickHandler1(e, "123")}>click me 1</button><button onClick={this.clickHandler2}>click me 2</button></div>);}
}function App() {return (<div><CComponent /></div>);
}export default App;

 

六、组件状态

学习目标:能够为组件添加状态和修改状态的值

在React hook 出来之前,函数式组件是没有自己的状态的,这里统一通过类组件来学习

初始化状态、读取状态、修改状态、影响视图

初始化状态

  • 通过class的实例属性state来初始化
  • state的值是一个对象结构,表示一个组件可以有多个数据状态
    class Counter extends React.Component {// 初始化状态state = {count: 0}render() {return <button>计数器</button>}
    }

    读取状态

  • 通过this.state来获取状态
    class Counter extends React.Component {// 初始化状态state = {count: 0}render() {// 读取状态return <button>计数器{this.state.count}</button>}
    }

    修改状态

//组件状态 类组件演示
import React from "react"
class TestComponent extends React.Component{//1.定义组件状态state={//这里可以定义各种属性,全是当前组件的状态name:'ggbond'}//事件回调函数 
changName=()=>{//3.修改状态//注意不可以直接赋值修改,必须通过一个方法setStatethis.setState({name:'eebond'})
}render(){//使用状态return (<div>this is TestComponent当前name为:{this.state.name}<button onClick={this.changName}>修改name</button></div>)}
}//根组件
function App(){return (<div><TestComponent/></div>)
}
export default App

 点击后 

  • 语法
    this.setState({ 要修改的部分数据 })
  • setState方法作用
  1. 修改state中的数据状态      2.更新UI
  • 思想
    数据驱动视图,也就是只要修改数据状态,那么页面就会自动刷新,无需手动操作dom
  • 注意事项
    不要直接修改state中的值,必须通过setState方法进行修改

 总结:

1.编写组件其实就是编写原生类或者函数

2.定义状态必须通过state实例属性的方法提供一个对象,名称是固定的就叫做state

3.修改state中的任何属性 都不可以通过直接赋值 ,必须走setState方法 ,这个方法来自于继承得到

4.这里的this关键词,很容易出现指向错误,注意规范写法

(事件回调函数 类中有写法差别,回调函数不加const 这是标准写法,避免this指向问题,这样写,回调函数中的this 指向的是当前的组件实例对象)

类组件现在很少用,但老项目维护需要,这里是巩固基础

七、组件-状态修改counter案例

//通过类组件修改状态的方式 counter
import React from "react"
class Counter extends React.Component{//通过state定义组件状态state={count:0}//huitiaohanshu changeCount =()=>{//修改state//react体系下 ‘数据不可变’ 要setStatethis.setState({count:this.state.count + 1})}render(){return (<button onClick={this.changeCount}>{this.state.count}click</button>)}
}//根组件
function App(){return (<div>{/*渲染counter */}<Counter /></div>)
}export default App

 八、this问题说明

之前,写react很麻烦,需要时刻注意this指向哪里,但现在不是事了,随着js标准的发展,主流的写法已经变成了class fields,无需考虑太多this问题


import React from "react"
//this有问题的写法
class Test extends React.Component{constructor(){super()//用bind强行修正我们的this指向//相当于在类组件初始化阶段 就可以把回调函数的this修正到//永远指向当前组件实例对象this.handler=this.handler.bind(this)}handler(){console.log(this)//这里用this.setstate去修改数据还行吗?会报错//老辈会这样做 construtor强绑定一个}render(){return (<button onClick={this.handler }>click</button>)}
}//根组件
function App(){return (<div><Test/></div>)
}export default App

未修正前:

 强行修正this指向后:  得到对象

 还有一个做法

箭头函数


import React from "react"
//this有问题的写法
class Test extends React.Component{handler(){console.log(this)}render(){console.log('父函数里的this指向为:',this)return (//不用constructor修正,直接在时间绑定的位置//通过箭头函数 直接沿用父函数中的this指向也是可以的,这里父函数是render//那我们的箭头函数中的this直接沿用 也是<button onClick={()=> this.handler() }>click</button>)}
}//根组件
function App(){return (<div><Test/></div>)
}export default App

同样出来的也是对象

 看下父函数this指向

注意

没必要用这两个修正方案,知道有这两个方法就行,只需要记住案例中的标准写法就行 

九、总结 

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

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

相关文章

如何安装chromadb

下载最新版本的python3.10 因为chromadb需要sqlite3的最小版本是3.35.0 使用如下命令安装 pip install chromadb 安装完毕后在python3的命令行窗口输入 import chromadb 如果不报错代表成功&#xff0c;如果报错sqlite3的最小版本是3.35.0&#xff0c;使用如下方式解决 …

校园照明控制系统的基本组成部分

1.1 主控中心 系统使用通用计算机作为主控中心&#xff0c;通过 RLINK 通讯装置与网络实现通 讯。计算机上可直接实现编程&#xff0c;监控&#xff0c;故障报警等功能。局域网上的计算机也可以 通过主控中心实现监控功能。 1.2 RLINK 通讯装置 主控中心与系统网络各单元的…

mysql 间隙锁原理深度详解

目录 一、前言 二、mysql之mvcc 2.1 什么是mvcc 2.2 mvcc组成 2.2.1 Undo log 多版本链 2.2.2 ReadView 2.2.3 快照读与当前读 三、RR级别下的事务问题 3.1 RR隔离级别解决的问题 3.1.1 幻读问题 3.2 幻读效果演示 3.2.1 准备测试表和数据 3.2.2 修改事务级别 3.…

Acwing798.差分矩阵

前缀和与差分 图文并茂 超详细整理&#xff08;全网最通俗易懂&#xff09;_前缀和差分_林小鹿的博客-CSDN博客 代码展示&#xff1a; #include<iostream> #include<cstdio> using namespace std; const int N 1e3 10; int a[N][N], b[N][N]; void insert(int x…

【UE 材质】实现角度渐变材质、棋盘纹理材质

目标 步骤 一、角度渐变材质 1. 首先通过“Mask”节点将"Texture Coordinate" 节点的R、G通道分离 2. 通过“RemapValueRange”节点将0~1范围映射到-1~1 可以看到此时R通道效果&#xff1a; G通道效果&#xff1a; 继续补充如下节点 二、棋盘纹理材质 原视频链接&…

git分支管理策略

git的基础操作以及常用命令在上篇博客哦~ git原理与基本使用 1.分支管理 1.主分支 在版本回退⾥&#xff0c;我们已经知道&#xff0c;每次提交&#xff0c;Git都把它们串成⼀条时间线&#xff0c;这条时间线就可以理解为是⼀个分⽀。截⽌到⽬前&#xff0c;只有⼀条时间线&…

C++ 滑翔翼

小T和小K都是OIER&#xff0c;入选省队后有幸去苏州参加JSOI集训&#xff0c;训练之余&#xff0c;他们相约一起去苏州乐园玩。 苏州乐园里有一个非常热门的游乐项目叫双人滑翔翼。小T想和小K一起乘双人滑翔翼&#xff0c;但是排在他们前面的一大群人却为了搭配问题而争执不休&…

【go】切片截取总结

文章目录 1.获取切片的第i个元素2.获取切片的第i个至第j个元素3.各种切片截取操作 1.获取切片的第i个元素 func main() {s : []int{1, 2, 3, 4, 5}fmt.Println("第一个元素为&#xff1a;", s[0])fmt.Println("最后一个元素为&#xff1a;", s[len(s)-1])…

aws的s3匿名公开访问

点击桶权限 &#xff0c;添加策略 {"Version": "2012-10-17","Statement": [{"Sid": "AddPerm","Effect": "Allow","Principal": "*","Action": "s3:GetObject&qu…

Docker原理详细剖析-Namespace

一、简介 docker容器技术从2013年开始火了以后&#xff0c;2014年左右当时有幸在学校能和学院教授一起做些项目以及学习。其中docker技术在当时来说还算是比较新的技术&#xff0c;国内关于这块的资料以及使用也才刚刚开始&#xff0c;讨论docker技术&#xff0c;算是相对时髦的…

mysql表锁死怎么办?事务锁sql超时被锁死怎么办?

不要慌&#xff01;不要慌&#xff01;两句命令教你做人 一、mysql表锁死 1、查询所有进程&#xff1a; SHOW PROCESSLIST; 2、找到进程号kill掉 kill 3269987 2、事务锁 sql超时被锁死 1、查询所有执行中的sql select t.*,to_seconds(now())-to_seconds(t.trx_started) id…

智能手表:华米稳、华为猛

随着科技的进步与发展&#xff0c;消费电子产品的功能和品类越来越丰富&#xff0c;人们也愈发习惯使用消费电子产品了。消费电子产品一词听起来陌生&#xff0c;实际上却离人们很近&#xff0c;比如智能手机、笔记本电脑等等&#xff0c;都属于消费电子产品。现如今&#xff0…

SQL存储过程中 SET ANSI_NULLS ON 和 SET QUOTED_IDENTIFIER ON的作用和详解

今天在写SQL Server存储过程中遇到的&#xff0c;做个整理归纳 USE [ABInbevDB] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO实际上&#xff0c;我们在创建存储过程的时候&#xff0c;这几行的代码是会自动创建出来的&#xff0c;那么先解释下两个标准的概念。 两个…

【办公自动化】使用Python批量处理Excel文件并转为csv文件

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

C++ Qt 中QMimeDatabase类详细介绍以及应用场景

C Qt 中QMimeDatabase类详细介绍以及应用场景 文章目录 C Qt 中QMimeDatabase类详细介绍以及应用场景一、QMimeDatabase类是什么&#xff1f;二、QMimeDatabase类中的关键功能和特点三、QMimeDatabase的用法四、QMimeDatabase的应用场景 一、QMimeDatabase类是什么&#xff1f;…

Hbase文档--架构体系

阿丹&#xff1a; 基础概念了解之后了解目标知识的架构体系&#xff0c;就能事半功倍。 架构体系 关键组件介绍&#xff1a; HBase – Hadoop Database&#xff0c;是一个高可靠性、高性能、面向列、可伸缩的分布式存储系统&#xff0c;利用HBase技术可在廉价PC Server上搭建起…

WordArt Designer:基于用户驱动与大语言模型的艺术字生成

AIGC推荐 FaceChain人物写真开源项目&#xff0c;支持风格与穿着自定义&#xff0c;登顶github趋势榜首&#xff01; 前言 本文介绍了一个基于用户驱动&#xff0c;依赖于大型语言模型(LLMs)的艺术字生成框架&#xff0c;WordArt Designer。 该系统包含四个关键模块:LLM引擎、…

19.CSS雨云动画特效

效果 源码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Cloud & Rain Animation</title><link rel="stylesheet" href="style.css"> </head> <bo…

数字证书有什么作用,为什么要用数字证书?

数字证书是一种用于加密和验证数据的安全工具&#xff0c;它在现代通信和互联网领域起着重要的作用。下面安策给大家介绍一下数字证书的几个主要作用和为什么要使用数字证书的原因&#xff1a; 身份认证&#xff1a;数字证书可用于在线交互中验证身份。通过使用证书进行身份认证…

VB房屋租凭管理系统设计与实现

摘要 随着我国市场经济的快速发展和人们生活水平的不断提高,简单的租凭服务已经不能满足人们的需求。如何利用先进的管理手段,提高房屋租凭管理水平,是当今社会所面临的一个重要课题。本文通过用VB6.0编写房屋租赁管理系统,利用软件工程原理,采用面向对象的编程方法,其开…