react开发教程(三)组件的构建
什么是组件
组件化就好像我们的电脑装机一样,一个电脑由显示器、主板、内存、显卡、硬盘,键盘,鼠标...。
组件化开发有如下的好处:
降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快速完成需求。
例如输入框,可以替换为日历、时间、范围等组件作具体的实现。调试方便,由于整个系统是通过组件组合起来的,在出现问题的时候,可以用排除法直接移除组件,或者根据报错的组件快速定位问题,之所以能够快速定位,是因为每个组件之间低耦合,职责单一,所以逻辑会比分析整个系统要简单。
提高可维护性,由于每个组件的职责单一,并且组件在系统中是被复用的,所以对代码进行优化可获得系统的整体升级。
在团队开发中,组件化带来的优势是便于协同开发,由于代码中的耦合度降低了,每个模块都可以分拆为一个组件,例如异步请求组件,路由组件,各个视图组件。
团队中每个人发挥所长维护各自组件,对整个应用来说是精细的打磨。
在Javascript 的开发中,组件化其实和模块化的意义相当,大概是根据功能、业务进行代码划分,使到这部分的代码可以被复用,例如 $、_ 这些工具库就是将功能进行模块化。
其实组件化的本质上和我们以往的模块化并无差别。
只不过模块化是对js进行了模块的打包,而一个组件包含了对应的(css,js,数据)
组件的规范
组件化的封装思路就是面向对象思想;
- 基本的封装特性
- 简单的生命周期(组件的创建,更新,卸载)
- 明确的数据流动(更具参数的不同做出不同的响应)
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版本后新增的,官方推崇
在合适的情况下我们都应该使用这种组件方式。无状态组件不像上述两种方法在调用时会创建新实例,它创建时始终保持了一个实例,避免了不必要的检查和内存分配,做到了内存优化。
最新文章
- 神奇的margin之豆瓣豆瓣么么哒
- 原!!tomcat7.0 配置数据库连接池 SQLServer2000
- Xcode 8 打包上线 iTunes Connect 找不到构建版本
- KING小组
- STM32F2系列系统时钟默认配置
- JQuery操作元素的属性与样式及位置 复制代码
- Android签名机制---签名过程
- Sqlite 梳理
- js dictionary
- 孤儿进程VS僵尸进程
- Confluence 6 配置边栏
- React文档(五)组件和props
- phpmailer使用qq邮箱、163邮箱成功发送邮件实例代码
- SpringMVC介绍之视图解析器ViewResolver
- (纪录片)《星际穿越》中的科学 The Science of Interstellar
- IOS8-人机界面指南
- CodeForces - 547D: Mike and Fish (转化为欧拉回路)(优化dfs稠密图)(定向问题)
- [redis] redis 如何删除匹配模式的多个key值
- 你的程序运行使用了多少CPU,秒知!
- node-inspector调试报错问题处理
热门文章
- package.xml使用说明
- .NET WebApi使用Swagger
- C# 反编译工具之dnSpy
- xsd文件生成cs文件命令
- Linux CentOS7.X-目录操作命令
- 通过媒体查询来实现 WPF 响应式设计
- 有效提升Python代码性能的三个层面
- ShardingJdbc-分表;分库;分库分表;读写分离;一主多从+分表;一主多从+分库分表;公共表;数据脱敏;分布式事务
- cURL error 60: SSL certificate problem: unable to get local issuer certifica 解决
- vue 控制台错误