React编程中的常用技巧（欢迎拍砖）

1、变量初始化
在react组件编写的过程中，组件都需要输入参数，但是对于代码维护者来说，一个组件的使用，首先要知道它的输入。而React中的变量检查和默认值刚好可以做到，一方面可以校验变量，另一方面，可以把组件的输入参数表现出来。

class Input extends React.Component {
  // ...
}
Input.defaultProps = {
  color: 'blue'
};
Input.propTypes = {
    name: React.PropTypes.string.isRequired
};//参数检查仅在开发模式下会有效

所以设置参数的默认值就很有必要了，可以让代码维护者很清楚的知道组件的props有哪些。
2、this与箭头函数
在组件中经常定义回调函数，对于回调函数经常会存在this的丢失问题，要么通过绑定的方式实现绑定this

    this.handleClick = this.handleClick.bind(this);

或者通过箭头函数实现绑定this

handleClick = () => {
    alert(this.state.message);
  }

3、组件列表
React进行虚拟DOM对比的时候，需要通过key来进行判断，所以必须给列表加上key

const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );

4、React中的状态覆盖
React组件的状态，经常会出现组件的状态会莫名其妙的被覆盖掉。需要很严格地控制组件的更新状态，可以在shouldComponent中控制组件是否会更新。
这个通常会在redux中出现，如果一个组件subscribe了两个参数，但是这两个参数的更新不同步，会造成两次更新，可以通过在shouldComponent中进行进一步判断。
组件的设计状态，最好是无状态组件，输入参数，就可以输出，组件的形成最好是功能通用的最小组件。
6、fragment
React中render只能返回一个节点，所以通常会加上一些无关紧要的div

<div>
    <Component1/>
    <Component2/>
</div>

react提供了一种更好的方式 ，fragment在生成前端页面也经常能用到。

    <React.Fragment>
        <Component1/>
        <Component2/>
    </React.Fragment>