• 以组件方式思考 UI 的构建
• 组件的单一职责原则
• DRY 原则（Don’t Repear Yourself）

一、以组件方式思考 UI 的构建

组件可以看做 PS 图层的文件夹，或 组/链接类似；表示某一类东西，有点类似模块化的思想；每个组件看成一个单元；

下面胆码中的 CommentBox 、ConmentList 、CommentForm 就是组件组成的组件树；

class CommentBox extends React.Component {
    render (){
        return (
            <div className="comments">
                <h1>Comments ({this.state.items.length})</h1>
                <CommentList data={this.state.items}/>
                <CommentForm />
            </div>
        );
    }
}

理解 React 组件

1. React 可以理解为一个纯函数，props是形参（非必须）, 内部维护了一套state，生成View;

   props + state => View
   

2. React 组件一般不提供方法，而是作为某种状态机；（你的状态什么，你的结果就一定是什么）

3. 组件是单向数据绑定（外面想传数据只能通过传 props，外面想知道内部的状态，必须内部暴露出去，外面才知道）

创建组件的思路

1. 创建静态 UI（HTML+CSS）
2. 考虑组件的状态组成
3. 考虑组件的交互方式

受控组件 VS 非受控组件

这个主要是针对 From 里面的元素，针对范围很小；

• 表单元素状态由使用者维护（可能的表现是：用户无法正常输入字符）

  <input
      type = 'text'
      value = {this.state.value} //value值不是用户输入来控制，而是组件本身change后传给使用者后，使用者来控制的；
      onChange = {evt=>{
          this.setState({value : evt.target.value})
          }
      }
  />
  

• 表单元素状态 DOM 自身维护

  <input
      type = 'text'
      ref = {node => this.input = node }
  />
  

二、组件的单一职责原则

• 每个组件制作一件事
• 如果组件变得复杂，那么应该拆分成小组件；
  • 优点一：拆分复杂度
  • 优点二：提高性能，如果是一个大组件，稍微改变点数据，整个组件都重新渲染，而分多个小组件，只更新相应的组件，这样对性能提高非常好；

三、DRY 原则

什么是 DRY

DRY 也叫 OAOO；一次且仅一次（英语：Once and only once，简称 OAOO）

DRY 原则的人，提取类里的“共同 field”，把它们放进一个父类，然后让原来的类继承这个父类；

需要注意：DRY 的 repeat 是对于实现需求的重复，而不是单纯代码的重复，追求"抽象化"，要求找到通用的解决方法；

比如代码

class A {
  int a;
  int x;
  int y;
}

class B {
  int a;
  int u;
  int v;
}

可以更改为下面这样

class C {
  int a;
}

class A extends C {
  int x;
  int y;
}

class B extends C {
  int u;
  int v;
}

DRY 的原则

• 能计算得到的状态就不要单独储存了；
  • AJAX 时候的 Loading，没有数据的时候就是 Loading，获取到数据就不存在 Loading 了；
  • 可以通过 AJAX 来判断是否 Loading，这时候就没必要再维护 Loading 了
• 组件尽量无状态，所需数据通过 Props 获取；