React基础知识点总结--2️⃣

最新推荐文章于 2024-05-06 18:22:56 发布
最新推荐文章于 2024-05-06 18:22:56 发布
阅读量336 收藏
点赞数 1
分类专栏： 前端知识学习 文章标签： react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Slamande/article/details/120381757
版权
这篇博客主要介绍了React组件的基础知识，包括组件的两种创建方式——函数组件和类组件，事件处理，有状态和无状态组件，以及如何使用state和setState()。重点讲解了组件中的事件绑定this指向问题，推荐使用受控组件处理表单，并提供了相关的步骤和代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

三、React组件基础

目标

◆ 能够使用函数创建组件
◆ 能够使用class创建组件
◆ 能够给React元素绑定事件
◆ 能够使用state和setState()
◆ 能够处理事件中的this指向问题
◆ 能够使用受控组件方式处理表单

目录

◆ React 组件介绍
◆ React 组件的两种创建方式
◆ React 事件处理
◆ 有状态组件和无状态组件
◆ 组件中的state和setState()
◆ 事件绑定 this指向
◆ 表单处理

1.React组件介绍

● 组件是React的一等公民,使用React就是在用组件

● 组件表示顽面中的部分功能

● 组合多个组件实现完整的页面功能

● 特点:可复用、独立、可组合

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

2.1 使用函数创建组件

● 函数组件:使用JS的函数(或箭头函数)创建的组件
● 约定1: 函数名称必须以大写字母开头
● 约定2 :函数组件必须有返回值,表示该组件的结构
● 如果返回值为 null ,表示不渲染任何内容

function Hello(){
    return(
        <div>我是Hello组件</div>
    )
}
// 箭头函数
// const Hello = () =><div>我是箭头函数创建的Hello组件</div>
ReactDOM.render(<Hello/>,document.getElementById('root'))

小结：

● 使用JS中的函数创建的组件叫做 :函数组件
● 函数组件必须有返回值
● 组件名称必须以大写字母开头，React据此区分组件和普通的React元素
● 使用函数名作为组件标签名

2.2 使用类创建组件

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

class Hello extends React.Component{
    render() {
        return(
            <div>我是类组件</div>
        )
    }
}
ReactDOM.render(<Hello/>,document.getElementById('root'))

2.3 抽离为独立JS文件

● 思考:项目中的组件多了之后,该如何组织这些组件呢?

● 选择一: 将所有组件放在同一个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>
           )
       }
   }
   export default Hello

   // index.js
   import Hello from './Hello';
   ReactDOM.render(<Hello/>,document.getElementById('root'))

3. React事件处理

3.1 事件绑定

● React 事件绑定语法与DOM事件语法相似

● 语法: on+事件名称= {事件处理程序} ,比如: onClick={()=> {}}

● 注意: React事件采用驼峰命名法,比如: onMouseEnter、onFocus

class App extends React.Component{
  handleClick(){
    console.log('单击');
  }
  render(){
    return(
      <button onClick={this.handleClick}>绑定事件处理--单机事件</button>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

● 在函数组件中绑定事件:

function App() {
  function handleClick() {
    console.log('单击事件触发了')
  }
  return (
    <button onClick={handleClick}>点我</button>
  )
}
ReactDOM.render(<App/>,document.getElementById('root'))

3.2 事件对象

● 可以通过事件处理程序的参数获取到事件对象
● React 中的事件对象叫做:合成事件(对象)
●合成事件 :兼容所有浏览器、无需担心跨浏览器兼容性问题

class App extends React.Component{
  handleClick(e){
    // 阻止浏览器默认行为
    e.preventDefault()
    console.log('a标签被触发了');
  }
  render(){
    return(
      <a href="https://www.baidu.com/" onClick={this.handleClick}>事件对象</a>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

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

● 函数组件又叫做无状态组件,类组件又叫做有状态组件
● 状态( state )即数据
● 函数组件没有自己的状态,只负责数据展示(静)
● 类组件有自己的状态,负责更新UI,页面“动”起来

5. 组件中的state和setState

5.1 state的基本使用

● 状态( state )即数据,是组件内部的私有数据,只能在组件内部使用

● state 的值是对象,表示一个组件中可以有多个数据

● 获取状态: this.state

class App extends React.Component{
  // 初始state
  state= {
      count:10
  }
  render(){
    return(
        // 获取数据
      <h1>计数器：{this.state.count}</h1>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

5.2 setState()修改状态

● 状态是可变的

● 语法: this.setState({要修改的数据})

● 注意:不要直接修改state中的值,这是错误的!

● setState()作用: 1.修改state 2.更新UI

● 思想:数据驱动视图

class App extends React.Component{
  // 初始state
  state = {
      count:10
  }
  render(){
    return(
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={()=>{
          this.setState({
            count:this.state.count+1
          })
        }}>+1</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

5.3 从JSX中抽离事件处理程序

● JSX 中掺杂过多JS逻辑代码,会显得非常混乱

● 推荐: 将逻辑抽离到单独的方法中,保证JSX结构清晰

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xPDEtQBh-1632039956750)(C:\Users\十\AppData\Roaming\Typora\typora-user-images\image-20210806092743767.png)]

● 原因: 事件处理程序中this的值为undefined

● 希望: this指向组件实例( render方法中的this即为组件实例)

6. 事件绑定this指向

1. 箭头函数

● 利用箭头函数自身不绑定this的特点

onIncrement () {
  this.setState({ 
    count:this.state.count+1
  })
}
//render()
<button onClick={ () => this.onIncrement () }></button>

2. Function.prototype.bind()

● 利用ES5中的bind方法,将事件处理程序中的this与组件实例绑定到一起

constructor(){
   super()
   this.state= {
     count:10
   }
   this.onIncrement = this.onIncrement.bind(this)
 }
 onIncrement () {
   this.setState({ 
     count:this.state.count+1
   })
 }
//render()
<button onClick={this.onIncrement}>+1</button>

*3. class 的实例方法 (推荐使用)

● 利用箭头函数形式的class实例方法（类）

● 注意:该语法是实验性语法,但是,由于babel的存在可以直接使用

state= {
    count:10
  }
  onIncrement = () => {
    this.setState({ 
      count:this.state.count+1
    })
  }
 // render() 
<button onClick={this.onIncrement}>+1</button>

7. 表单处理

7.1 受控组件(推荐)

● HTML中的表单元素是可输入的，也就是有自己的可变状态

● 而，React中可变状态通常保存在state中,并且只能通过setState()方法来修改

● 两者冲突

● React将 state与表单元素值value绑定到一起,由state的值来控制表单元素的值

● 受控组件:其值受到React控制的表单元素

步骤：

  1. 在state中添加一个状态,作为表单元素的value值(控制表单元素值的来源)

  2. 给表单元素绑定change事件,将表单元素的值设置为state的值(控制表单元素值的变化)

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

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

  3. 文本框 富文本框 下拉框 都是通过 value 和 onChange 处理

    value={this.state.txt} onChange={this.handleChange}

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

  4. 复选框 是通过 checked 和 onChange 处理

    checked={this.state.isChecked} onChange={this.handleChecked}

    handleChange=e=>{ this.setState({ isChecked: e.target.checked }) }

多表单元素优化：

● 问题: 每个表单元素都有一个单独的事件处理程序处理太繁琐
● 优化:使用一个事件处理程序同时处理多个表单元素

多表单元素优化步骤:

  1. 给表单元素添加name属性,名称与state相同
  2. 根据表单元素类型获取对应值
  3. 在change事件处理程序中通过[name]来修改对应的state
完整代码：
class Hello extends React.Component {
  state = { 
    txt: '',
    content: '',
    city: 'sh',
    isChecked: false,
  }
//方式一
render() {
    return (
      <input type="text" value={this.state.txt}
      onChange={e => this.setState({ txt: e.target.value }) }
      />
    )
  }

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


//优化
  handleForm=e=>{
    const target = e.target
    //根据表单元素类型获取值
    const value = target.type === 'checkbox'? target.checked: target.value
    const name = target.name
    //根据name设置对应state
    this.setState( {
    [name] : value
    })
  }
  render() {
      return (
        <div>
          <input type="text" name="txt" value={this.state.txt} onChange= {this.handleForm} />
          <textarea name="content" value={this.state.content} onChange= {this.handleForm}></textarea>
          <select name="city" value={this.state.city} onChange= {this.handleForm}>
            <option value='sh'>sh</option>
            <option value='gz'>gz</option>
            <option value='bj'>bj</option>
          </select>
          <input type="checkbox" name="isChecked" checked={this.state.isChecked} onChange={this.handleForm} />
        </div>
      )
    }

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

7.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)
完整代码：
class Hello extends React.Component {
  //1.调用React.createRef()方法创建一个ref对象
  constructor() {
    super()
    this.txtRef = React.createRef()
  }
  handleClick = () => {
    //3.通过ref对象获取到文本框的值
    console.log(this.txtRef.current.value)
  }
  render() {
    return (
      <div>
        {/* 2.将创建好的ref对象添加到文本框中 */}
        <input type="text" ref={this.txtRef} />
        <button onClick={this.handleClick}>获取输入框的值</button>
      </div>
    )
  }
}

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

8. 总结–React组件基础

  1. 组件的两种创建方式:函数组件和类组件
  2. 无状态(函数)组件,负责静态结构展示
  3. 有状态(类)组件,负责更新UI ,让页面动起来
  4. 绑定事件注意this指向问题
  5. 推荐使用受控组件来处理表单
  6. 完全利用JS语言的能力创建组件,这是React的思想

案例：

  1. 渲染评论列表(列表渲染)

    ① 在state中初始化评论列表数据
    ② 使用数组的map方法遍历state中的列表数据
    ③ 给每个被遍历的Ii元素添加key属性

  2. 没有评论数据时渲染:暂无评论(条件渲染)

    ① 判断列表数据的长度是否为0
    ② 如果为0 ,则渲染暂无评论

  3. 获取评论信息,包括评论人和评论内容(受控组件)

    ① 使用受控组件方式处理表单元素

  4. 发表评论,更新评论列表(setState())

    ① 给按钮绑定单击事件
    ② 在事件处理程序中,通过state获取评论信息
    ③ 将评论信息添加到state中,并调用setState()方法更新state

    ④ 边界情况:清空文本框
    ⑤ 边界情况:非空判断

React基础知识点总结--1️⃣
Slamande的博客
08-16 411
一、React基础 目标 能够说出React是什么 能够说出React的特点 能够掌握React的基本使用 能够使用React脚手架 目录 React概述 React的基本使用 React脚手架的使用 1. React概述 1.1 什么是React React是一-个用于构建用户界面的JavaScript库。 用户界面: HTML页面(前端) React主要用来写HTML页面,或构建Web应用 如果从MVC的角度来看, React仅仅是视图层(V) ,也就是只负责视图的渲染,而并非提供了 完整的M和C的功能
React基础知识点总结--4
Slamande的博客
10-30 261
五、React原理揭秘 目标 ◆ 能够知道setState()更新数据是异步的 ◆ 能够知道JSX语法的转化过程 ◆ 能够说出React组件的更新机制 ◆ 能够对组件进行性能优化 ◆ 能够说出虚拟DOM和Diff算法 目录 ◆ setState() 的说明 ◆ JSX语法的转化过程 ◆ 组件更新机制 ◆ 组件性能优化 ◆ 虚拟DOM和Diff算法 1.setState() 的说明 1.1 更新数据 ● setState()是异步更新数据的 ● 注意:使用该语法时,后面的setState()不要依赖于前面的s
React 基础知识点总结
weixin_48786946的博客
02-01 357
1. React 介绍 React 是一个用于构建用户界面的 JavaScript 库，它只负责应用的视图层，帮助开发人员构建快速且交互式的 web 应用程序。 React 使用组件的方式构建用户界面。 2. JSX 语法 在 React 中使用 JSX 语法描述用户界面，它是一种 JavaScript 语法扩展。 在 React 代码执行之前，Babel 会将 JSX 语法转换为标准的 JavaScript API。 JSX 语法就是一种语法糖，让开发人员使用更加舒服的代码构建用户界面。 2.1 在 JS
class Example extends React.Component { handleClick() { console.log('Button was clicked'); } render(...
weixin_35757531的博客
02-10 112
这段代码中的 handleClick 方法没有被绑定到 this，所以它在 render 方法中是不可用的。解决方法是在 handleClick 方法的定义中使用箭头函数或在构造函数中绑定 this。 例如： class Example extends React.Component { constructor(props) { super(props); this.handl...
React：基础知识学习
KaiSarH
12-10 909
React基础知识学习
2024年前端最全【React入门必备知识篇03】--- React 组件进阶(1)，史上超级详细
最新发布
2301_82243710的博客
05-06 1013
意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等；组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程；生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数；钩子函数的作用：为开发人员在不同阶段操作组件提供了时机；只有 类组件 才有生命周期；打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js。
fe-interview：前端面试每日3 + 1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！每天早上5点纯手工发布面试题（死磕自己，愉悦大家），4000 +道前端面试题全面覆盖，HTMLCSSJavaScriptVueReactNodejsTypeScriptECMAScritptWebpackJquery小程序软技能……
02-03
:four-thirty:今天的知识点（2021.02.01）-第657天 :keycap_1: [html] :keycap_2: [css] :keycap_3: [js] :keycap_4: [软技能] :two-hump_camel:历史译文 第1天（2019.04.17） :keycap_1: [html] :keycap_2: [css...
初学react入门知识整理
Danile-丹丹的博客
05-16 792
初学react总结：react的最大优点：1、组件化类似于web component的组件封装，面向未来。可复用，可组合的组件框架2、虚拟dom（virtual dom）虚拟dom与直接innerhtml的比较：innerHTML: render html string + 重新创建所有 DOM 元素Virtual DOM: render Virtual DOM + diff + 必要的 DOM ...
React Native 性能优化指南【全网最全，值得收藏】
卤蛋实验室
01-09 1712
原文链接：https://juejin.im/post/5e1676e16fb9a04847095b12 2020 年谈 React Native，在日新月异的前端圈，可能算比较另类了。文章动笔之前我也犹豫过，但是想到写技术文章又不是赶时髦，啥新潮写啥，所以还是动笔写了这篇 React Native 性能优化的文章。 本文谈到的 React Native 性能优化，还没到修改 React Nat...
React知识点总结
wdhxs的博客
12-02 616
React知识点总结（一） 文章目录React知识点总结（一）一、React中keys的作用是什么？二、调用 setState 之后发生了什么？三、setState是同步还是异步？四、在连续多次调用异步的setState时，render被执行的情况是怎样的？ 一、React中keys的作用是什么？ React使用key来标识每个组件，相同的key为同一组件 建立一一对应的映射关系后，React在更新或者添加组件时就能迅速地找到key对应的组件进行对比更新或者添加组件。 二、调用 setState 之后发
React知识点汇总
我的博客
09-05 925
核心：组件系统，all in js,自动更新dom,三个阶段，十一个钩子函数，更新状态，react中的事件，可控和不可控组件 1.React概述 React是facebook于2013年6月推出的一个库 其要解决的问题是构建数据不断变化的大型应用 特点是简单和声明式（自动dom操作） 核心是组件，使用组件提高了代码的复用率，降低测试的难度和代码的复杂度 发展历...
耗时一个月，React 知识点万字大总结（超全超基础）
萌萌哒的瑞萌萌的博客
04-29 7129
React特点 React是一个将数据渲染为 HTML 视图 的 js 库 简单看来，React 框架主要功能体现在前端 UI 页面的渲染，包括性能优化以及操作简化等等方面。站在 mvc 框架的角度来看，React 操作 view 层的功能实现。 采用组件化模式、声明式编码、函数式编程，提高开发效率和组件复用性 它遵循从高阶组件到低阶组件的单向数据流。 在 React Native 中可以用 react 预发进行安卓、ios 移动端开发 使用虚拟 dom 和 diff 算法，尽量减少与真实 dom 的交互
react常用知识点总结
qq_39756331的博客
03-11 1411
1、什么是jsx JSX是JavaScript的扩展语法,这种<></>标签的写法就是 JSX。JSX 编写的组件通过预处理器 babel 解析后,再交给 React 库渲染到指定父容器下,形成最终html页面,供浏览器解析和显示。 JSX会被babel编译为：React.createElement()，React.createElement()将返回一个叫作“ReactElement”的JS对象。 const element = React.createElement(
React基础知识点
小桂的博客
04-23 4587
react，hooks，react语法，基础
react基础知识点整理
mondy592的博客
07-20 1332
react的优点: 1、React速度很快：它并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在 javascript逻辑和实际的DOM之间，性能好。 2、跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。 3、一切都是component：代码更加模块化，重用代码更容易，可维护性高。 4、单向数据流：Flux是一个用...
aglin的属性值对于图片和文字位置的效果
Slamande的博客
12-16 1772
我原来只会用padding margin 将一些小图片居中显示有一天学姐告诉我，在html中用align来设置图片和文字之间的位置。 align的属性值有center(middle)、left、right、bottom、justify、absbottom、absmiddle、baseline… 其中我了解到的是 absmiddle 、center: middle： absbottom、base...
Node.Js实现最最最简单的登录注册
Slamande的博客
11-01 1621
注册HTML <div class="container"> <form class="form-signin" action="/register" method="post"> <h2 class="form-signin-heading">用户注册</h2> <label for="account" class="sr-only">账号</label> <input t
axios登录功能
Slamande的博客
11-15 878
登录功能路由： router.post('/login', (req, res) => { let { workId, password } = req.body var config = { method: 'post', baseURL: 'http://******', url: '/login', params: { workId, password,
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值