React---组件基础

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

组件

一、React 组件介绍

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

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

1、使用函数创建组件

        函数组件：使用 JS 的函数（或箭头函数）创建的组件
如下所示即为一个组件：

function Hello(){
	return (
		<div>这是一个函数组件</div>
	)
}
  • 约定1：函数名称必须以大写字母开头
  • 约定2：函数组件必须有返回值，表示该组件的结构
  • 如果返回值为 null，表示不渲染任何内容

渲染函数组件：用函数名作为组件标签名
如下：

let root = document.getElementById('root')
ReactDom.render(< Hello />,root)

打印结果为：
在这里插入图片描述

注意：组件标签可以是单标签也可以是双标签

2、 使用类创建组件

       类组件：使用 ES6 的 class 创建的组件
如下所示：

class Hello extends React.Component{
	render(){
		return (
			<div>这是一个类组件</div>
		)
	let root = document.getElementById('root')
	ReactDOM.render(<Hello />,root)

打印结果为：
在这里插入图片描述

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

三、React 事件处理

1、事件绑定

         React 事件绑定语法与 DOM 事件语法相似
语法：on+事件名称={事件处理程序}
比如：

onClick={() => {}}

注意：React 事件采用驼峰命名法，比如：onMouseEnter、onFocus

1、在函数组件中绑定事件

如下所示：

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
        function App(){
            function handleClick(){
                console.log('单击触发了函数事件处理')
            }
            return (
                <button onClick={handleClick}>单击</button>
            )
        }
        //元素渲染
        ReactDOM.render(<App />,root)
    </script>
</body>

打印结果为：
在这里插入图片描述

2、在类组件中绑定事件

如下所示：

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
        class App extends React.Component{
            handClick(){
                console.log('单击触发了类事件处理')
            }
            render(){
                return (
                    <button onClick={this.handClick}>点击</button>
                )
            }
        }
        //元素渲染
        ReactDOM.render(<App />,root)
    </script>
</body>

打印结果为：
在这里插入图片描述

2、事件对象

       可以通过事件处理程序的参数获取到事件对象，React 中的事件对象叫做：合成事件（对象）。
       合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题
       例如：我们想要通过一个a标签，不发生事件的跳转，而实现其点击事件。示例如下：

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
        class App extends React.Component{
           handleClick(e){
               e.preventDefault()
               console.log('a标签的单击事件触发了')
               }
               render(){
                   return (
                       <a href="https://blog.csdn.net/m0_48375854?type=blog" onClick={this.handleClick>bear*6</a>
                   )
           }
        }
        //元素渲染
        ReactDOM.render(<App />,root)
    </script>
</body>

结果为：
在这里插入图片描述

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

函数组件又叫做无状态组件，类组件又叫做有状态组件。

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

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

五、组件中的 state 和 setState()

1、 state的基本使用状态即数据

  • 状态是私有的，只能在组件内部使用
  • 通过 this.state 来获取状态

如下例所示，初始化count的值为0：

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
       class App extends React.Component{
         //法一：
        //    constructor(){
        //        super()
        //        //初始化state
        //        this.state = {
        //            count:0
        //        }
        //    }
        //法二：
        state = { 
            count:0
        }
           render(){
               return (
                   <h1>计数器:{this.state.count}</h1>
               )
           }
       }
        //元素渲染
        ReactDOM.render(<App />,root)
    </script>
</body>

最终输出的结果为：
在这里插入图片描述

2、 setState()修改状态

         我们想要将计数器的值从0变化到1，这个时候，我们就需要让状态发生变化，该如何修改值呢？
         语法：this.setState({ 要修改的数据 })
         setState() 作用：修改 state 和更新UI
代码如下：

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
       class App extends React.Component{
           state = {
               count:0
           }
           render(){
               return (
                  <div>
                    <h1>计数器:{this.state.count}</h1>
                   <button onClick={()=>{
                       this.setState({
                           count:this.state.count+1
                       })
                   }}>点击+1</button>
                    </div>
               )
           }
       }
        //元素渲染
        ReactDOM.render(<App />,root)
    </script>
</body>

实现效果为：

在这里插入图片描述
注意：不能直接修改 state 中的值
如果不用箭头函数写呢？如下所示：

class App extends React.Component{
        state={
             count:0
        }
        add(){
             this.setState({
                  count:this.state.count+1
              })}
         render(){
              return (
                 <div>
                      <div>修改状态的值为：{this.state.count}</div>
                      <button onClick={this.add}>+1</button>
                 </div>
              )
          }
        }

打印的结果为：
在这里插入图片描述
         可知：发生错误，这是因为事件处理程序中的this指向是undefine，而箭头函数没有this指向的问题。

六、事件绑定 this 指向

要处理事件绑定中的this指向问题，有三种方法。

1、箭头函数

         利用箭头函数自身不绑定this的特点，以 render() 方法中的 this 为组件实例，可以获取到 setState()，如下所示：

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
       class Hello extends React.Component{
           state = {
               count:0
           }
           add(){
               this.setState({count:this.state.count+1})
           }
            render(){
                return (
                   <div>
                    <h3>计数器{this.state.count}</h3>
                    <button onClick={()=>{this.add()}}>加1</button>
                    </div>
                )
            }
       }
        //元素渲染
        ReactDOM.render(<Hello />,root)
    </script>
</body>

实现效果为：
在这里插入图片描述

2、Function.prototype.bind()

         利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起
代码如下：

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
       class Hello extends React.Component{
           constructor(){
               super()
               this.state = {
                   count:0
               }
               this.add = this.add.bind(this)//绑定
           }
           add(){
               this.setState({count:this.state.count+1})
           }
            render(){
                return (
                   <div>
                    <h3>计数器{this.state.count}</h3>
                    <button onClick={this.add}>加1</button>
                    </div>
                )
            }
       }
        //元素渲染
        ReactDOM.render(<Hello />,root)
    </script>
</body>

实现效果为：
在这里插入图片描述

3、class 的实例方法

利用箭头函数形式的class实例方法
代码如下：

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
       class Hello extends React.Component{
           constructor(){
               super()
               this.state = {
                   count:0
               }
               this.add = this.add.bind(this)
           }
           add=()=>{
               this.setState({count:this.state.count+1})
           }
            render(){
                return (
                   <div>
                    <h3>计数器{this.state.count}</h3>
                    <button onClick={this.add}>加1</button>
                    </div>
                )
            }
       }
        //元素渲染
        ReactDOM.render(<Hello />,root)
    </script>
</body>

实现效果同上，不在附图。

七、表单处理

1、受控组件

         我们知道，HTML 中的表单元素是可输入的，也就是有自己的可变状态，而React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改，那么，React将 state 与表单元素值value绑定到一起，最终由 state 的值来控制表单元素的值，这样就实现了变化的状态都保存在state中，并将其值受到 React 控制的表单元素称为受控组件。
在这里插入图片描述

1、受控组件的使用步骤

（1） 在 state 中添加一个状态，作为表单元素的value值（控制表单元素值的来源）

state = { txt: '' }

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

（2）给表单元素绑定 change 事件，将 表单元素的值 设置为 state 的值（控制表单元素值的变化）

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

2、操作表单元素

例如操作文本框、富文本框、下拉菜单、复选框的值，示例如下：

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
        class App extends React.Component{
            constructor(){
                super()
                this.state = {
                    txt:'',
                    text:'',
                    sele:'xl',
                    isCheck:true
                }
            }
            handleChange = e=>{//文本框
                    this.setState({
                        txt:e.target.value
                    })
                }
            handleText = e=>{//富文本框
                this.setState({
                    text:e.target.value
                })
            }
            handleSele = e=>{//下拉菜单
                this.setState({
                    sele:e.target.value
                })
            }
            handleCheck = e=>{//复选框
               this.setState({
                isCheck:e.target.checked
               })
            }
            render(){
                return (
                   <div>
                    <input type="text" value={this.state.txt} onChange = {this.handleChange}/>
                    <br />
                    <textarea name="" id="" cols="30" rows="10" value={this.state.text} onChange={this.handleText}></textarea>
                    <br />
                    <select value={this.state.sele} onChange={this.handleSele}>
                        <option value="wh">小欢</option>
                        <option value="xl">小熊</option>
                        <option value="rc">小冉</option>
                        <option value="lj">小刘</option>
                        </select>
                    <br />
                    <input type="checkbox" value={this.state.isCheck} onChange={this.handleCheck}/>
                    </div>
                )
            }
        }
        //元素渲染
        ReactDOM.render(<App />,root)
    </script>
</body>

显示结果为：
在这里插入图片描述

3、多表单元素优化

         通过上例，我们可以看到每个表单元素都有一个单独的事件处理程序处理，使得我们的代码很太繁琐，我们可以对其进行优化，具体的实现方法是：使用一个事件处理程序同时处理多个表单元素

操作步骤为：
（1）给表单元素添加name属性，名称与 state 相同

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

（2）根据表单元素类型获取对应值

const value = target.type === 'checkbox' ? target.checked: target.value

（3）在 change 事件处理程序中通过 [name] 来修改对应的state

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

对上例进行优化，代码如下：

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
        class App extends React.Component{
            constructor(){
                super()
                this.state = {
                    txt:'',
                    text:'',
                    sele:'xl',
                    isCheck:true
                }
            }
            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="text" id="" cols="30" rows="10" value={this.state.text} onChange={this.handleForm}></textarea>
                    <br />
                    <select name = 'sele' value={this.state.sele} onChange={this.handleForm}>
                        <option value="wh">小欢</option>
                        <option value="xl">小熊</option>
                        <option value="rc">小冉</option>
                        <option value="lj">小刘</option>
                        </select>
                    <br />
                    <input type="checkbox" name='isCheck' value={this.state.isCheck} onChange={this.handleForm}/>
                    </div>
                )
            }
        }
        //元素渲染
        ReactDOM.render(<App />,root)
    </script>
</body>

最终实现效果同上。

2、非受控组件

使用步骤：
（1） 调用 React.createRef() 方法创建一个 ref 对象

constructor() {
	super()
	this.txtRef = React.createRef()
}

（2） 将创建好的 ref 对象添加到文本框中

<input type="text" ref={this.txtRef} />

（3）通过 ref 对象获取到文本框的值

console.log(this.txtRef.current.value)

示例代码如下：

在这里插入代码片<body>
    <div id="root"></div>
    <script type="text/babel">
       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 />,root)
    </script>
</body>

实现效果为：
在这里插入图片描述

bear*6
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 组件基础
酷爱前端的小陈博客
06-12 300
2.3 抽离为独立 JS 文件 组件作为一个独立的个体，一般都会放到一个单独的 JS 文件中 1.创建Hello.js 2.在 Hello.js 中导入React 3.创建组件（函数或 类） 4.在 Hello.js 中导出该组件 5.在 index.js 中导入 Hello 组件 6.渲染组件 3. React 事件处理 3.1 事件绑定 React 事件绑定语法与 DOM 事件语法相似 语法：on+事件名称={事件处理程序}，比如：onClick=
React组件基础
Jiuqianqi的博客
12-20 216
主题：React的组件介绍1 什么是react？2 创建react的方法3 组件当中的props属性和它的特点4 组件当中的state属性和它的特点5 父子组件传值6 兄弟组件传值 1 什么是react？ 1.1react的来源 react是一个用于构建用户界面的JAVACRIPT库，很多人认为react是MVC中的V（视图） 关于React 起源于 Facebook 的内部项目，因为该公司对市场...
React 拖拽改变大小，react-resizable 属性详解
热门推荐
若木無言
03-23 1万+
源于布局需求，要求Antd的Layout组件中，侧边栏Sider可以拖拽改变宽度…… 开源插件，基于react-draggable插件（同一作者），详见《react-resizable》； // 拖拽回调参数 size:{width,height} type ResizeCallbackData = { node: HTMLElement, size: {width: number, height: number}, handle: Res.
【React】组件基础
学无止境
03-22 189
0、学习目标 能够使用函数创建组件-函数组件 能够掌握class语法 extends继承 能够使用class创建组件-类组件 能够给React元素绑定事件 能够使用state与setState 能够处理事件中this的指向问题 能够使用受控组件方式处理表单 1、组件基本介绍 组件是React中最基本的内容，使用React就是在使用组件 组件表示页面中的部分功能 多个组件可以实现完整的页面功能 组件特点：可复用，独立，可组合 2、React创建组件的两种方式 2.1 函数组件 函数组件：使用JS的函
React--Component组件浅析
江拥羡橙的博客
06-06 2969
在 React 世界里，一切皆组件，我们写的 React 项目全部起源于组件。组件可以分为两类，一类是类（ Class ）组件，一类是函数（ Function ）组件。本章节，我们将一起探讨 React 中类组件和函数组件的定义，不同组件的通信方式，以及常规组件的强化方式，帮助你全方位认识 React 组件，从而对 React 的底层逻辑有进一步的理解。想要理解 React 组件是什么？我们首先要来分析一下组件和常规的函数和类到底有什么本质的区别。/* 类 */ class textClass {
react-cornerstone-viewport:React的基础医学图像视口组件
05-06
react-cornerstone-viewport React的基础医学图像视口组件 文档和示例： : 安装# # NPMnpm install --save react-cornerstone-viewport# # Yarnyarn add react-cornerstone-viewport用法import React , { Component ...
react-native-ui-lib：React Native的UI组件库
02-01
用于React Native的UI工具集和组件库 查看我们的。 我们的 下载我们的Expo演示应用 （您将需要Expo App） 正在安装 请参阅安装说明。 新的主要版本5.0 查看 对于React Native> = 0.60.0 请使用react-native-ui-...
react-force-graph：2D，3D，VR和AR力向图的React组件
01-28
该模块导出具有相同接口的4个React组件： ForceGraph2D ， ForceGraph3D ， ForceGraphVR和ForceGraphAR 。 使用力导向的迭代布局，每一个都可以用来表示2维或3维空间中的图形数据结构。 为了方便依赖，所有组件也...
react-countdown：React的可自定义倒数组件
02-06
React的可自定义倒计时组件。 入门 您可以通过npm或yarn安装模块： npm install react-countdown --save yarn add react-countdown 动机 首先，这是一个小型Web应用程序的一部分，其想法是将倒计时组件与主程序包...
react-foundation：基础作为React组件
02-04
React + Foundation 为的组件。 演示版 动机 功能丰富且易于定制。... 目标是按照框架的最佳实践将Foundation的每个部分包装到可重用的React组件中。 主要重点是易用性和可扩展性。 只要有可能，我们就会使用纯渲
主流框架选择：React、Angular、Vue的详细比较
一些平时在开发过程中遇到的常见问题，分享给大家
06-17 783
主流框架选择：React、Angular、Vue的详细比较
在React中，如何利用React.memo函数对函数组件进行优化？
weixin_44714345的博客
06-21 301
React.memo是 React 的一个高阶组件，用于对函数组件进行性能优化。它通过记忆化（memoization）来避免不必要的重新渲染。当组件的 props 没有变化时，React.memo可以防止组件重新渲染，从而提高应用的性能。
React的form表单自定义校验规则
chen_ac的博客
06-18 305
React的form表单自定义校验规则
react使用OpenLayers实现类似船某网在地图放大时展示具体船舶符号缩小时显示聚合小点效果
左直拳的马桶_日用桶
06-19 206
如图所示，地图缩小（即比例尺放大）时，显示聚合小绿点；
React 中的 ErrorBoundary
hawk2014bj的博客
06-18 551
React 框架中通过 getDerivedStateFromError 方法进行异常处理，项目开发可以自定义一个类组件并实现该方法进行组件异常处理。
React实现列表列宽可拖拽
最新发布
weixin_46031207的博客
06-21 153
【代码】React实现列表列宽可拖拽。
React如何配置路由
weixin_47121832的博客
06-15 305
react配置路由方法
react捡起来了
Jason_yuxuan的博客
06-16 336
react脚手架搭建
react 0至1 案例
m0_60559048的博客
06-14 360
2.通过记录type和当前list中的type 匹配。* 1. 渲染导航 Tab 和高亮。* 导航 Tab 的渲染和操作。* 最热 => 喜欢数量降序。* 最新 => 创建时间降序。* 1.点击记录当前type。* 2. 评论列表排序。
react-bootstrap Table组件样式设置
06-06
React-Bootstrap 的 `Table` 组件是 Bootstrap 的 `table` 元素的 React 实现，所以可以通过 Bootstrap 的样式类来设置样式。 以下是一些常用的样式类： - `table`: 基础样式类，将表格的边框和宽度设置为默认值。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值