位置: 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三层)

  • 营业账簿印花税怎么交
  • 费用计入什么会计科目
  • 记账凭证银行利息该怎么记凭证
  • 退税流程怎么操作APP
  • 预缴税款可以下调吗
  • 一般纳税人支付给小规模纳税人的税率
  • 支付给个人的佣金怎么做账务处理
  • 房地产企业契税税率是多少
  • 低值易耗品如何报废
  • 装修期内免租金可以办理营业执照吗
  • 个体工商年报怎么弄
  • 应收账款坏账计提比例变更
  • 已认证发票红冲进项税分录
  • 收到别的公司的转账支票
  • 法人转钱进公账要交税吗
  • 投资公司的利息支出可抵扣吗
  • 建安费增值税怎么算
  • 机动车统一发票税率多少
  • 国家税务总局关于取消增值税扣税凭证
  • 非银行支付机构条例(征求意见稿)
  • 高新技术企业享受什么优惠政策
  • 银行年费计入管理费用还是财务费用
  • 收入低于10万免征附加税
  • 反映留存收益的账户
  • win7系统如何设置热点
  • linux中ping命令怎么用
  • mac电脑command+s
  • win8电脑系统还原
  • 两免三减半条件
  • 跨年退税怎么处理
  • js16.vip
  • 贷款支付的本息如何记账
  • ThinkPHP中html:list标签用法分析
  • 磷酸二氢钙生产
  • 蓝湖怎么用的
  • nginx配置tp5
  • 金税三期系统的对比有哪几个
  • 小规模企业收到发票
  • cmd 过滤命令
  • 商贸企业发生退税的原因
  • python统计出现次数并排序
  • 最好用的刷题笔
  • 开工程款发票有什么规定?
  • 自然人独资的有限责任公司交什么税
  • 开民工工资专户函模板
  • 存货成本明细科目表
  • mysql从一个库导入进另一个库
  • 专项资金支出明细表范文
  • 预提费用没有收到发票也没有付款
  • 先收款后给发票
  • 个人如何缴纳公积金和社保费用
  • 预付款开了发票
  • 产房日常维修费用
  • 打官司产生的费用开成什么发票
  • 申请国家知识产权的条件
  • 债券发行后在市场上交易时是怎么确定交易价格的
  • 电子版银行回单
  • 新企业建账
  • sqlserver锁机制
  • sql中isnull是什么意思
  • sql server 2005如何使用
  • 一条sql语句搞定一个数据
  • windows图片密码
  • linux命令大全chm版
  • cygwin下载教程
  • linux文件压缩和解压缩命令
  • srvload.exe - srvload是什么进程
  • unix和linux是使用较为广泛的多用户交互
  • windos8怎么样
  • 3d引擎开发
  • javascript中对象一般由什么组成
  • shell脚本echo输出变量
  • shell脚本的实现
  • centos打开shell
  • nodejs开发微信小程序
  • javascript要怎么学
  • javascript总结
  • 花卉种植税收优惠政策案例
  • 出口退税账户标识是否怎么选
  • 地税服务大厅上班时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设