React组件化

传统的组件

传统组件是结构，样式和交互分离的，分别对应html，css和js，以一个常见的tab组件为例，我们会先构建组件的基本结构

   <div>
       <ul>
           <li>Tab1</li>
           <li>Tab2</li>
           <li>Tab3</li>
       </ul>
   </div>
   <div class="content">
       <div>
           tab1内容...
       </div>
       <div>
           tab2内容...
       </div>
       <div>
           tab3内容...
       </div>
   </div>

然后通过一个js的tab组件操作dom

   class Tab {
      static defaultOptions = {
          classPrefix: 'tabs',
          activeIndex: 0,
      };
   }
   constructor(options) {
       this.options = Object.assign(Tabs.defaultOptions, options);
       // 从options中定义组件属性
       this.element = this.options...
       // 各种dom操作事件
       this._initElement();
       this._initTabs();
       this._bindTabs();
   }
   _initElement() { ... }
   _initTabs() { ... }
   _bindTabs() { ... }
   destroy() { ... }

初始化过程十分简单，传入几个参数就可以赋予交互

   const tab = new Tabs({
      element: ...,
      tabs:  ...
   })

组件封装的基本思路就是面向对象思想，交互基本上以dom为主，逻辑上是结构(html)上需要操作哪里，我们就操作哪里

• 基本的封装性 通过原型继承来实现了组件的封装
• 简单的生命周期 最明显的两个方法constructor和destroy，代表了组件的挂载和卸载过程，但其他的过程，如组件更新的生命周期并没有体现
• 明确的数据流动 这里的数据指的是调用组件的参数，一旦确定参数的值，就会解析传进来的参数，根据参数的不同作出不同的响应，然后反映到视图上
  传统组件的主要问题是逻辑一旦复杂，就存在大量的DOM操作，开发和维护成本很高。后面前端又出现了MVC的架构，View只关心怎么输出变量，于是诞生了各种模板语言，让模板本身能承载逻辑，减轻了在js中操作DOM的逻辑，不过这种组件化实现的还是字符串拼接级别的组件化。

React的组件化

Web Component通过自定义元素的方式实现组件化，React的组件元素被描述成纯粹的JSON对象，由三部分组成——属性(props)，状态(state)以及生命周期方法。

React组件构建方法

React组件有三种构建方法
- React.createClass
这种方法兼容性最好

   const Button = React.createClass({
       getDefaultProps(){
           return {
              color: 'blue',
              text: ''
           }
       },
       render(){
           const { color, text } = this.props;
           return (
           // 虚拟节点
              <button className = {'btn-${color}'}>
                 <em>text</em>
              </button>
           )
       }
   })

当另一个组件需要调用Button，就和new一个对象差不多，只需要写< Button />就会被解析成React.createElement(Button)方法来创建Button实例，这意味者在应用中调用几次Button，就会创建几次Button实例
- ES6 classes
ES6 classes的写法是通过ES6标准的类语法的方式来构建方法：

   import React, { Component } from 'react';
   class Button extends Component {
       constructor(props){
           super(props);
       }
       static defaultProps = {
           color: 'blue',
           text: ''
       }
       render(){
          return (
             <button className={btn-${color}}>
                 <em>{text}</em>
             </button>
          )
       }
   }

如果我们学过面向对象的知识，就知道继承与组合的不同，他们可以用IS-A和HAS-A来区别，在实际应用React的过程中，我们极少让子类去继承功能组件。试想在UI层面小的修改就会影响到整体交互或样式，用继承来抽象太死板了。所以在React组件开发中，常用的方式是将组件拆分到合理的粒度，用组合的方式合成业务组件。
- stateless function
使用无状态函数构建的组件称为无状态组件，只传入了props和context两个参数，也就是说它不存在state，也没有生命周期方法，无状态组件不像上述两种方法在调用时会创建新实例。

  function Button({ color = 'blue', text = 'Confirm'}){
     return (
        <button className={ btn-$color }>
           <em>{text}</em>
        </button>
     )
  }

用React实现Tabs组件

首先，用上面第二种es6 classes简洁的方法来初始化Tabs组件的骨架

   import React, { Component, PropTypes } from 'react';
   class Tabs extends Component {
      constructor(props){
         super(props)
      }
      ...
      render() {
         return <div className="ui-tabs"></div>
      }
   }

state

在使用React之前，常见的MVC框架也非常容易实现交互界面的状态管理，比如Backbone。它们将View中与界面交互的状态解耦，一般将状态放在Model中管理。当组件内部使用库内置的setState方法时，最大的表现行为是该组件会尝试重新渲染。
值得注意的是，setState是一个异步方法，一个生命周期内所有的setState方法会合并操作。
我们再来看Tabs组件的state，我们需要维护两个可能的内部状态activeIndex和prevIndex，它们分别代表当前选中tab的索引和前一次tab选中的索引。针对这点我们有两个不同的视角
- activeIndex在内部更新 当我们切换标签的时候，可以看作组件内部的交互行为，被选择后通过回调函数返回具体选择 的索引。
- activeIndex在外部更新 当我们切换tab标签时候，可以看作是组件外部在传入具体的索引，而组件就像木偶一样被操控着。
这两种情形在React组件的设计中非常常见，第一种组件写法叫做智能组件(smart component)和木偶组件(dumb component)
我们来看下Tabs组件中初始化时的实现部分

   constructor(props){
      super(props);
      const currProps = this.props;
      let activeIndex = 0;
      // 来源核心判断
      if('activeIndex' in currProps){
         activeIndex = currProps.activeIndex
      } else if('defaultActiveIndex' in currProps){
         activeIndex = currProps.defaultActiveIndex;
      }

      this.state = {
         activeIndex,
         prevIndex: activeIndex
      }
   }

对于activeIndex来说，既可能来源于使用内部更新的defaultActiveIndex prop，即我们不需要外组件控制组件状态，也可能来源于需要外部更新的activeIndex prop(比如一个input选择框)

props

props是React用来让组件互相联系的一种机制，通俗说就像方法的参数一样。React的单项数据流，主要的流动管道就是props。props本身是不可变的，当我们试图改变props的原始值时，React会报出类型错误的警告，组件的props一定来自于默认属性或通过父组件传递而来，如果要渲染对props加工后的值，最简单的方法就是使用局部变量(在组件中定义的)或者直接在JSX中计算结果。
再一次仔细观察Tabs组件在Web界面的特征，会看到两个区域：切换区域和内容区域，那么我们就定义两个子组件，其中TabNav组件对应切换区域，TabContent组件对应内容区域。在Tabs组件中只显示定义内容区域的子组件集合，头部区域对应内部区域每一个TabPane组件的props，让其在TabNav组件内拼装

   <Tabs classfix={'tabs'} defaultActiveIndex={0}>
      <TabPane key={0} tab={'Tab 1'}>第一个Tab里的内容</TabPane>
      <TabPane key={1} tab={'Tab 2'}>第二个Tab里的内容</TabPane>
      <TabPane key={2} tab={'Tab 3'}>第三个Tab里的内容</TabPane>
   </Tabs>

基本的结构确定之后，只有两个props放在Tabs组件上，而其他参数直接放到TabPane组件中，由它的父组件TabContent隐式对TabPane组件拼装。渲染TabPane组件的方法如下:

   getTabPanes(){
       const { classPrefix, activeIndex, panels, isActive } = this.props;
       return React.children.map(panels, (child)=>{
           if(!child) { return; }
           //将字符串转成10进制数字
           const order = parseInt(child.props.order, 10);
           const isActive = activeIndex === order;
           return React.cloneElement(child, {
               classPrefix,
               isActive,
               children: child.props.children,
               key: 'tabpane-${order}',
           })
       })
   }

上述代码讲述了子组件集合是怎么渲染的，通过React.Children.map方法遍历子组件，将order(渲染顺序)，isActive(是否激活tab)，children(Tabs组件中传入的children)和key利用React的cloneElement方法克隆到TabPane组件中，最后返回这个TabPane组件集合。
其中React.children是React官方提供的一系列children的方法，就像js中提供给数组的方法一样。
最后，TabContent组件的render方法只需要调用getTabPanes方法即可渲染。
在TabPane组件上，除了可以传递字符串，还可以直接传入DOM节点

   <TabPane
     order="0"
     tab={<span><i className=""></i></span>}
     第一个Tab里的内容
   </TabPane>