react开发教程（三）组件的构建

什么是组件

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

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

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

在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数据流