零基础入门一文带你了解前端React中组件的使用

最新推荐文章于 2024-08-07 10:27:29 发布
最新推荐文章于 2024-08-07 10:27:29 发布
阅读量901 收藏
点赞数
分类专栏： React.Js基础 文章标签： 前端 react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hdakj22/article/details/132008995
版权

目录

一、React 组件介绍

二、创建React组件的两种方式

1. 使用函数创建组件

2. 使用类创建组件

3. 抽离为独立 JS文件

三、React 事件处理

1. 事件绑定

2. 事件对象

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

1. state的基本使用

2. setState() 修改状态 

3. 从 JSX 中抽离事件处理程序

4. 事件绑定 this 指向

4.1. 箭头函数

4.2. Function.prototype.bind()

4.3. class 的实例方法

五、表单处理

1. 受控组件

1.1 概念

1.2 实现步骤

1.3  多表单元素优化

2. 非受控组件

一、React 组件介绍

  • 组件是 React 的一等公民，使用React其实就是在使用组件。
  • 组件表示页面中的部分功能。
  • 组合多个组件实现完整的页面功能。
  • 特点：可复用、独立、可组合

二、创建React组件的两种方式

1. 使用函数创建组件

  • 函数组件：使用 JS 的函数（或箭头函数）创建的组件。 
    function Hello(){
     return {
       <div> 函数组件 </div>
  }
}

注意：

  1. 函数名称必须以大写字母开头。
  2. 函数组件必须有返回值，表示该组件的结构。
  3. 如果返回值为null，表示不渲染任何内容。
  •  渲染函数组件：用函数名作为组件标签名，组件标签可以是单标签也可以是双标签。 
    const Hello = () => <div> 函数组件 </div>

// 渲染
ReactDOM.render(<Hello />,document.getElementById('root'))

2. 使用类创建组件

  • 类组件：使用 ES6 的 class创建的组件 
    class Hello extends React.Component {
    render(){
          return <div> 类组件 </div>
   }
}
ReactDOM.render(<Hello />,document.getElementById('root'))

 注意：

  1. 类名称也必须以大写字母开头。
  2. 类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性。
  3. 类组件必须提供 render() 方法。
  4. render() 方法必须有返回值，表示该组件的结构。

3. 抽离为独立 JS文件

思考：项目中组件多了之后，我们该如何组织这些组件呢？

  • 选项一：将所有组件放在同一个JS文件中
  • 选项二：将每个组件放到单独的JS文件中（✔）
  1. 创建 Hello.js 组件
  2. 在 Hello.js 中导入React
  3. 创建组件（函数 或 类）
  4. 在 Hello.js 中导出该组件
  5. 在 index.js 中导入 Hello 组件
  6. 渲染组件
// Hello.js
import React from 'react'
class Hello extends React.Component {
  render() {
        return <div> 组件 </div> 
   }
}
// 导出 Hello 组件
export default Hello

// index.js
import Hello from './Hello' 
// 渲染导入的 Hello组件
ReactDOM.render(<Hello />,root)

三、React 事件处理

1. 事件绑定

  • React 事件绑定语法与DOM事件语法相似
  • 语法：on + 事件名称 = ｛ 事件处理程序 ｝，例如：onClick = ｛ () => {} ｝
  • 注意：React 事件采用驼峰命名法，比如：onMouseEnter、onFocus
.// 类组件
class App extends React.Component {
  handleClick() {
      console.log('单击事件')
   }
  render() {
       return {
            <button onclick={this.handleClick} ><button>
       }
   }
}

// 函数组件
fucntion App() {
     function handleClick() {
       console.log('点击事件')
  }
      return {
            <button onclick={handleClick} ><button>
   }
}

2. 事件对象

  • 可以通过事件处理程序的参数获取到事件对象。
  • React中的事件对象叫做：合成事件（对象）。
  • 合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题。
function handleClick(e) {
    // 阻止浏览器的默认行为
    e.preventDefault () 
    console.log('事件对象',e)
}
<a href="www.baidu.com" onClick={handleClick}>点击</a>

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

  • 函数组件又叫做无状态组件，类组件又叫做有状态组件。
  • 状态（state）即数据，函数组件没有自己的状态，只负责数据展示（静），类组件有自己的状态，负责更新UI，让页面“动”起来。

比如计数器案例中，点击按钮让数值加1。0 和 1 就是不同时刻的状态，而由0 变 1 就表示状态发生了变化。状态变化后，UI也要相应的更新。React 中想要实现该功能，就要使用有状态组件来实现。

1. state的基本使用

  • 状态（state）即数据，是组件内部的私有数据，只能在组件内部使用。
  • state的值是对象，表示一个组件中可以可以有多个数据。 
    class App extends React.Component {
  constructor() {
        super()
        // 初始化 state
        this.state = {
            count: 0
      }
   }
     // ES6 简化语法 初始化state
     state = {
        count : 0
         }
   render() {
         return {
        <div> 计数器 </div>
      }
   }
}

ReactDOM.render(<App />,document.getElementById('root'))

初始化完成后，接下来就需要考虑在组件结构中如何使用state：

  • 获取状态：this.state 
    render() {
         return {
        <div> 计数器 { this.state }</div>
      }
   }

2. setState() 修改状态 

  • 状态是可变的。
  • 语法： this.setState({  需要修改的数据 })
  • 注意：不要直接修改state的值！ 
    class App extends React.Component {
   state = {
     count : 0
   }
   render() {
        return {
        <div> 计数器 { this.state.count }</div>
        <button onClick={() => {
                // 正确
                this.setState({
                     count: this.state.count + 1 
               })
                
                // 错误
                this.state.count +1 
          }}>+1</button>
      }
   }
}

ReactDOM.render(<App />,document.getElementById('root'))
  • setState() 作用：1. 修改state ； 2. 更新UI
  • 思想：数据驱动视图

3. 从 JSX 中抽离事件处理程序

  • JSX 中掺杂过多的JS逻辑程序代码，会使代码显得非常混乱。
  • 推荐：将逻辑抽离到单独的方法中，保证JSX结构清晰。
class App extends React.Component {
   state = {
     count : 0
   }

   // 事件处理程序
   OnIncreaseNumb() {
       this.setState({
          count: this.state.count + 1 
    })
}
   render() {
        return {
        <div> 计数器 { this.state.count }</div>
        <button onClick={this.OnIncreaseNumb}>+1</button>
      }
   }
}

ReactDOM.render(<App />,document.getElementById('root'))

此时，会发现页面报错：

class App extends React.Component {
   state = {
     count : 0
   }

   OnIncreaseNumb() {
       this.setState({
          count: this.state.count + 1 
    })
}
   render() {
        return {
        <div> 计数器 { this.state.count }</div>
        <button onClick={this.OnIncreaseNumb}>+1</button>
      }
   }
}

ReactDOM.render(<App />,document.getElementById('root'))

原因：事件处理程序中 this 的值为 undefined 。

解决方案：this指向组件实例（render方法中的this即是组件实例）

4. 事件绑定 this 指向

根据上述提出的问题以及解决方案，事件绑定this指向有以下三种方式：

4.1. 箭头函数

  • 利用箭头函数自身不绑定 this 的特点。
  • render() 方法中的this 为组件实例，可以获取到 setState() 。
class App extends React.Component {
   state = {
     count : 0
   }

   OnIncreaseNumb() {
       this.setState({
          count: this.state.count + 1 
    })
}
   render() {
        return {
        <div> 计数器 { this.state.count }</div>
         // 箭头函数中 this 指向外部环境 此处为：render方法
        <button onClick={ () => this.OnIncreaseNumb()}>+1</button>
      }
   }
}

ReactDOM.render(<App />,document.getElementById('root'))

4.2. Function.prototype.bind()

  • 利用ES5 中 bind() 方法，将事件处理程序中的 this与组件实例绑定在一起。
class App extends React.Component {
   constructor() {
    state = {
        count : 0
   }
    super() 
    this.OnIncreaseNumb = this.OnIncreaseNumb.bind(this)
}
   OnIncreaseNumb() {
       this.setState({
          count: this.state.count + 1 
    })
}
   render() {
        return {
        <div> 计数器 { this.state.count }</div>
        <button onClick={ this.OnIncreaseNumb }>+1</button>
      }
   }
}

ReactDOM.render(<App />,document.getElementById('root'))

4.3. class 的实例方法

  • 利用箭头函数形式的class 实例方法。
  • 注意：该语法是实验性语法，但是由于 babel 的存在可以直接使用。
class App extends React.Component {
   state = {
     count : 0
   }

   OnIncreaseNumb = () => {
       this.setState({
          count: this.state.count + 1 
    })
}
   render() {
        return {
        <div> 计数器 { this.state.count }</div>
        <button onClick={ this.OnIncreaseNumb }>+1</button>
      }
   }
}

ReactDOM.render(<App />,document.getElementById('root'))

五、表单处理

1. 受控组件

1.1 概念

  • HTML 中的表单元素是可以输入的，也就是有自己的可变状态。
  • React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改。
  • React 将 state 与表单元素值 value 绑定在一起，由 state 的值来控制表单元素的值。

<input type="text" value={this.state.txt} />

所以，受控组件其实就是：其值受到React 控制的表单元素。

1.2 实现步骤

  1. 在state 中添加一个状态，作为表单元素的value值（控制表单元素的来源）
  2. 给表单元素绑定 onChange事件，将表单元素的值 设置为 state的值（控制表单元素值的变化）
class App extends React.Component {
   state = {
     txt: ''
   }

   handleChange = e => {
       this.setState({
          txt: e.target.value
    })
}
   render() {
        return {
        <div>  
            <input type="text" value={this.state.txt}  onChange={this.handleChange} />
        </div>
      }
   }
}

ReactDOM.render(<App />,document.getElementById('root'))

1.3  多表单元素优化

  • 问题：每个表单元素都有一个单独的事件处理程序就使得代码变得过于繁琐。
  • 优化：使用一个时间处理程序同时处理多个表单元素。

优化步骤：

  1. 给表单元素添加 name属性，名称与state 相同。
  2. 根据表单元素类型获取对应值。
  3. 在 onChange事件处理程序中通过 { name } 来修改对应的 state。
class App extends React.Component {
   state = {
     txt: '',
     content: '',
     city: 'sd',
     isChecked: false
   }

   handleChange = e => {
       // 获取当前DOM对象
       const target = e.target

       // 根据类型获取对应值
       const value = target.type === 'ckeckbox'
            ? target.checked
            : target.value

       // 根据name 设置对应state
       const name = target.name
       this.setState({
          [name]: value
    })
}
   render() {
        return {
        <div>  
            <input type="text" name="txt" value={this.state.txt}  onChange={this.handleChange} />
             <textarea name="content" value={this.state.content} onChange={this.handleContent}></textarea>
             <select name="city" value={this.state.city} onChange={this.handleCity}>
                   <option value="sd">山东</option>
                   <option value="hb">河北</option>
                   <option value="tj">天津</option>
             </select>
          <br/>
             <input name="checkex" type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked}>
        </div>
      }
   }
}

ReactDOM.render(<App />,document.getElementById('root'))

2. 非受控组件

  • 说明：借助于ref，使用原生 DOM方式获取表单元素值。
  • ref 的作用：获取 DOM 或组件。

使用步骤：

  1. 调用 React.createRef() 方法创建一个 ref 对象。 
    constructor() {
     super()
     this.txtRef = React.createRef()
}
  2. 将创建好的 ref 对象添加到文本框中。 
    <input type="txt" ref={this.txtRef} />
  3. 通过 ref 对象获取到文本框的值。 
    console.log(this.txtRef.current.value)

Hgngy.
关注
专栏目录
无缝融入，即刻智能[一]：Dify-LLM大模型平台，零编码集成嵌入第三方系统，42K+星标见证专属智能方案
丨汀、的博客
08-12 1469
无缝融入，即刻智能[一]：Dify-LLM大模型平台，零编码集成嵌入第三方系统，42K+星标见证专属智能方案
2020年前端面试复习必读精选文章【赠复习导图】
xb's area
04-10 3555
前言 之前写过一篇 一年半经验如何准备阿里巴巴前端面试，给大家分享了一个面试复习导图，有很多朋友说希望能够针对每个 case 提供一个参考答案。 写答案就算了，一是精力有限，二是我觉得大家还是需要自己理解总结会比较好。 给大家整理了一下每个 case 一些还算不错的文章吧（还包括一些躺在我收藏夹里的好文章），大家可以自己看文章总结一下答案，这样也会理解更深刻。 并不是所有文章都需要看，希望是一个...
干货 | 从0到1，搭建一个体系完善的前端React组件库
携程技术
08-06 931
作者简介剑桥，携程资深前端开发工程师，关注自动化工具开发、前端工程自动构建相关技术。随着前端工程的发展，组件化的思想早已深入人心；现代的前端框架React/Vue等，都是围绕组件设计；...
【React】组件基础
学无止境
03-22 208
0、学习目标 能够使用函数创建组件-函数组件 能够掌握class语法 extends继承 能够使用class创建组件-类组件 能够给React元素绑定事件 能够使用state与setState 能够处理事件中this的指向问题 能够使用受控组件方式处理表单 1、组件基本介绍 组件是React中最基本的内容，使用React就是在使用组件 组件表示页面中的部分功能 多个组件可以实现完整的页面功能 组件特点：可复用，独立，可组合 2、React创建组件的两种方式 2.1 函数组件 函数组件：使用JS的函
React 知识点（二）
最新发布
措手不及ya的博客
08-07 903
React 组件、React 组件通信-父子通信、React 组件通信-子父通信、React 组件通信-兄弟通信、React 组件通信-跨组件通信(祖先)、props-children 属性、props-类型校验、React 生命周期、setState 扩展
React组件使用
weixin_43521028的博客
01-03 865
组件的创建方式一（函数组件—无状态组件） 函数组件又叫无状态组件，自负责数据的静态展示 使用箭头函数创建一个函数组件 组件的创建方式二（类组件—有状态组件） 类组件有自己的状态（state），负责更新UI，负责让页面动起来 抽离组件为单独的js文件 React事件处理 类组件的事件处理 函数组件的事件处理 函数组件与类组件绑定事件处理的区别 类组件绑定方法时使用this关键字绑带事件方法，而函数组件直接使用方法名进行绑定 state的使用 语法 解决this指向问题 表单处理
React的组件
LXY224的博客
09-21 681
一、组件的几种创建方式 对于React来说组件Component算是它的核心之一。用了React的时间也不短了，记录一下以便以后翻看 1 createClass 用ES5的方法React.createClass来创建一个组件 import React from 'react'; class Test = React.createClass({ render(){ ...
React组件应用
huangbaokang的博客
03-22 450
本节使用React组件做个小案例，进一步掌握React组件的强大应用之处。 首先我们构建一个Letter组件，然后渲染到example元素上。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Hello React!&lt;/title&amp
前端面试问题（适用于面试回答思路）
yaminne的博客
03-28 4989
原型和原型链 原型：构造函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。也即，每个构造函数的实例都有一个原型，叫原型对象，由实例对象的内置属性_proto_指向。每个原型都有一个 constructor 属性指向关联的构造函数。 原型用法：构造函数创建的实例可以访问实例的属性和方法，也可以访问原型的属性和方法。对于原型只能访问自己的属性和方法。考虑这一特性，如果对象公有的属性和方法，我们可以添加到原型上面，对象需要的时候直接访问原型的属性和方法就可以。 当读取实
近 20 人爆肝数周，写给初中级前端的万字高级进阶指南
yck199的博客
10-13 3281
因为微信公众号不支持打开外链，所以有兴趣获取资料的读者朋友可以公众号发送「资料」关键字或者打开 Github 链接（https://github.com/KieSun/all-of-fro...
2020年前端面试复习必读文章【超百篇文章赠复习导图】，移动开发工程师的发展路线
m0_64319112的博客
11-29 379
重新认识构造函数、原型和原型链 JavaScript深入之从原型到原型链 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一） 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（二） 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（三） JavaScript 引擎基础：原型优化 Prototypes in JavaScript JavaScript深入之创建对象的多种方式以及优缺点 详解JS原型链与继承 从__proto__和prototype来深入理解JS对象和原型链 代码复用模式.
React实践系列笔记-Components
某熊的技术之路
09-05 1025
ComponentsReact提供了和以往不一样的方式来看待视图，它以组件开发为基础。组件是React的核心概念，React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。对React应用而言，你需要分割你的页面，使其成为一个个的组件。也就是说，你的应用是由这些组件组合而成的。你可以
React 组件基本使用(一)
try my best
09-26 1880
React 组件基本使用(一) 　　React 提供了两种方式来声明组件，一种是函数式，一种是类式，就是用es6 class, 我们所有的组件都继承自React.Component. 　　函数式很简单，就像我们平常写函数一个，接受一个参数作为输入，然后进行相应的输出，只不过它输出的jsx. // welcome 函数式组件。 function Welcome(pr
React组件
老电影故事的博客
10-08 757
在React hook出来之前，函数式组件是没有自己的状态的，所以我们统一通过类组件来讲解。
【React】React 组件
Jessieeeeeee的博客
06-24 1451
React 组件
React组件三大类：类组件、函数组件、高阶组件
你若盛开，清风自来
07-15 1575
本文将详细介绍React中的类组件、函数组件和高阶组件，帮助读者理解它们的概念、使用场景和优势，以便在实际项目中合理选择和使用。类组件、函数组件和高阶组件是React中三种常见的组件类型，它们各自具有独特的特点和优势。掌握这三种组件类型的使用方法，可以根据实际需求在项目中合理选择和使用。
React入门四：React组件的使用
qq_39008205的博客
07-13 275
这里写目录标题1.组件介绍2. 组件的两种创建方式2.1 使用函数创建组件2.2 使用类创建组件2.3 抽离为独立的JS文件 1.组件介绍 使用React就是在使用组件 组件表示页面中的部分功能 组合多个组件实现完整的页面功能 特点：可复用、独立、可组合 2. 组件的两种创建方式 2.1 使用函数创建组件 使用js的函数（箭头函数）创建的组件 约定1：函数名称必须以大写字母开头              如果是小写字母开头则
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Hgngy.

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

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

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

打赏作者

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

抵扣说明：

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

余额充值