React组件

已于 2023-10-31 00:44:52 修改
阅读量734 收藏 3
点赞数 2
分类专栏： React 文章标签： react.js 前端 前端框架
于 2023-10-08 11:06:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44582045/article/details/133671371
版权

一、React组件

在这里插入图片描述

1、函数组件

  • 纯函数，输入props，输出JSX
  • 没有实例(没有this)，没有生命周期(不能扩展其他方法)，没有state
  • 不能扩展其他方法
// 函数组件
// 组件的名称必须首字母大写
// 函数组件必须有返回值 如果不需要渲染任何内容，则返回 null
function HelloFn () {
  return <div>这是我的第一个函数组件!</div>
}

// 定义类组件
function App () {
  return (
    <div className="App">
      {/* 渲染函数组件 */}
      <HelloFn />
      <HelloFn></HelloFn>
    </div>
  )
}
export default App

2、类组件

// 引入React
import React from 'react'

// 类组件
// 使用 ES6 的 class 创建的组件，叫做类（class）组件
// 类名称也必须以大写字母开头
// 类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
// 类组件必须提供 render 方法render 方法必须有返回值，表示该组件的 UI 结构
class HelloC extends React.Component {
  render () {
    return <div>这是我的第一个类组件!</div>
  }
}

function App () {
  return (
    <div className="App">
      {/* 渲染类组件 */}
      <HelloC />
      <HelloC></HelloC>
    </div>
  )
}
export default App

二、组件的事件绑定

// 类组件引入React
import React from 'react'

// 函数组件
// react事件采用驼峰命名法
function Hello() {
  const clickHandler = (e) => { // 获取事件对象e只需要在 事件的回调函数中 补充一个形参e即可拿到
    console.log(e, 66666)
  }
  return <div onClick={clickHandler}>hello</div>
}


// 类组件
class HelloComponent extends React.Component{
  // 事件回调函数 (标准写法 可以避免this指向问题) ！！！！！！
  // 回调函数中的this指向是当前的组件实例对象
  clickHandler = () => {
    // 这里的this指向的是正确的当前的组件实例对象   推荐这么写！！！！！！
    console.log(this)
  }
  
  clickHandler1 () {
    // 这里的this 不指向当前的组件实例对象而指向undefined 存在this丢失问题
    console.log(this)
  }
  render () {
    return <div onClick={this.clickHandler} style={{fontSize: '30px',color: 'red'}}>这是我第一个类组件</div>
  }
}

function App () {
  return (
    <div className="App">
      <Hello/>
      <Hello></Hello>
      <HelloComponent/>
      <HelloComponent></HelloComponent>
    </div>
  )
}

export default App

三、组件事件传参

// 类组件引入React
import React from 'react'

// 函数组件
// 传递自定义参数
function Hello() {
  const clickHandler = (e, msg) => {
    // e.preventDefault() // 阻止事件的默认行为
    console.log(66666, e, msg)
  }
  return (
    <div onClick={(e) => clickHandler(e, 'mua我爱你')}>
      {/* <a href='https://www.baidu.com'>百度</a> */}
      这是函数组件
    </div>
  )
}


// 类组件
class HelloComponent extends React.Component{
  // 事件回调函数 (标准写法 可以避免this指向问题)
  // 回调函数中的this指向是当前的组件实例对象
  clickHandler = (e, num) => {
    console.log(this, e, num)
  }
  render () {
    return (
      <>
        <button onClick={(e) => this.clickHandler(e, '123')}>click me</button>
        {/* <div onClick={this.clickHandler} style={{fontSize: '30px',color: 'red'}}>这是我第一个类组件</div> */}
      </>
    )
  }
}

function App () {
  return (
    <div className="App">
      <Hello/>
      <Hello></Hello>
      <HelloComponent/>
      <HelloComponent></HelloComponent>
    </div>
  )
}

export default App

// event 是React封装的， 可以看到  __proto__.constructor是SyntheticEvent， 模拟出来DOm事件所有能力
// event.nativeEvent是原生事件对象, 原生的打印出来是MouseEvent
// 和dom事件不一样，和vue也不一样
// React16绑定到document, React17事件绑定到root组件(有利于多个React版本并存，例如微前端)

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

四、组件状态

在React hook出来之前，函数式组件是没有自己的状态的，所以我们统一通过类组件来讲解

不要直接修改state中的值，必须通过setState方法进行修改

// 类组件引入React
import React from 'react'

// 组件状态
// 不要直接修改state中的值，必须通过setState方法进行修改 
class TestComponent extends React.Component{
  // 定义组件状态
  state = {
    name: 'zm',
    count: 0
  }
  setCount = () => {
    this.setState({
      count: this.state.count + 1,
      name: 'zzzz'
    })
  }
  render () {
    // 使用状态
    return (
      <div>
        this is TestComponent, name为: {this.state.name}, count: {this.state.count}
        <button onClick={this.setCount}>click++</button>
      </div>
    )
  }
}

function App () {
  return (
    <div className="App">
      <TestComponent/>
    </div>
  )
}

export default App

五、this指向问题

在这里插入图片描述

// 类组件引入React
import React from 'react'

// 类组件 this有问题的写法

// 1.constructor中通过bind强行绑定this

// class HelloComponent extends React.Component{
//   constructor () {
//     super()
//     // 使用bind强行修改this指向
//     // 相当于在类组件初始化的阶段，就可以把回调函数的this修改到
//     // 永远指向当前组件的实例对象
//     this.clickHandler = this.clickHandler.bind(this)
//   }
//   clickHandler () {
//     console.log(this) // 如果没有上面的bind 打印就是undefined
//   }
//   render () {
//     return <div onClick={this.clickHandler} style={{fontSize: '30px',color: 'red'}}>这是我第一个类组件</div>
//   }
// }

// 2.箭头函数写法

// class HelloComponent extends React.Component{
//   clickHandler () {
//     console.log(this)
//   }
//   render () {
//     // render函数的this已经被react做了修改
//     // 这里的this就是指向当前组件实例
//     console.log('父函数中的this指向为：', this)
//     // 通过箭头函数的写法 直接沿用父函数的this指向也ok
//     return <div onClick={() => this.clickHandler()} style={{fontSize: '30px',color: 'red'}}>这是我第一个类组件</div>
//   }
// }


// 3. class field写法  最推荐 !!!!!!!!!!!!!!!!!!!!!
class HelloComponent extends React.Component{
  clickHandler = () => {
    console.log(this)
  }
  render () {
    return <div onClick={this.clickHandler} style={{fontSize: '30px',color: 'red'}}>这是我第一个类组件</div>
  }
}

function App () {
  return (
    <div className="App">
      <HelloComponent/>
    </div>
  )
}

export default App

六、受控表单组件

// 类组件引入React
import React from 'react'

class InputComponent extends React.Component{
  state = {
    message: 'zm66666'
  }
  changeHandler = (e) => {
    this.setState({
      message: e.target.value
    })
  }
  render () {
    // 使用状态
    return (
      <div>
        {/* 绑定value 绑定事件 */}
        <input type='text' value={this.state.message} onChange={this.changeHandler} />
      </div>
    )
  }
}

function App () {
  return (
    <div className="App">
      <InputComponent/>
    </div>
  )
}

export default App


// 受控组件：input框自己的状态被React组件状态控制

// 1. 在组件的state中声明一个组件的状态数据
// 2. 将状态数据设置为input标签元素的value属性的值
// 3. 为input添加change事件，在事件处理程序中，通过事件对象e获取到当前文本框的值（即用户当前输入的值）
// 4. 调用setState方法，将文本框的值作为state状态的最新值

七、非受控表单组件

// 类组件引入React createRef
import React, { createRef } from 'react'

class InputComponent extends React.Component{
  // 使用createRef产生一个存放dom的对象容器
  msgRef = createRef()

  changeHandler = () => {
    console.log(this.msgRef.current)
    console.log(this.msgRef.current.value)
  }

  render () {
    // 使用状态
    return (
      <div>
        {/* ref绑定 获取真实dom */}
        <input ref={this.msgRef} />
        <button onClick={this.changeHandler}>click</button>
      </div>
    )
  }
}

function App () {
  return (
    <div className="App">
      <InputComponent/>
    </div>
  )
}

export default App


// 非受控组件： 
// 通过手动操作dom的方式获取文本框的值
// 文本框的状态不受react组件的state中的状态控制
// 直接通过原生dom获取输入框的值

// 1.导入createRef 函数
// 2.调用createRef函数，创建一个ref对象，存储到名为msgRef的实例属性中
// 3.为input添加ref属性，值为msgRef
// 4.在按钮的事件处理程序中，通过msgRef.current即可拿到input对应的dom元素，
// 而其中msgRef.current.value拿到的就是文本框的值

八、dangerouslySetInnerHTML

在这里插入图片描述

九、immer

import React, { FC, useState } from 'react'
import { produce } from 'immer'

const ImmerDemo: FC = () => {

  const [userInfo, setUserInfo] = useState({ name: 'zm', age: 25 })
  
  const changeAge = () => {
    // setUserInfo({ name: 'zm11', age: 666 }) // 不可变数据 不去修改state值 而是传入一个新的值
    setUserInfo(produce(draft => {
      draft.age = 999
    }))
  }

  return (
    <>
      <div>
        <h2>不可变数据</h2>
        <div>{JSON.stringify(userInfo)}</div>
        <button onClick={changeAge}>change age</button>
      </div>
    </>
  )
}


export default ImmerDemo


// 使用immer
// 1、state是不可变数据
// 2、操作成本高，不稳定性
// 3、使用immer避免这个问题
老电影故事
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
React 之 组件化开发
玄鱼殇
07-03 1776
React 之 React组件化开发
2024年React全家桶(技术栈)_react全家桶包括哪些技术，2024年最新大数据开发模块化面向接口编程
2401_84166811的博客
05-09 510
1.
React基本使用----组件
grow_的博客
09-28 1098
React----组件化
React类组件
qq_51130780的博客
07-06 900
类组件的使用
React入门五：事件处理
qq_39008205的博客
07-13 396
这里写目录标题1. 事件绑定2. 事件对象3. 有状态组件和无状态组件4. 组件中的state 和setState()4.1 state的使用4.2 setState()修改状态4.3 从JSX中抽离事件处理程序5. 事件绑定this指向5.1 箭头函数5.2 Function.prototype.bind()5.3 class的实例方法 （推荐使用）6. 表单处理6.1 受控组件6.2 非受控组件 1. 事件绑定 React事件绑定语法与DOM事件语法相似 如法：on+事件名称 = {事件处理程序}
React组件的三种写法总结
08-31
本文将详细讨论React组件的三种主要写法：ES5的`React.createClass`，ES6的`React.Component`，以及无状态函数式组件（纯组件-SFC）。每种写法都有其特点和适用场景，理解这些差异对于优化代码质量和提高开发效率至...
将SVG转换为React组件:lion:-React开发
05-27
将SVG转换为React组件online在线尝试！ 在React Europe上观看演讲npx @ svgr / cli支持SVGR SVGR是MIT许可的开源项目。 这是将SVG转换为React组件online在线尝试！ 在React Europe上观看演讲SVGR将SVG转换为可立即...
angular-react：在Angular中使用React组件
01-31
轻量级的Angular组件包装器通过常见的Angular组件（在许多情况下包括命令式和声明性语法）公开了Fabric React组件API。 快速链接 | | | | 典型用例 在Angular中使用React组件库 逐步将Angular应用程序重
react-websocket:用于 websocket 通信的易于使用的 React 组件
07-23
react-websocket是一个易于使用的 React 组件，用于 websocket 通信。 把招工广告 这里的事情进展得很慢，因为我目前还有很多其他事情要处理，所以如果我没有回答你的问题或者 PR 有几天或几周没有审核，请不要生气...
一个简单的React组件的示例脚本，它使用了函数组件（Functional Component）和Hooks
最新发布
06-11
一个简单的React组件的示例脚本，它使用了函数组件（Functional Component）和Hooks 这个脚本定义了一个名为MyComponent的React函数组件。它使用useState Hook来管理一个名为count的状态变量，以及一个handleClick...
React组件的定义及使用
subsistent的博客
08-16 313
react中组件分为两种 类组件 函数组件（hooks组件）index.js文件，也就是入口文件/*** 使用对应的引入方式 引入组件*//*** 在root.render方法里面* 防御就可以定义我们的根组件* 也就是说react中的组件创建完后，就可以使用标签语法来进行使用* 那么什么是根组件呢？* 进入项目首先展示的组件就是根组件，后期我们会在根组件上进行 创建路由等相关的扩展*/
react-组件基础
ioncannontic的博客
02-27 1206
react-组件基础
React 组件学习（函数组件、 类组件）
m0_62118859的博客
04-25 4405
目录 1. React 组件介绍 2. 函数组件 1）什么是函数组件？ 2）定义函数组件 3）使用组件 总结： 3. 类组件-复习 class 语法 1.掌握 class 定义类，定义属性，定义函数 2.掌握 extends 继承父类 4. 类组件-基本使用步骤 1.什么是类组件？ 2.定义类组件 3.使用类组件 总结： 5. 类组件-组件抽离 6. 类组件-无状态组件和有状态组件和 1.无状态组件 2.有状态组件 3.它们的区别 4.如何去选择 ...
零基础入门一文带你了解前端React中组件的使用
hdakj22的博客
08-03 791
React 组件介绍、创建React组件的两种方式、React 事件处理：事件绑定、事件对象、有状态组件与无状态组件：state的基本使用、setState() 修改状态、事件绑定 this 指向、表单处理：受控组件和非受控组件
16 个非常有用的 React 组件库
程序员成长指北
02-06 205
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群喜欢就关注我们吧作为一个有实力的React开发人员，仅仅了解React是不够的。本文总结了一些最有用的React组件库，可帮助你提高开发效率。这些组件包括使用表单，图表，日历，表格，用户引导、弹出窗口，颜色，动画，音乐，图像等等非常多的内容。1. react-hook-form这是一个React...
2024 5个最受欢迎的React UI 组件库
代码说，代码让世界更美好。
03-21 2171
2024 5个最受欢迎的React UI 组件库
react-组件开发
软工二班秦同学的博客
10-07 150
早期的js被设计的非常简单，主要目的就为了操作DOM元素，没有想到会发展到现在这么好，以至于出现了前端工程师岗位，前端的工作也月越来越复杂，项目也越来越庞大，开发时会多人协作开发，在以前容易出现变量命名冲突问题。在后来es6出现后，得到了很大的改变，有了模块化的概念node.js当我们封装好代码后，就可以导出给外部使用，外部就可以引入导出的代码进行使用。1）在构造器中定义state内部状态2）直接在类中定义属性state = {title: 'web前端'render() {return (
【react框架】一次性讲明白各个组件概念（类式组件与函数式组件、受控组件与非受控组件、简单组件与复杂组件、高阶组件）
庞囧的博客
07-24 375
在react中书写的组件主要有两种方式，类式组件与函数式组件。我是这么理解的，非受控是数据发现变化后需要人为去触发组件事件，组件才去处理数据；第一、每个类组件都是继承了React.Component的子类，这样子类也就拥有父类的很多属性或者说是api，例如钩子函数。//render中的this是谁？一、可以看到类组件和函数组件最终都是要执行render函数，后面走的流程是一样的。//此处的this是undefined，因为babel编译后开启了严格模式。学习类式组件的前提知识点，建议看看我写的一个文章。
react 组件传值
10-18
React组件之间的传值有多种方式，常见的有以下几种： 1. 父组件向子组件传值：通过props属性传递数据，父组件将数据作为props属性传递给子组件，子组件通过this.props获取数据。 2. 子组件向父组件传值：通过回调函数的方式，父组件将一个函数作为props属性传递给子组件，子组件在需要向父组件传值时，调用该函数并传递数据。 3. 兄弟组件之间传值：通过共同的父组件作为中介，将数据作为props属性传递给父组件，再由父组件将数据传递给另一个子组件。 4. 跨级组件传值：通过React.createContext创建一个上下文对象，将数据存储在上下文对象中，然后在需要使用数据的组件中通过Consumer组件获取数据。 以上是React组件传值的常见方式，不同的场景可以选择不同的方式来传递数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

老电影故事

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

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

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

打赏作者

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

抵扣说明：

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

余额充值