【前端框架】react框架 第三章 react组件基础

最新推荐文章于 2024-07-06 10:21:35 发布
最新推荐文章于 2024-07-06 10:21:35 发布
阅读量138 收藏
点赞数
分类专栏： 前端框架【react】 文章标签： react.js 前端框架 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiqizgl777/article/details/129338245
版权

目录

组件的特点：可复用，独立，可组合。

1. React组件的两种创建方式

法一： 使用函数创建组件

  1. 函数组件：使用JS的函数（或箭头函数）创建组件。
  2. 约定1: 函数名称必须以大写字母开头,React据此区分组件和普通的React元素。
  3. 约定2: 函数名称必须有返回值，表示该组件的结构。
  4. 如果返回值为null，表示不渲染任何内容。
  5. 使用函数名作为组件标签名。组件标签可以是单标签也可以是双标签。
//创建函数组件
function Hello(){
    return(
        <div>函数组件</div>
    )
}

ReactDOM.render(<Hello />, root)// 渲染组件：用函数名作为组件标签名

const Hello = () => <div>箭头函数组件</div>//创建函数组件

ReactDOM.render(<Hello />, root)// 渲染组件：用函数名作为组件标签名

法二：使用类创建组件

  1. 类组件：使用ES6的class创建的组件
  2. 约定1: 类名也必须以大写字母开头。
  3. 约定2: 类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性。
  4. 约定3: 类组件必须提供render()方法
  5. 约定4: render()方法必须有返回值，表示该组件的结构。
// 创建类组件
class Hello extends React.Component {
    render(){
        return(
            <div>类组件</div>
        )
    }
}

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

抽离为独立JS文件

抽离为独立JS文件的步骤：

  1. 在项目名下的src文件夹中创建一个JS文件，这里名为Hello.js.
  2. 在Hello.js中导入React
  3. 创建组件（函数或类）
  4. 在Hello.js中导出该组件
  5. 在index.js中导入Hello组件
  6. 渲染组件

在Hello.js文件中

//导入React
import React from "react"
//创建组件
class Hello extends React.Component{
    render() {
        return(<div>抽离到JS文件中的组件</div>)
    }
}
//导出组件
export default Hello

在index.js文件中：

//导入React和ReactDOM
import React from 'react'
import ReactDOM from 'react-dom'
// 导入Hello组件
import Hello from './Hello'

// 渲染导入的Hello组件
ReactDOM.render(<Hello />, document.getElementById('root'))

2. React事件处理

事件绑定

  1. React事件绑定语法与DOM事件语法相似
  2. 语法：on+事件={事件处理程序}, 比如：onClick={() =>{}}
  3. 注意：React事件采用驼峰命名法，比如：onMouseEnter, onFocus

在类组件中绑定事件：
在index.js文件中

//React事件处理
class App extends React.Component{
    handleClick() {//事件处理程序
        console.log('触发单击事件')
    }
    render() {
        return (
            <button onClick={this.handleClick}>点击</button>
        )
    }
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

在函数组件绑定事件：
在index.js文件中

//React事件处理,通过函数组件绑定事件
function App{
    function handleClick() {//事件处理程序
        console.log('触发单击事件')
    }
    
    return (
        <button onClick={handleClick}>点击</button>
    )
    
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

综上：只有类组件绑定事件中有this指向，函数中没有。

事件对象

  1. 可以通过事件处理程序的参数获取到事件对象
  2. React中的事件对象叫做：合成事件（对象）
  3. 合成事件对象：兼容所有浏览器，无需担心跨浏览器兼容性问题
function handleClick(e) {
    e.preventDefault()
    console.log('事件对象',e)
}
<a onClick={handleClick}>这里不会跳转页面</a>

代码实现：

import React from 'react'
import ReactDOM from 'react-dom'
//React事件对象
class App extends React.Component{
    handleClick(e) {
        e.preventDefault()//阻止浏览器的默认行为
        console.log('触发单击事件')
    }
    render() {
        return (
            <a href='https://editor.csdn.net'>知识网</a>
        )
    }   
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

3. 有状态组件和无状态组件

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

4. 组件中的state和setState

state的基本使用

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

法一：

class Hello extends React.Component{
    constructor(){
        super()
        this.state ={//初始化state
            count:0
        }
    }
    render(){
        return(
            <div>有状态组件</div>
        )
    }
}

代码实现：

import React from 'react'
import ReactDOM from 'react-dom'

class Hello extends React.Component{
    constructor(){
        super()
        this.state ={//初始化state
            count:0
        }
    }
    render(){
        return(
            <div>
                <h1>计数器：{this.state.count}</h1>
            </div>
        )
    }
}

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

法二：

class Hello extends React.Component{
    // 简化语法
    state ={//初始化state
        count:0
    }
        
    render(){
        return(
            <div>有状态组件</div>
        )
    }
}

代码实现：

import React from 'react'
import ReactDOM from 'react-dom'

class Hello extends React.Component{
    // 简化语法
    state ={//初始化state
        count:10
    }   
    render(){
        return(
            <div>
                <h1>计数器：{this.state.count}</h1>
            </div>
        )
    }
}

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

setState()修改状态

  1. 状态是可变的
  2. 语法：this.setState({要修改的数据})
  3. 注意：不要直接修改state中的值，这是错误的！
  4. setState()作用：1. 修改state。2. 更新UI
  5. 思想：数据驱动视图
// 正确
this.setState({
    count:this.state.count +1
})


// 错误
this.state.count +1

代码实现：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
    // 简化语法
    state ={//初始化state
        count:10
    }
    render(){
        return(
            <div>
                <h1>计数器：{this.state.count}</h1>
                <button onClick={() =>{
                    this.setState({
                        count:this.count+1
                    })
                }}>+1</button>
            </div>
        )
    }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

从JSX中抽离事件处理程序

  1. JSX中掺杂过多JS逻辑代码，会显得非常混乱
  2. 推荐：将逻辑抽离到单独的方法中，保证JSX结构清晰
  3. 原因：事件处理程序中this的值为undefined
  4. 希望：this指向组件实例（render方法中的this即为组件实例

5. 事件绑定this指向

事件绑定this指向有三种方法

箭头函数

  1. 利用箭头函数自身不绑定this的特点
  2. render()方法中的this为组件实例，可以获取到setState()
class App extends React.Component{
    onIncrement(){
        this.setState({...})
    }
    render(){
        // 箭头函数中的this指向外部环境，此处为：render()方法
        return(
            <button onClick={() => this.onIncrement()}></button>
        )
        
    }
}

代码实现：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
    state = {
        count:0
    }
    // 事件处理程序
    onIncrement(){
        this.setState({count:this.state.count +1})
    }
    render(){
        // 箭头函数中的this指向外部环境，此处为：render()方法
        return(
            <div>
                <h1>计数器：{this.state.count}</h1>
                <button onClick={() => this.onIncrement()}>+1</button>
            </div>
        )    
    }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

Function.prototype.bind()

  1. 利用ES5中的bind()方法，将事件处理程序中的this与组件实例绑定
class App extends React.Component{
    // 事件处理程序
    onIncrement(){
        super()
        this.onIncrement = this.onIncrement.bind(this)
    }
    //...省略 onIncrement
    render(){
        // 箭头函数中的this指向外部环境，此处为：render()方法
        return(
           
            <button onClick={() => this.onIncrement()}>+1</button>
            
        )    
    }
}

代码实现：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
    constructor() {
        super()
        tate = {
            count:0
        }
        this.onIncrement = this.onIncrement.bind(this)
    }
    
    // 事件处理程序
    onIncrement() {
        console.log('事件处理程序中的this：', this)
        this.setState({
            count:this.state.count +1
        })
    }

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

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

class的实例方法（推荐）

  1. 利用箭头函数形式的class实例方法
  2. 注意：该语法是实验性语法，但是，由于babel的存在可以直接使用
class App extends React.Component{
    onIncrement = () => {
        this.setState({...})
    }
    render(){
        return(
            
            <button onClick={this.onIncrement}>+1</button>
           
        )    
    }
}

代码实现：

import React from 'react'
import ReactDOM from 'react-dom'

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

    // 事件处理程序
    onIncrement = () => {
        console.log('事件处理程序中的this：', this)
        this.setState({
            count:this.state.count +1
        })
    }

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

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

总结

1. 推荐：使用class的实例方法

class App extends React.Component{
    // 事件处理程序
    onIncrement = () => {
        this.setState({...})
    }
}

2. 箭头函数

  <button onClick={() => this.onIncrement()}></button>

3. bind

constructor(){
	super()
	this.onIncrement = this.onIncrement.bind(this)
}

6. 表单处理

有两种方法

受控组件（推荐）

  1. HTML中的表单元素是可输入的，也就是有自己的可变状态
  2. 而，React中可变状态通常保存在state中，并且只能通过setState()方法来修改
  3. React将state与表单元素值value绑定到一起，由state的值来控制表单元素的值
<input type="text" value={this.state.txt} />

步骤：

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

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

代码实现：

import React from 'react'
import ReactDOM from 'react-dom'
// 受控组件：其值受到React控制的表单元素
// 操作文本框的值
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'))

示例：

import React from 'react'
import ReactDOM from 'react-dom'
// 受控组件示例
class App extends React.Component{
    state = {
        txt:'',
        content:'',
        city:'bj',
        isChecked:false
    }
    handleChange = e => {
        this.setState({
            txt:e.target.value
        })
    }
    // 处理富文本框的变化
    handleContent = e =>{
        this.setState({
            content:e.target.value
        })

    }
    // 处理下拉框的变化
    handleCity = e =>{
        this.setState({
            city:e.target.value
        })

    }
    // 处理复选框的变化
    handleChecked = e =>{
        this.setState({
            isChecked:e.target.checked
        })

    }

    render(){
        return(
            <div>
                {/*文本框*/}
                <input type="text" value={this.state.txt} onChange={this.handleChange} />
                <br/>

                {/*富文本框*/}
                <textarea value={this.state.content} onChange={this.handleContent} ></textarea>
                <br/>

                {/*下拉框*/}
                <select value={this.state.city} onChange={this.handleCity}>
                    <option value="sh">上海</option>
                    <option value="bj">北京</option>
                    <option value="gz">广州</option>
                </select>
                <br/>
                

                {/*复选框*/}
                <input type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked}/>
                

            </div>
        )    
    }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

示例总结：

  1. 文本框、富文本框、下拉框操作value属性
  2. 复选框操作checked属性

示例优化：

多表单元素优化步骤：

  1. 给表单元素添加name属性，名称与state相同
  2. 根据表单元素类型获取对应值
  3. 在change事件处理程序中通过[name]来修改对应的state
<input type="text" name="txt" value={this.state.txt} onChange={this.handleForm} />

       // 根据表单元素类型获取对应值
        const value = target.type === 'checkbox'
            ? target.checked
            : target.value
            
		//根据name设置对应state
        this.setState({
            [name]:value
        })

代码实现：

import React from 'react'
import ReactDOM from 'react-dom'
// 受控组件示例
class App extends React.Component{
    state = {
        txt:'',
        content:'',
        city:'bj',
        isChecked:false
    }
    handleForm = e => {
        // 获取当前DOM对象
        const target = e.target

        // 根据类型获取值
        const value = target.type === 'checkbox'
            ? target.checked
            : target.value
        
        // 获取name
        const name = target.name

        this.setState({
            [name]:value
        })
    }
    

    render(){
        return(
            <div>
                {/*文本框*/}
                <input type="text" name="txt" value={this.state.txt} onChange={this.handleForm} />
                <br/>

                {/*富文本框*/}
                <textarea  name="content" value={this.state.content} onChange={this.handleForm} ></textarea>
                <br/>

                {/*下拉框*/}
                <select name="city" value={this.state.city} onChange={this.handleForm}>
                    <option value="sh">上海</option>
                    <option value="bj">北京</option>
                    <option value="gz">广州</option>
                </select>
                <br/>
                

                {/*复选框*/}
                <input type="checkbox" name="isChecked" checked={this.state.isChecked} onChange={this.handleForm}/>
            </div>
        )    
    }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

非受控组件（DOM方式）

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

非受控组件使用步骤：

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

代码实现：

import React from 'react'
import ReactDOM from 'react-dom'

// 非受控组件
class App extends React.Component{
    constructor() {
        super()
        // 创建ref
        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>
        )
    }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))
@ZGLi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端框架---react基础
07-16
- **组件生命周期**：React组件有多个生命周期方法，如 `componentDidMount`、`shouldComponentUpdate` 和 `componentDidUpdate`，允许在特定阶段执行逻辑，如初始化、更新和卸载时的操作。 **路由（Router）** ...
前端开发-React框架相关基础讲解.zip
06-05
这个压缩包“前端开发-React框架相关基础讲解.zip”提供了关于React框架的基础知识，帮助初学者理解并掌握React的核心概念和技术。 在“前端开发-React框架.pdf”中，可能涵盖以下关键知识点： 1. **组件化编程**...
[React]关于React的组件
梦想成为全栈的切图仔
09-16 1292
在react中，我们可以这样认为一切皆组件。我们的项目就是基于组件。class 是类组件，function 则为函数式组件。本章我们就一起来仔仔细细的玩懂React的组件。
React框架-浅谈组件
weixin_48852584的博客
10-17 180
文章目录前言一、类组件二、无状态组件（函数式组件）三、无状态组件与类组件的区别1、类组件state的特点2、无状态组件（函数式组件）Props 前言 React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。 一、类组件 import React from "react" import {Child1} from "@/components" export default
React常用的5个UI框架
热门推荐
祈澈菇凉
06-02 5万+
1：Ant-design 推荐指数：star:60.2k 官网：https://ant.design/docs/react/introduce-cn Github: https://github.com/ant-design/ant-design/ Ant Design一套企业级 UI 设计语言和 React 组件库，基于Ant Design 设计体系的 React UI 组件库，用于研发企业级中...
React框架（二）React组件
qq_43393963的博客
02-04 215
React组件化的思想 将项目中的页面按照功能（或者是位置等等）划分为一个个块儿。 如果有的块儿是每个页面或者大多数页面共有的部分，比如导航栏、菜单栏、翻页模块之类的，就写在公共组件里面，然后再需要的页面进行渲染。如果是某个页面特有的模块，就给每一个页面单独写一个文件，里面定义该模块的组件并于公共组件结合进行渲染。 某个页面内若是有新的弹窗，则在父页面下建立新的文件进行组件的定义，避免一个文件过...
React框架入门学习（一）生成第一个实例
山鬼谣弋痕夕的博客
07-09 6250
ReactJs简介 反应最初来自Facebook的内部的广告系统项目，项目实施过程中前端开发遇到了巨大挑战，代码变得越来越臃肿且混乱不堪，难以维护于是，痛定思痛，他们决定抛开很多所谓的“最佳实践” ，重新思考前端界面的构建方式，于是就有了反应。 反应过来的设计依托于Facebook的另一个叫做FLUX的项目，FLUX是一个为了解决Facebook的在MVC应用中碰到的工程性问题而生的设计模式，...
项目的前端部分, 基于React框架设计实现
06-09
在“RunnerGo项目的前端部分, 基于React框架设计实现”这个压缩包中，我们可以期待找到关于这个项目的所有前端源代码，包括React组件、样式文件、配置文件、路由设置以及可能的第三方库集成。通过研究这些文件，可以...
react开发框架.zip
06-20
React开发框架是一个用于构建用户界面的JavaScript库，尤其适合单页应用（SPA）的开发。React的核心理念是组件化，它允许开发者将UI拆分成独立、可复用的组件，每个组件都有自己的状态和生命周期方法。这个“react...
react-基于React的前端框架用于构建Office和Office365的UI体验
08-14
Redux作为一个流行的第三方库，提供了一种可预测的状态容器。通过Redux，可以集中管理应用的状态，并通过Actions和Reducers来更新状态，确保状态变化的可追踪性和可测试性。 6. **性能优化** React利用虚拟DOM提高...
React框架概述
橘猫吃不胖的博客
03-02 2万+
React框架概述1 React简介1.1 React概述1.2 React开发环境搭建1.3 第一个React应用1.4 React虚拟DOM1.5 ReactDOM.render()方法1.6 React的渲染机制1.7 React优势1.8 React脚手架2 React JSX2.1 JSX介绍2.2 JSX的应用2.3 JSX算数表达式2.4 JSX条件表达式2.5 JSX嵌入表达式2.6 JSX对象表达式2.7 JSX函数表达式2.8 JSX数组表达式2.9 JSX样式表达式2.10 JSX注释
【JavaScript 教程】基于 React 的可视化编辑平台实践
weixin_46837673的博客
04-10 926
基于 React 的可视化编辑平台实践 本文主要介绍了基于 React 构建可视化编辑平台的实践，包括对可视化拖拽布局、在线编辑、同构直出的实现。 背景 目前，HRG 的英才校园在线招聘业务有大量的企业定制化需求，企业在英才校园做招聘，同时也希望有自己的招聘主页，每年都会招聘一部分兼职同学来开发这类的招聘主页，这类招聘主页通常不复杂，但是如果全部需要前端同学实现的话，还是很耗时费力的，我们希望...
微前端在网易七鱼的实践
netease_im的博客
12-16 1075
一、前言 网易七鱼是提供围绕客户服务与智能营销的 SaaS 平台。在七鱼业务中，有在线系统、呼叫系统、机器人、工单系统、数据大屏等业务线，它们分布在两个业务端，管理端和客服端。这两个端的功能框架类似，都是由外层框架（顶部导航、一级菜单）及中间的内容区组成。 二、业务现状 随着业务体量的增大与功能的增多，主系统作为一个巨石应用复杂度越来越高，所有的业务线耦合在一起，在系统构建、业务分离、开发维护方面带来了新的挑战。 为解决以上问题，我们最初采用了 「MPA + iframe」 的技术方案。先按业务维度
react_后台管理_项目
分享程序相关知识
07-02 333
本项目使用的是 react+ts+scss 技术栈。
react v18——env环境变量配置、打包配置（craco）
weixin_42289080的博客
07-05 216
文件，如 .env.development。像其他项目一样，在根目录新建。（在使用less篇，有。
vue中数据响应式选择ref还是reactive?
weixin_55800388的博客
06-25 497
语法上来说，两者都可以实现响应式，之所以有ref和reactive，是为了更加方便的将不同的数据类型分类处理。：reactive只能声明对象/数组，ref可以响应任意数据类型，但是使用时需要加.value进行解包。解构对象时，要想保持对象的响应式，注意使用toRefs函数，否则会失去响应式。但是在使用时，reactive直接赋值非常容易丢失响应式。
在本地运行React集成TypeScript的项目
最新发布
AIGCTribe的博客
07-06 843
首先问ChatGPT，贴一段TypeScript代码，问ChatGPT：要运行以上代码，该怎么操作？{ date: '2023-02-22', event: 'ChatYuan升级' },{ date: '2023-03-30', event: '入选AIGC50' },{ date: '2023-08-28', event: '公众号最后更新' },{ date: '2023-02-03', event: 'API发布' },{ date: '2023-03-24', event: '支持手机' },
React@16.x（46）路由v5.x（11）源码（3）- 实现 Router
qq_40147756的博客
07-02 419
实现 Router
React antd umi 监听当前页面离开，在菜单栏提示操作
Martin 的博客
07-03 148
需求是我这里有个页面，离开当前页面之后，需要在菜单栏显示个提示，也就是Tour。
web前端react框架
02-20
是前端很火的框架，包含jsx使用规则，严格模式<React.StrictMode>，函数组件，类组件的区别，super是否添加参数问题，setState进行异步修改状态，以及状态提升，类组件生命周期（废弃掉的），组件之间的优化，受控和非受控之间的区别，如何改变this指向，虚拟dom，props传参，路由加载（重定向），动态路由配置，以及路由模式，单页面应用，redux使用流程，内置api，副作用，监听获取修改，关于hook使用，简介，解决class（类）组件问题，懒加载组件，服务端渲染

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

@ZGLi

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

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

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

打赏作者

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

抵扣说明：

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

余额充值