划分组件边界的原则
分而治之：当一个组件功能代码量较多就要考虑进行拆分，用多个小组件来替代，每个小组件只关注单个功能，然后组合。
拆分关键：确定组件的边界，满足高类聚和低耦合。
高类聚：将逻辑紧密的相关内容房子一个组件中。比如：展示内容的JSX、定义行为的JavaScript、定义样式的CSS。
低耦合:弱化不同组件之间的依赖关系，尽量做到独立。在编写组件时，应该根据功能点划分模块，让不同组件实现不同功能。
React组件的数据种类
React组件的数据分为两种：prop（组件的对外接口）和state（组件的内部状态）
prop的类型不仅可以是纯数据也可以是函数。函数类型的prop等于让父组件交给了子组件的一个回调函数，子组件在调用函数类型的prop，可以带上必要的参数，这样可以反过来把信息传递给外部世界。
接口规范 prop是组件的对外接口，应该申明自己的接口规范（此组件支持哪些prop，每个prop应该是什么格式）在ES6方法定义的组件中可以使用propTypes属性来定义prop的规格。
npm install --save prop-types
import PropTypes from 'prop-types'
class Counter extends Component {
constructor(props) {
super(props);
}
}
//将props中的值的类型定义在里面 带isRequired的必须指定值
Counter.propTypes = {
caption: PropTypes.string.isReuired,
initValue: PropTypes.number
}
定义类的属性缺点以及优化方法：
缺点：会占用内存空间，而且propTypes的检查也会消耗CPU计算资源，在生产环境中没有什么用。用一种自动工具比如 babel-react-optimize 在代码将要部署时去掉
state：React组件不能修改传入的prop，需要使用state记录自身的数据变化，state必须是一个JavaScrip对象。
利用defaultProps功能设置默认值 在state对象当中判断是否有值（count: this.props.initValue | 0）然后在无值时设置一个初始值时，直接在state中写并不美观，可以使用这个方法让构造函数中的this.state初始化中省去判断条件。
class Counter extends Component {
constructor(props) {
super(props);
//代码执行到这里必有initValue值，如果没有组件中会收到一个默认属性为0
this.state = {
count: this.props.initValue
}
}
}
Counter.defaultProps = {
initValue : 0，
update: f => f //默认是一个什么都不做的函数
}
读取更新 通过this.state可以读取到组件当前的state。在改变state值时，必须使用this.setState函数，不能直接使用修改this.state，因为直接修改this.state的值，不会驱动组件进行重新渲染，不能反映this.state值的变化。
React组件的生命周期
组件生命周期会经历三个过程
装载过程 组件第一次在 DOM 树中渲染的过程
更新过程 当组件重新渲染的过程
卸载过程 组件从 DOM 中删去的过程
生命周期函数 在三个不同过程中，React库会依次调用组件的一些成员函数，这些函数被称为生命周期函数，定制组件实际就是定制生命周期函数。
装载过程依次调用的函数
1. constructor 无状态的组件不需要constructor
作用：初始化 state，组件中任何生命周期都可能访问 state ，所以构造函数constructo是最理想的地方。
绑定成员函数的this值。
2. getInitialState和getDefaultProps用来初始化组件的this.state值
只在React.createClass方法创建的组件才有用。ES6语法创建的无用，因为在构造函数中通过给this.state赋值就完成了初始化。
3.render
在React组件的父类React.Component类中除了render函数都有默认实现，所以组件必须实现render函数，并且是一个纯函数不能在此函数中调用this.setState去改变状态，它不会做任何渲染只会返回一个JSX描述符，最终由 React 渲染。当不想让某个组件渲染东西时，可以返回null或者 false.
4. componentWillMount和componentDidMount
componentWillMount会在调用render函数之前调用，不用定义因为能在它里面做的事情，可以在constructor函数中完成（可以在服务端和浏览器端被调用）
componentDidMount会在调用render函数之后调用（但不是立即调用），当此函数被调用的时候，render函数返回的东西已经引发渲染，组件被装载到了DOM树上。当一个render中调用多个组件时，只有这个render中的多个组件的render函数都执行完时才会一次调用各个组件的 componentDidMount 函数作为装载过程收尾（只能在浏览器端被调用，可以在此使用其它UI库代码，Ajax）
render() {
return (
<div>
<Counter caption="First" initValue={0}/>
<Counter caption="Second" initValue={10}/>
<Counter caption="Third" initValue={20}/>
</div>
)
}
此组件的装载过程为
First的constructor>componentWillMount>render>
Second的constructor>componentWillMount>render>
Third的constructor>componentWillMount>render>
First的componentDidMount>
Second的componentDidMount>
Third的componentDidMount
End
更新过程
更新过程依次调用的函数
1.componentWillReceiveProps(nextProps) 只要父组件的render函数被调用，在 render 函数中被渲染的子组件都会经历更新过程，不管父组件传给子组件的 props 有没有改变，都会触发子组件的这个函数（通过this.setState函数触发的更新过程不会调用，因为它适合根据新的 props 值(参数nextProps)来计算出是不是要更新内部状态的state。
2.shouldComponenttUpdate(nextProps, nextState)
render函数决定了该渲染什么，此函数决定了决定了一个组件什么时候不需要渲染，它们是唯二两个要求返回结果的函数。render函数的返回值用于构造DOM对象，shouldComponenttUpdate函数的返回值返回一个布尔值，告诉React库这个组件在这次更新过程中是否要继续。
在更新过程中，React库首先会调用shouldComponenttUpdate函数，如果这个函数返回true，那就会继续更新过程，接下来调用render函数。反之返回false就不会引发后续的更新。
可以利用此函数定制它，提升组件的性能。通过this.setState函数引发更新过程，并不是立刻更新组件的state值，在执行到函数shouldComponenttUpdate时候，this.state依然是this.setState函数执行前的值，所以要通过在此函数中用nextProps、nextState和this.state中的值做对比。在复杂庞大的组件中，会大大提高性能。
//
shouldComponentUpdate(nextProps, nextState) {
//只有当caption改变或者count改变时才会触发更新过程
return (nextProps.caption !== this.props.caption) ||
(nextState.count !== this.state.count);
}
3.componentWillUpdate和componentDidUpdate
在shouldComponentUpdate函数返回true之后，会依次调用componentWillUpdate、render、componentDidUpdate。
当在componentDidMount中调用其它UI库代码之后，比如jQuery。当React组件被更新之后，原有的内容被重新绘制，这个时候就需要在componentDidUpdate中再次调用jQuery代码
卸载过程
componentWillUnmount
当React组件要从DOM树上删除之前，对应的componentWillUnmount函数会被调用。
componentWillUnmount往往会和componentDidMount有关，比如，在componentDidMount函数中用非React的方法创造了一些DOM元素，如果不管就会造成内存泄漏，就需要在此函数中清理掉这些DOM元素。
组件向外传递数据
子组件向父组件传递数据
组件的prop可以是任何的JavaScript对象，所以函数也可以传递。当函数作为prop的值从父组件传递给子组件，当在子组件中通过this.props.xxx调用这个函数时并将参数传递时，会在父组件中执行函数(传递的参数要与父组件中定义的函数参数顺序一致)
父组件中
onCounterUpdate(newValue, previousValue) {
const valueChange = newValue - previousValue;
this.setState({sum: this.state.sum + valueChange});
}
render() {
console.log('enter ControlPanel render');
return (
<div>
<Counter onUpdate={this.onCounterUpdate} caption="First" />
<Counter onUpdate={this.onCounterUpdate} caption="Second" initValue={this.initValues[1]}/>
<Counter onUpdate={this.onCounterUpdate} caption="Third" initValue={this.initValues[2]}/>
<div>Total count：{this.state.sum}</div>
</div>
)
}
子组件
onClickReduceButton() {
// this.setState({count: this.state.count - 1})
this.updateCount(false)
}
updateCount(isIncrement) {
const previousValue = this.state.count;
const newValue = isIncrement ? previousValue + 1 : previousValue - 1;
this.setState({count: newValue});
this.props.onUpdate(newValue, previousValue);
}
render() {
console.log('enter render ' + this.props.caption);
const CounterStyle = {
margin: '10px'
};
const {caption} = this.props;
return (
<div>
<button style={CounterStyle} onClick={this.onClickAddButton}>+</button>
<button style={CounterStyle} onClick={this.onClickReduceButton}>-</button>
<span>{caption} count: {this.state.count}</span>
</div>
)
}
