这次主要针对react state和props这两个元素进行分析
state： 在react只需更新组件的state, 然后就可以根据state来重新渲染组件，也就是说state是组件的一个状态
组件中用到的一个变量是不是应该作为组件State，可以通过下面的4条依据进行判断：
1.这个变量是否是通过Props从父组件中获取？如果是，那么它不是一个状态。
2.这个变量是否在组件的整个生命周期中都保持不变？如果是，那么它不是一个状态。
3.这个变量是否可以通过其他状态（State）或者属性(Props)计算得到？如果是，那么它不是一个状态。
4.这个变量是否在组件的render方法中使用？如果不是，那么它不是一个状态。这种情况下，这个变量更
适合定义为组件的一个普通属性，例如组件中用到的定时器，就应该直接定义为this.timer，而不是this.state.timer
特点
- 不能直接修改state.
直接修改state, 组件并不会更新render.例如：
// error
this.state.title = 'title'
// right
this.state.setState({title: 'title'})
- state 的更新是异步的
调用setState, 组件的state并不会改变， setState只是把修改的状态放入到一个对列中，react会优化正真的执行时间。计算后的state不能保证是最新的
对于一个按钮多次点击的情况，如果直接设置state，可能只会加1， react内部会认将多次合并成一次
// 可以采取这种方法
this.state((preState, props) => ({
counter: preState.num + 1;
})
小tips:
总得来说这个有点类似vue中得v-model
props： 用于父组件向子组件传值；但是props是不被允许修改的
一定要写PropTypes，切莫为了省事而不写
如果一个Props不是requied，一定在getDefaultProps中设置它
React.PropTypes主要用来验证组件接收到的props是否为正确的数据类型，如果不正确，console中就会出现对应的warning。出于性能方面的考虑，这个API只在开发环境下使用。
父组件用法
<Parent children="yaobo"></Parent>
子组件
import PropTypes from 'prop-types';
class MyComponent extends React.Component {
render() {
// This must be exactly one element or it will warn.
const children = this.props.children;
return (
<div>
{children}
</div>
);
}
}
MyComponent.propTypes = { // 这个要记得写
children: PropTypes.element.isRequired
};
也可以设置默认的props
Greeting.defaultProps = {
name: 'Stranger'
};
也可以在 getDefaultProps 中进行设置
官网推荐： https://reactjs.org/docs/typechecking-with-proptypes.html
