什么是组件

组件化就好像我们的电脑装机一样,一个电脑由显示器、主板、内存、显卡、硬盘,键盘,鼠标...。

组件化开发有如下的好处:
降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快速完成需求。
例如输入框,可以替换为日历、时间、范围等组件作具体的实现。调试方便,由于整个系统是通过组件组合起来的,在出现问题的时候,可以用排除法直接移除组件,或者根据报错的组件快速定位问题,之所以能够快速定位,是因为每个组件之间低耦合,职责单一,所以逻辑会比分析整个系统要简单。
提高可维护性,由于每个组件的职责单一,并且组件在系统中是被复用的,所以对代码进行优化可获得系统的整体升级。

在团队开发中,组件化带来的优势是便于协同开发,由于代码中的耦合度降低了,每个模块都可以分拆为一个组件,例如异步请求组件,路由组件,各个视图组件。
团队中每个人发挥所长维护各自组件,对整个应用来说是精细的打磨。

在Javascript 的开发中,组件化其实和模块化的意义相当,大概是根据功能、业务进行代码划分,使到这部分的代码可以被复用,例如 $、_ 这些工具库就是将功能进行模块化。
其实组件化的本质上和我们以往的模块化并无差别。
只不过模块化是对js进行了模块的打包,而一个组件包含了对应的(css,js,数据)

组件的规范

组件化的封装思路就是面向对象思想;

  1. 基本的封装特性
  2. 简单的生命周期(组件的创建,更新,卸载)
  3. 明确的数据流动(更具参数的不同做出不同的响应)

React组件构建

Web Components通过自定义元素的方式实现组件化,而React的本质就是关心元素的构成,React组件即为组件元素。组件元素被描述成纯粹的JSON对象,意味着可以使用方法或是类来构建。React组件基本由3个部分构成----属性(props)、状态(state)、以及生命周期方法。

React.createClass

用React.creatClass构建组件是React最传统,也是兼容性最好的方法。


const List = React.createClass({
getDefaultProps() {
return {
color : "#f00",
text : "我是列表"
}
}, render() {
const {color,test} = this.props;
return (
<li className={`btn btn-${color}`}>{test}</li>
)
}
})

调用的时候只需要<List/>,每一次调用都会被编译成React.createElement(List)方法来创建List实例,这意味着每次调用<List/>就会创建一次li;

ES6 class


import React, {Component} from 'react';
class List extends Component {
constructor(props) {
super(props)
} static defaultProps = {
color : "#f00",
text : "我是列表"
}; render() {
const {color,test} = this.props;
return (
<li className={`btn btn-${color}`}>{test}</li>
)
} }

无状态函数


function List({color="#f00",test="我是列表"}){
return (
<li className={`btn btn-${color}`}>{test}</li>
)
}

无状态函数构建的组件称为无状态组件,这种构建方式是0.14版本后新增的,官方推崇

在合适的情况下我们都应该使用这种组件方式。无状态组件不像上述两种方法在调用时会创建新实例,它创建时始终保持了一个实例,避免了不必要的检查和内存分配,做到了内存优化。

上一篇:react开发教程(二)安装
下一篇:react开发教程(四)React数据流

react开发教程(三)组件的构建的更多相关文章

  1. MIP开发教程(三) 使用MIP-CLI工具调试组件

    一 . 在 mip-extensions 仓库中创建新的组件 二 . 预览调试组件 三 . 在 MIP 页中引用自己编写的 MIP 组件 四 . 组件提交到 GitHub 仓库时需要进行校验 站长开发 ...

  2. Yii Framework 开发教程Zii组件-Tabs示例

    有关Yii Tab类: http://www.yiichina.com/api/CTabView http://www.yiichina.com/api/CJuiTabs http://blog.cs ...

  3. react开发教程(六)React与DOM

    ReactDOM findeDOMNode 语法:DOMElement findDOMNode(ReactComponent component)描述:获取改组件实例相对应的DOM节点 案例: imp ...

  4. 160921、React入门教程第一课--从零开始构建项目

    工欲善其事必先利其器,现在的node环境下,有太多好用的工具能够帮助我们更好的开发和维护管理项目. 我本人不建议什么功能都自己写,我比较喜欢代码复用.只要能找到npm包来实现的功能,坚决不自己敲代码. ...

  5. XAF应用开发教程(三)业务对象模型之引用类型与关联关系

    本节介绍信息系统开发中最常见的问题,引用关系,一对多关系,多对多关系. 以客户信息为例,客户通常需要客户分类,如VIP客户,普通客户,潜在客户.当然,我们可以定义枚举类型进行定义出这个类型,并在客户类 ...

  6. React学习笔记(三) 组件传值

    组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React ...

  7. Odoo 二次开发教程(三)-第一个Model及Form、Tree视图

    创建完我们的模块,接下来我们就要为我们的模块添加一些对象.今天我们将要创建一个学生对象(tech.student)和一些基本的属性,并将用form和tree视图将其展示出来: 一. 创建tech.st ...

  8. Boot-crm管理系统开发教程(三)

    (ps:前两章我们已经把管理员登录和查看用户的功能实现了,那么今天我们将要实现:添加用户,删除用户,和修改用户功能) 由于Cusomer的POJO类型已经写好了,所以这次我们之前从CustomerCo ...

  9. 开发教程(四) MIP组件平台使用说明

    组件审核平台用于上传 MIP 组件.经过自动校验之后,提交审核,通过审核的组件会定时推送到线上,供网站使用. 平台地址:https://www.mipengine.org/platform/ 1. 使 ...

随机推荐

  1. k8s全方位监控-prometheus部署

    1.k8s 监控资源对象 2. prometheus简单介绍. https://github.com/prometheus •多维数据模型:由度量名称和键值对标识的时间序列数据•PromSQL:一种灵 ...

  2. C# 定时器Timer

    static void Main(string[] args) { #region 定时器 TimerDemo td = new TimerDemo("TimerDemo", 10 ...

  3. python面试_总结03_列表练习题

    1.列表练习题 完成下列列表相关的编程题,先运行下列的test函数,在完成每道题之后,都可以通过调用test函数检测所写函数对错. def test(got, expected): if got == ...

  4. @PostConstruct使用注意点

    前景提要:在一个项目中,由于数据库中敏感词删除掉了,但是在网页进行匹配时仍然能够匹配上已删除的词. 查看项目源码发现使用了@PostConstruct注解: 此注解的作用是:@PostConstruc ...

  5. java下载镜像

    镜像地址 https://repo.huaweicloud.com/java/jdk/ 如果你不知道选择哪个版本就点击下面这个链接吧 https://repo.huaweicloud.com/java ...

  6. cookie、session和Storage

    概念: cookie:HTTP响应头的一部分,通过name=value的形式存储,主要用于保存登录信息.在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭. 存放数据大小为4K左右 .有个 ...

  7. Azure DevOps (四) 创建第一条流水线

    前几篇文章,我们记录了一下azure代码仓库的使用,这篇开始,我们来搞一下azure的流水线. 流水线这个东西我觉得是devops中对于开发人员的灵魂组件,只要我们配置好了一次,剩下的所有部署都是自动 ...

  8. 写给开发人员的实用密码学(七)—— 非对称密钥加密算法 RSA/ECC

    本文部分内容翻译自 Practical-Cryptography-for-Developers-Book,笔者补充了密码学历史以及 openssl 命令示例,并重写了 RSA/ECC 算法原理.代码示 ...

  9. ArcMap操作练习题目及答案

    题目: 1.主观题(20分)用文字说明中学选址的过程,并说明分析过程中所用的空间分析方法和分析工具. 2.主观题(10分)计算目标区内道路网的密度.(数据框1) 3.主观题(20分)对roadnet里 ...

  10. VMware15安装 CentOS7 步骤