React之组件的分类、使用,事件对象,this指向问题,修改状态以及受控组件与非受控组件

已于 2023-07-23 09:13:47 修改
阅读量484 收藏
点赞数
分类专栏： React 文章标签： react.js 前端 前端框架
于 2023-07-22 18:07:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gik99/article/details/131870685
版权
本文介绍了React中的组件创建，包括函数组件和类组件，以及如何将组件提取到单独的JS文件。文章详细讨论了有状态和无状态组件的区别，事件处理的注册、事件对象、this指向问题及其解决方案。此外，还阐述了如何使用setState修改状态以及React的核心理念——状态不可变性。最后，文章讲解了受控组件和非受控组件（使用ref）在表单处理中的应用。
摘要由CSDN通过智能技术生成

React之组件的介绍、创建与使用,事件对象,this指向问题,修改状态以及受控组件与非受控组件

一、组件基本介绍

  • 组件是 React 开发（现代前端开发）中最重要的内容
  • 组件允许你将 UI 拆分为独立、可复用的部分，每个部分都可以独立的思考
  • 组合多个组件（组装乐高积木）实现完整的页面功能
  • 特点：独立、可复用、可组合
  • 组件包含三部分：HTML/CSS/JS
  • 展示页面中的可复用部分

二、组件创建

2.1 函数组件

  • 函数组件：使用JS的函数或者箭头函数创建的组件
    • 使用 JS 的函数(或箭头函数)创建的组件，叫做函数组件
    • 约定1：函数名称必须以大写字母开头，React 据此区分组件和普通的 HTML标签
    • 约定2：函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
  • 使用函数创建组件
// 使用普通函数创建组件：
function Hello() {
  return <div>这是我的第一个函数组件!</div>
}
function Button() {
  return <button>按钮</button>
}

// 使用箭头函数创建组件：
const Hello = () => <div>这是我的第一个函数组件!</div>
  • 使用组件
    • 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数返回值对应的内容
    • 使用函数名称作为组件标签名称
// 使用 双标签 渲染组件：
<Hello></Hello>
ReactDOM.render(<Hello></Hello>, root)

// 使用 单标签 渲染组件：
<Hello />
ReactDOM.createRoot(document.querySelector('#root')).render(<Hello></Hello>)

小结：

  1. 在react中可以使用函数或者箭头函数创建组件
  2. 组件的首字母必须大写

2.2 类组件

内容

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

定义组件

// 导入 React
import React from 'react'
class Hello extends React.Component {
  render() {
    return <div>Hello Class Component!</div> 
  }
}
ReactDOM.render(<Hello />, root)

// 只导入 Component
import { Component } from 'react'
class Hello extends Component {
  render() {
    return <div>Hello Class Component!</div> 
  }
}

使用组件

ReactDOM.createRoot(document.querySelector('#root')).render(<Hello></Hello>)

总结

  1. 使用class语法创建组件比函数创建稍微麻烦一些，但是类组件的功能会比函数组件的功能更加强大（hooks 之前）

三、将组件提取到单独的js文件中

实现方式

  1. 创建 Hello.js
  2. 创建组件（函数 或 类）
  3. 在 Hello.js 中导出该组件
  4. 在 index.js 中导入 Hello 组件
  5. 渲染组件

核心代码

// index.js
//直接导入
import Hello from './Hello'

//按需导入
// import {Hello} from './Hello'

// 渲染导入的Hello组件
ReactDOM.createRoot(document.querySelector('#root')).render(<Hello></Hello>)


// Hello.js
import { Component } from 'react'
class Hello extends Component {
  render() {
    return <div>Hello Class Component!</div>
  }
}
// 导出Hello组件(默认导出)
export default Hello

//按需导出
// export {
//	Hello
// }

四、有状态组件和无状态组件

内容：

  • 函数组件又叫做无状态组件 函数组件是不能自己提供数据【前提：不考虑 hooks 的情况下】
  • 类组件又叫做有状态组件 类组件可以自己提供数据
  • 状态state是组件的私有数据，当组件的状态发生了改变，页面结构也就发生了改变（数据驱动视图）
  • 函数组件是没有状态的，只负责页面的展示（静态，不会发生变化），性能比较高
  • 类组件有自己的状态，负责更新UI，只要类组件的数据发生了改变，UI 就会发生更新（动态）
  • 在项目中，一般都是由函数组件和类组件共同配合来完成的

比如计数器案例，点击按钮让数值+1， 0和1就是不同时刻的状态，当状态从0变成1之后，UI也要跟着发生变化。React想要实现这种功能，就需要使用有状态组件来完成。

  • 函数组件和类组件的区别：有没有状态【前提：不考虑 hooks 的情况下】

五、类组件的状态

内容：

  • 状态state，即数据，是组件内部的私有数据，只能在组件内部使用
  • 状态 state 的值是对象，表示一个组件中可以有多个数据
  • 通过 this.state.xxx 来获取状态

核心代码

  • 创建 state
class Hello extends Component {
  // 为组件提供状态
  state = {
    count: 0,
    list: [],
    isLoading: true
  }

  render() {
    return (
      <div>计数器</div>
    )
  }
}
  • 读取状态：通过 this.state 来获取状态
class Hello extends Component {
  // ...
  render() {
    // 通过 this.state 来访问类组件的状态
    return (
      <div>计数器：{this.state.count}</div>
    )
  }
}

六、事件处理

6.1 注册事件

内容：

  • React注册事件与DOM的事件语法非常像

  • 语法on+事件名 =｛事件处理程序｝ 比如onClick={this.handleClick}

  • 注意：React事件采用驼峰命名法，比如onMouseEnter, onClick

核心代码

class App extends React.Component {
  handleClick() {
    console.log('点击事件触发')
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}

6.2 事件对象

核心代码

  • 可以通过事件处理程序的参数获取到事件对象
  • 注意：React 中的事件对象是 React 内部处理后的事件对象，一般称为：SyntheticBaseEvent 合成事件对象。用法与 DOM 原生的事件对象用法基本一致
function handleClick(e) {
  e.preventDefault()
  console.log('事件对象', e)
}

<a onClick={this.handleClick}>点我，不会跳转页面</a>

6.3 this指向问题

内容：

  • 事件处理程序中的this指向的是undefined

  • render方法中的this指向的是当前react组件。只有事件处理程序中的this有问题

  • 原因

    • 事件处理程序的函数式函数调用模式，在严格模式下，this指向undefined
    • render函数是被组件实例调用的，因此render函数中的this指向当前组件
class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}

总结：

  1. 在react的事件处理函数中，this指向undefined

6.4 this指向解决方案

内容：

  • 解决事件处理程序中this指向问题主要有三种方式

  • 方式1：箭头函数

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={() => this.handleClick()}>点我</button>
      </div>
    )
  }
}
  • 方式2：bind
class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>点我</button>
      </div>
    )
  }
}
  • 方式3：箭头函数形式的实例方法 - 推荐使用
class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick = () => {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}

总结

  1. 推荐使用方式3，箭头函数形式的实例方法
  • 解释为什么方式3可以解决 this 指向问题：
// ES6
class Person1 {
  // 类的 构造函数
  constructor() {
    // 构造函数中的 this 就是实例对象
    console.log(this)
    this.name = 'jack'
    this.fn = () => {
      console.log(this)
    }
  }

  // 上述写法简化语法：
  // name = 'jack'
  // fn = () => {}

  // 这个形式的方法会被添加到原型中
  sayHi() {}
}

说明：

fn = () => {}  这种形式的语法是简化语法（语法糖），书写会更简单。实际上，完整的写法是：

constructor() {
  this.fn = () => {}
}

即：在构造函数中，给 this 添加了一个方法 fn

为什么可以解决 this 指向问题呢？
因为 constructor 中创建的箭头函数，内部的 this 会指向 constructor 中的 this
而 constructor 中的 this 就是实例对象（也就是我们需要的 this）

七、setState 修改状态

内容：

  • 语法：this.setState({ 要修改的部分数据 })
  • setState() 作用：1 修改 state 2 更新 UI
  • 思想：数据驱动视图，也就是只需要修改数据（状态）那么页面（视图）就会自动刷新
    • 核心：数据！！！
    • 从现在开始，我们关心的是如何修改数据，而不再是关心如何修改DOM
    • 并且，注意：尽量避免直接手动 DOM（通过 document.querySelector() 获取到到DOM对象然后再操作） 操作！！！
  • 注意：不要直接修改 state 中的值，这是无效的！

核心代码

class Hello extends Component {
  state = {
    count: 0
  }

	handleClick = () => {
    this.setState({
      count: 10
    })
  }  

  render() {
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}

// 在 count 当前值的基础上加 1
this.setState({
  count: this.state.count + 10
})

总结：

  1. 能直接修改 state 的值吗？不能
  2. 如何修改 React 组件中的状态？setState()
  3. setState 是哪来的？从 Component 父类继承过来的

八、react核心理念(状态不可变)

内容：

  • 状态不可变指的是：不要直接修改状态的值，而是基于当前状态创建新的状态值

核心代码：

state = {
  count: 0,
  list: [1, 2, 3],
  person: {
    name: 'jack',
    age: 18
  }
}

// 【不推荐】直接修改当前值的操作：
this.state.count++
++this.state.count
this.state.count += 1
this.state.count = 1

// 只要是数组中直接修改当前数组的方法都不能用！
this.state.list.push(123)

this.state.person.name = 'rose'

// 【推荐】不是直接修改当前值，而是创建新值的操作：
this.setState({
  count: this.state.count + 1,
  list: [...this.state.list, 123],
  person: {
    ...this.state.person,
    // 要修改的属性，会覆盖原来的属性，这样，就可以达到修改对象中属性的目的了
    name: 'rose'
  }
})

九、表单处理

9.1 受控组件

内容：

  • HTML中表单元素是可输入的，即表单元素维护着自己的可变状态（value）
  • 但是在react中，可变状态通常是保存在state中的，并且要求状态只能通过setState进行修改
  • React中将state中的数据与表单元素的value值绑定到了一起，由state的值来控制表单元素的值
  • 受控组件：value值受到了react状态控制的表单元素

核心代码：

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.msg} onChange={this.handleChange}/>
      </div>
    )
  }
}

总结：

  1. 使用受控组件的方式处理表单元素后，状态的值就是表单元素的值。即：想要操作表单元素的值，只需要操作对应的状态即可*

9.2 非受控组件-ref

非受控组件借助于ref，使用原生DOM的方式来获取表单元素的值
内容

  • 受控组件是通过 React 组件的状态来控制表单元素的值
  • 非受控组件是通过手动操作 DOM 的方式来控制
  • 此时，需要用到一个新的概念：ref
  • ref：用来在 React 中获取 DOM 元素

核心代码

// 1 导入 createRef 函数（ 用来创建 ref 对象 ）
import { createRef } from 'react'

class Hello extends Component {
  // 2 调用 createRef 函数来创建一个 ref 对象
  //   ref 对象的名称（txtRef）可以是任意值
  //   命名要规范： txt（DOM 元素的自己标识） + Ref
  txtRef = createRef()

  handleClick = () => {
    // 文本框对应的 DOM 元素
    // console.log(this.txtRef.current)

    // 4 获取文本框的值：
    console.log(this.txtRef.current.value)
  }

  render() {
    return (
      <div>
        {/*
        	3 将创建好的 ref 对象，设置为 input 标签的 ref 属性值
        		作用：将 ref 和 input DOM 绑定到一起，将来在通过 this.txtRef 拿到的就是当前 DOM 对象
        */}
        <input ref={this.txtRef} />
        <button onClick={this.handleClick}>获取文本框的值</button>
      </div>
    )
  }
}
Gik99
关注
专栏目录
React基础学习笔记（三）-组件及props对象简介
最爱嫣夜来
09-01 465
1、组件化的思想 思想主要还是来源于面向过程和面向对象的编程思想，将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思后封装到单独的js文件当中，借助于es6的导入导出语法，可以在项目中需要用到的地方导入即可使用，有效提高的代码的复用性。 2、组件类型 react中声明组件可以声明为函数组件，也可以声明为类组件 函数组件 类组件 这里先把主要概念都提一下， 后面再进行详细讲解以及实例演示说明 3、props对象 这个对象特别关键，React中的几个核心机制都是围绕props对象展开的，这个pr
React之受控组件和非受控组件以及高阶组件
Ming_xm的博客
10-18 1147
通过上面的了解，高阶组件能够提高代码的复用性和灵活性，在实际应用中，常常用于与核心业务无关但又在多个模块使用的功能，如权限控制、日志记录、数据校验、异常处理、统计上报等。中，高阶组件即接受一个或多个组件作为参数并且返回一个组件，本质也就是一个函数，并不是一个组件。所以，高阶组件的主要功能是封装并分离组件的通用逻辑，让通用逻辑在组件间更好地被复用。受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据。把通用的逻辑放在高阶组件中，对组件实现一致的处理，从而实现代码的复用。
React中无状态组件和状态组件&&受控组件和非受控组件
ky1in93的博客
08-02 1561
无状态组件和状态组件 React中创建组件的方式 在了解React中的无状态和有状态的组件之前，先来了解在React中创建组件的三种方式： ES5写法：React.createClass； ES6写法：React.Component； 无状态的函数写法，又称为纯组件SFC。 React.createClass是React刚开始推荐的创建组件的方式。这是ES5的原生的JavaScript来...
02-react组件基础-函数组件-类组件(有状态和无状态组件)-事件处理(this指向)-setState修改状态-表单处理(受控组件和非受控组件)-案例
weixin_51353891的博客
01-18 1022
学习目标 能够使用函数创建组件-函数组件 能够掌握class语法 extends继承 能够使用class创建组件-类组件 能够给React元素绑定事件 能够使用state与setState 能够处理事件中this的指向问题 能够使用受控组件方式处理表单 组件基本介绍 组件是React中最基本的内容，使用React就是在使用组件 组件表示页面中的部分功能 多个组件可以实现完整的页面功能 组件特点：可复用，独立，可组合 React创建组件的两种方式 函数组件 函数组件：使用JS的函数或者箭头函数创建
React（2）—— React组件、组件实例三大属性、事件处理、受控组件与非受控组件、高阶函数(1)
2301_82244343的博客
04-20 801
/ 2. 渲染组件到页面结果为下：代码解释：执行了ReactDOM.render(< MyComponent/>…之后，发生了什么？React解析组件标签，找到了MyComponent组件。发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。//2.渲染组件到页面结果如下：代码解释：执行了ReactDOM.render(< MyComponent/>…之后，发生了什么？React解析组件标签，找到了MyComponent组件。
react之ref、组件数据承载、事件函数this指向、受控与非受控组件
weixin_45819980的博客
04-21 200
1.ref 给dom或者类组件进行标记 1-1 ref字符串方式，react的严格模式下不建议使用 componentDidMount(){ this.refs.input.focus() } <input ref="input"/> 1-2 回调函数的写法 componentDidMou...
React-class——React表单与事件（受控组件与非受控组件、事件类型、事件对象、事件绑定）、React组件生命周期、面试
qq_52301431的博客
10-12 1096
时，一般都要为表单元素传入应用状态中的值，我们需要根据表单元素中用户的输入，对应用数据进行相应的操作和改变。- React对原生的事件系统也进行了封装，在React中的事件对象实际上是一个跨浏览器的**虚拟事件对象** ，它拥有和原生事件对象相同的属性和方法。受控组件的值由props或state传入给受控组件（表单的输入框），用户在元素上交互或输入内容会引起应用state的改变。在我们用React开发应用时，为了更好地管理应用中的数据，响应用户的输入，编写组件的时候呢，我们就会运用到**
React自学笔记（四）---react表单详解，受控组件和非受控组件以及表单内容
qq_41985467的博客
12-10 192
react表单详解，受控组件和非受控组件以及表单内容 在App.js中 import ReactForm from ‘./components/ReactForm.js’ 在render中引入组件<ReactForm /> 在指定目录下创建ReactForm.js 在Home.js中定义state原始数据： this.state = ({ msg: ...
React基础知识（事件处理、受控组件与非受控组件、高阶函数、组件的生命周期）（三）
qq_48617322的博客
12-23 779
React基础知识（事件处理、受控组件与非受控组件、高阶函数、组件的生命周期）（三）
React的基本使用&JSX的基本使用&React组件&事件处理State&setState&事件绑定this指向
fengzitaba的博客
08-05 1100
React的基本使用 React的安装 安装命令:npm i react react-dom react包是核心,提供创建元素,组件等功能 react-dom 提供DOM相关功能 React的使用 1.引入react和react-dom的两个js文件 <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/rea
前端react学习教程|2-函数组件的事件绑定，组件状态，表单处理，this问题说明，修改状态，类组件事件绑定，状态不可改变，
VAN
04-21 52
编写组件就是编写原生js类或者函数定义状态必须通过state实例属性的方法提供一个对象，名称就是固定的就叫做state修改state当中的任何属性都不可以直接赋值，必须通过setState方法，这个方法通过继承得到的这里的this关键词很容易出现指向错误的问题，上面的写法是最推荐，最规范的，没有this指向问题。
React（2）—— React组件、组件实例三大属性、事件处理、受控组件与非受控组件、高阶函数
2401_84091243的博客
04-07 781
组件中render方法中的this为组件实例对象组件自定义的方法中this为undefined，如何解决？a) 强制绑定this: 通过函数对象的bind()b) 箭头函数 + 赋值语句状态数据state，不能直接修改或更新状态必须通过setState()进行更新, 且更新是一种合并，不是替换。2.2 props属性// React.createRef调用后可以返回一个容器// 该容器可以存储被ref所标识的节点,该容器是“专人专用”的。
React 源码学习01 ---- React.Children.map 的实现与应用
止于至善
11-07 376
目前是第一次看这个函数的实现，知道他大概干了什么，也大概明白每一步要干什么，但是目前还不清除他为什么要这么干。为什么要来看他的实现呢？一个是只有知道他是怎么实现的，才能知道在调用这个方法时，那些情况会报错，为什么报错，能够快速处理。使用这个方法开发功能的时候能够更加得心应手。
react中ref使用支持父调用子组件的方法
lwl12345678_的博客
11-05 313
【代码】react中ref使用支持父调用子组件的方法。
【taro react】 ---- 常用自定义 React Hooks 的实现【六】之类渐入动画效果的轮播
止于至善
11-07 202
组件的实现其实没有太大的难度，就是最近看源码，看到了 React.Children.map 的实现，因此使用这个效果用一下；需要注意的是隐藏显示不要直接操作DOM的显示隐藏，因为DOM的改变会导致图片的重新加载，会出现闪动的效果，这是回流导致的图片重新加载；在组件内渲染子组件的时候依然需要使用 React.Children.map 来循环子组件。
react动态路由
m0_64455070的博客
11-08 257
在React应用中，动态路由（Dynamic Routing）通常指的是根据应用的状态或用户的交互来动态地显示或隐藏路由（页面或组件）。
React 探秘(四)：手撸 mini-react
qq_44983621的博客
11-05 764
至此我们就基本完成了一个简单的 mini-react，上面代码直接截取了关键代码，如果感兴趣的话可以结合下面源码进行本地调试。为我们的入口函数，传入组件和根节点，根据这两个数据初始化初始化我们的。，构建过程需要把 vdom 转化为 fiber ， 其中进行。架构，时间切片，双缓存等，接下来这篇文章实操实现一个。节点的构建，一直复该动作直到没有其他节点.这个阶段是不可暂停的, 采用递归的方式完成。上的存储也是以链表的数据结构存储，存储在。中，然后进行下一个工作循环，此时。，处理完所有的工作单元之后，进入。
数据分析ReAct工作流
最新发布
代码笔记
11-08 35
让我用一个数据分析项目的例子来展示plan-and-execute框架的应用。这个例子会涉及数据处理、分析和可视化等任务。关键是要根据具体需求调整任务定义和执行逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Gik99

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值