标签：React 教程 color List react test props 组件
什么是组件
组件化就好像我们的电脑装机一样，一个电脑由显示器、主板、内存、显卡、硬盘，键盘，鼠标...。
组件化开发有如下的好处：
降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求。
例如输入框，可以替换为日历、时间、范围等组件作具体的实现。调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单。
提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级。
在团队开发中，组件化带来的优势是便于协同开发，由于代码中的耦合度降低了，每个模块都可以分拆为一个组件，例如异步请求组件，路由组件，各个视图组件。
团队中每个人发挥所长维护各自组件，对整个应用来说是精细的打磨。
在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版本后新增的，官方推崇
在合适的情况下我们都应该使用这种组件方式。无状态组件不像上述两种方法在调用时会创建新实例，它创建时始终保持了一个实例，避免了不必要的检查和内存分配，做到了内存优化。
上一篇：react开发教程（二）安装
下一篇：react开发教程（四）React数据流
标签：React,教程,color,List,react,test,props,组件 来源： https://www.cnblogs.com/10manongit/p/12897726.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。