位置: IT常识 - 正文

React组件化-类组件和函数组件介绍(react 组件化)

编辑:rootadmin
React组件化-类组件和函数组件介绍 文章目录React组件化开发组件化开发思想React的组件化React中类组件React函数组件React组件化开发组件化开发思想

推荐整理分享React组件化-类组件和函数组件介绍(react 组件化),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react组件constructor,react组件constructor,react组件constructor,react中类组件和函数组件怎么定义,react组件化特性,react 类组件 函数组件,react中类组件和函数组件怎么定义,react 类组件,内容如对您有帮助,希望把文章链接给更多的朋友!

组件化是一种分而治之的思想

如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。

但如果,我们讲一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。

我们需要通过组件化的思想来思考整个应用程序:

我们将一个完整的页面分成很多个组件;

每个组件都用于实现页面的一个功能块;

而每一个组件又可以进行细分;

而组件本身又可以在多个地方进行复用;

组件化是React的核心思想,也是我们后续课程的重点,前面我们封装的App本身就是一个组件:

组件化提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。

任何的应用都会被抽象成一颗组件树。

React的组件化

组件化思想的应用:

有了组件化的思想,我们在之后的开发中就要充分的利用它。

尽可能的将页面拆分成一个个小的、可复用的组件。

这样让我们的代码更加方便组织和管理,并且扩展性也更强。

React的组件相对于Vue更加的灵活和多样,按照不同的方式可以分成很多类组件:

根据组件的定义方式,可以分为:函数组件(Functional Component )和类组件(Class Component);

根据组件内部是否有状态需要维护,可以分成:无状态组件(Stateless Component )和有状态组件(Stateful Component);

根据组件的不同职责,可以分成:展示型组件(Presentational Component)和容器型组件(Container Component);

这些概念有很多重叠,但是他们最主要是关注数据逻辑和UI展示的分离:

React组件化-类组件和函数组件介绍(react 组件化)

函数组件、无状态组件、展示型组件主要关注UI的展示;

类组件、有状态组件、容器型组件主要关注数据逻辑;

当然还有很多组件的其他概念:比如异步组件、高阶组件等,我后续文章会进行讲解。

React中类组件

类组件的定义有如下要求:

组件的名称是大写字符开头(无论类组件还是函数组件)

类组件需要继承自 React.Component

类组件必须实现render函数

在ES6之前,可以通过create-react-class 模块来定义类组件,但是目前官网建议我们使用ES6的class类定义。

使用class定义一个组件:

constructor是可选的,我们通常在constructor中初始化一些数据;

this.state中维护的就是我们组件内部的数据;

render() 方法是 class 组件中唯一必须实现的方法;

import React, { Component } from 'react'export class App extends Component { // 在constructor中初始化一些数据 constructor() { super() // this.state中维护的就是我们组件内部的数据 this.state = { message: "Hello World" } } // render函数是唯一必须实现的 render() { const { message } = this.state return ( <div> <h2>{message}</h2> </div> ) }}export default App

当 render 被调用时,它会检查 this.props 和 this.state 的变化并返回以下类型之一:

React 元素:

通常通过 JSX 创建。例如,<div/> 会被 React 渲染为 DOM 节点,<MyComponent/> 会被 React 渲染为自定义组件;无论是元素标签 <div/> 还是自定义组件 <MyComponent/> 均为 React 元素。export class App extends Component { constructor() { super() this.state = { message: "Hello World" } } // render函数是唯一必须实现的 render() { const { message } = this.state // 1.react元素: 通过jsx编写的代码就会被编译成React.createElement, 所以返回的就是一个React元素 return ( <div>{ message }</div> ) }}

数组或 fragments(fragments后续文章讲解):使得 render 方法可以返回多个元素。

export class App extends Component { render() { // 2.返回数组 return ["aaa", "bbb", "ccc"] }}export class App extends Component { render() { // 2.返回数组 return [ <h2>我是标题</h2>, <div>我是内容</div>, <i>我是斜体</i> ] }}

Portals:可以渲染子节点到不同的 DOM 子树中(后续文章讲解)。

字符串或数值类型:它们在 DOM 中会被渲染为文本节点

export class App extends Component { render() { // 3.返回字符串或数值类型 // return "aaa" return 123 }}

布尔类型或null:什么都不渲染

export class App extends Component { render() { // 4.返回布尔类型 // return true return false }}React函数组件

函数组件是使用function来进行定义的函数,只是这个函数会返回和类组件中render函数返回一样的内容。

函数组件有自己的特点(当然,后面我们会讲hooks,就不一样了):

没有生命周期,也会被更新并挂载,但是没有生命周期函数;

this关键字不能指向组件实例(因为没有组件实例);

没有内部状态(state);

我们来定义一个函数组件:

export default function App() { return ( <div> <h2>我是标题</h2> <div>我是内容哈哈哈</div> </div> )}

在现阶段的学习中,我主要讲解类组件,后面学习Hooks时,会针对函数式组件进行更多的学习。

本文链接地址:https://www.jiuchutong.com/zhishi/299525.html 转载请保留说明!

上一篇:cnpm-淘宝镜像安装(淘宝镜像网站)

下一篇:CNN中的底层、高层特征、上下文信息、多尺度(cnn三层)

  • QQ群中推广需要注意的七大事项(qq群推广网站)

    QQ群中推广需要注意的七大事项(qq群推广网站)

  • win10用户账户控制怎么取消(win10用户账户控制 管理员已阻止你运行此应用)

    win10用户账户控制怎么取消(win10用户账户控制 管理员已阻止你运行此应用)

  • 安卓10.0系统发布时间(安卓10发布)

    安卓10.0系统发布时间(安卓10发布)

  • OPPOfindx3后盖是什么材质(oppofindx3后盖是什么材质)

    OPPOfindx3后盖是什么材质(oppofindx3后盖是什么材质)

  • 国际抖音怎么播放不了(国际抖音怎么直播)

    国际抖音怎么播放不了(国际抖音怎么直播)

  • iwatch5屏幕什么材质(watch5的屏幕)

    iwatch5屏幕什么材质(watch5的屏幕)

  • 学信网验证码是什么(学信网验证码是指学历还是学籍)

    学信网验证码是什么(学信网验证码是指学历还是学籍)

  • 微信图片不显示怎么办(微信图片不显示点下才能看到)

    微信图片不显示怎么办(微信图片不显示点下才能看到)

  • 笔记本电脑屏幕摔坏了能修吗(笔记本电脑屏幕暗怎么调亮)

    笔记本电脑屏幕摔坏了能修吗(笔记本电脑屏幕暗怎么调亮)

  • wifi小叹号已连接不可上网(wife连上有个小叹号)

    wifi小叹号已连接不可上网(wife连上有个小叹号)

  • wmv是什么文件类型(wmv是啥格式)

    wmv是什么文件类型(wmv是啥格式)

  • 苹果7换了电池后home键按不了怎么回事(苹果7换了电池触控id无法用)

    苹果7换了电池后home键按不了怎么回事(苹果7换了电池触控id无法用)

  • 怎么统计excel中相同内容的表格有多少个(怎么统计Excel中每个附件的数据)

    怎么统计excel中相同内容的表格有多少个(怎么统计Excel中每个附件的数据)

  • 艺术字文字环绕在哪(艺术字文字环绕方式有哪些)

    艺术字文字环绕在哪(艺术字文字环绕方式有哪些)

  • 笔记本能一直插着电源使用吗(笔记本能一直插着充电器吗)

    笔记本能一直插着电源使用吗(笔记本能一直插着充电器吗)

  • 快手卫星是什么软件(快手卫星是什么东西)

    快手卫星是什么软件(快手卫星是什么东西)

  • 什么的原码反码补码是一样的(什么原码反码补码)

    什么的原码反码补码是一样的(什么原码反码补码)

  • 拼多多怎么解绑支付宝付款(拼多多怎么解绑身份证号码)

    拼多多怎么解绑支付宝付款(拼多多怎么解绑身份证号码)

  • 沃尔玛微信付款怎么看明细(沃尔玛微信付款怎么付)

    沃尔玛微信付款怎么看明细(沃尔玛微信付款怎么付)

  • vivox21ia支持nfc功能吗(vivox21是否支持nfc)

    vivox21ia支持nfc功能吗(vivox21是否支持nfc)

  • ppt播放顺序怎么设置(ppt播放顺序怎么随机播放)

    ppt播放顺序怎么设置(ppt播放顺序怎么随机播放)

  • vivoy93怎么拆机(vivoy93怎样拆机)

    vivoy93怎么拆机(vivoy93怎样拆机)

  • 手机相机像素怎么看(手机相机像素怎么调清晰)

    手机相机像素怎么看(手机相机像素怎么调清晰)

  • 自然语言处理(NLP)与知识图谱(KG)的发展史(自然语言处理算法)

    自然语言处理(NLP)与知识图谱(KG)的发展史(自然语言处理算法)

  • 帝国CMS列表页中获取当前信息所属专题名称的方法(帝国cms自定义列表)

    帝国CMS列表页中获取当前信息所属专题名称的方法(帝国cms自定义列表)

  • 什么是宏观税负如何判定一国宏观税负的轻重
  • 支付给个人的介绍费开什么发票
  • 营业外收支计入哪里
  • 个人所得税里累计专项扣除是什么意思
  • 土地增值税预缴最新税法规定
  • 期间费用如何设置项目核算
  • 亏损可以不用缴增值税吗
  • 编制利润表会计等式
  • 营业外收入在资产负债表怎么填
  • 异地上班员工报销路费
  • 付款单中未全付款怎么办
  • 收到外币货款的汇率
  • 用理财产品去抵债违法吗
  • 物业前期介入费用测算
  • 为什么利润表的财务费用与利息费用逻辑不对
  • 取得专用发票不交增值税
  • 小规模纳税人出售不动产征收率
  • 发票管理政策
  • 停车场如何申领车牌号
  • 出售设备折旧
  • 期末留抵税额怎么做账
  • 出口暂定关税
  • 事业单位收到奖励款怎么入账
  • win10自动关机方法
  • php7多线程
  • 查补的增值税能抵留抵吗
  • 应税货物销售额是什么意思
  • 无销售发票的基本户收入?
  • 企业研发费用的优惠政策
  • 销售旧固定资产开票税目是什么
  • 摊余成本计量的金融资产若溢价购买小于
  • 新能源产业发展历程
  • 应交增值税明细科目怎么看
  • visual studio code怎么创建vue项目
  • thinkphp 模块
  • gpt 4927
  • chatto
  • dex源码提取
  • 单据已经生成凭证,不允许自动删除
  • 税款返还 分录
  • 货物名称和发票上的不一致
  • 应付账款的平行登记
  • 增值税附加税有哪几种
  • 什么叫资本退出
  • css中字符间距怎么设置
  • 写出php的常用四种基本变量类型
  • 发票临时增量好难
  • 送礼的烟酒去哪里买
  • 净资产包含哪些项目
  • asp连接mysql数据库
  • 个体工商户要做账报税吗
  • 外购产品用于职工福利企业所得税视作销售吗
  • 垃圾清运费属于什么服务
  • 一般纳税人福利费
  • 物业公司预收款账务处理
  • 毛利差怎么计算公式
  • 出纳 记账凭证
  • 所有者权益的确认依赖于资产和负债的确认
  • 发票认证完了该怎么取消
  • 小规模纳税人增值税计算公式
  • 总分类账的记账
  • 增值税科目设置及科目号
  • MySQL 5.6 中 TIMESTAMP 的变化分析
  • windows vista怎么样
  • avc用什么打开
  • win7注册表详解
  • 关闭iebrowser
  • perl随机数
  • jquery实现页面切换
  • Div CSS absolute与relative的区别小结
  • python序列结构总结
  • Android使用的方式来管理
  • javascript教程 csdn
  • android的动画有哪些?
  • 广东省电子税务局电话
  • 如何在税务系统增加开票人员
  • 江西电子税局
  • 税控盘怎么申请领发票
  • 企业所得税率2023年
  • 创业板中签钱不能转出吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设