组件使ui层变成独立，可复用的块并且每一个块都可以独立思考。React.Component 由React提供。
回顾
React.Component 是一个基类，所以一般都是通过子类继承的方式使用，并且包含一个render方法
通常，你应该定义一个 React component作为一个纯净的js类。
注意
不建议建立你自己的组件基类，代码重用的基本实现使通过合成而不是继承（一些场景可以让你理解如何去使用合成 https://reactjs.org/docs/composition-vs-inheritance.html）
组件的生命周期
每一个组件都有若干个生命周期的方法（在进程中的你可以重写在特殊的时刻），方法中带will前缀在某件事情发生之前被调用，带did的前缀的在某件事发生之后被调用。
mounting
以下方法将被调用当一个实例组件被创建并插入到dom中的时候
constructor（）
componentWillMount()
render()
componentDidMount()
updating
属性或者状态的改变会触发更新，以下方法会在组件正进行重新渲染的过程中触发。
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
unmounting
该方法将在组件正被被移除dom的时候触发
component WillUnmount()
error handing
该方法将被调用当渲染过程，生命周期方法，或者任何子组件构造出错的时候
componentDidCatch()
other api
每一个组件也包含一些二外的apis
setState()
forceUpdate()
class Properties
defaultProps
displayName
instance Properties
props
state
参考
render（）
当被调用，它将检测所在组件的属性与状态并返回以下一种类型：
react elements 通过JSX生成，既可以是原生的组件（<div>）也可以时你自定义的合成组件
（<MyComponent>）
string and numbers 这些将被渲染为文本节点
portals 被ReactDOM.createPortal创建
null 不渲染任何东西
booleans 不渲染任何东西（主要是为了支持 return test && <Child/> 这种模式，当jtest是一个boolean值）
当返回null或者false的时候，ReactDOM.findDOMNode(this) 将会返回null
render方法应该是纯净的，意味着它不能修改组件的状态，它将返回相同的结果每次被调用的时候，
并且它不能直接的与浏览相互影响，如果你需要与浏览相互影响，执行你的代码在componentDidMount()
或者其他的生命周期方法中。保持render方法的纯净使组件更加的好理解
注意：render 方法将不会被调用如果shouldComponentUpdate返回值为false
Fragments
你也可以通过array返回多条组件
render() {
return [
<li key="A">First item</li>,
<li key="B">Second item</li>,
<li key="C">Third item</li>,
];
}注意：不要忘记在每一项中添加key，防止警告的产生
从react版本16.2.0开始，同样可以用fragments来实现上面的效果（在静态的项中不需要设立key）
render() {
return (
<React.Fragment>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</React.Fragment>
);
}constructor（）
这个方法在组件装配之前调用，当在React.Component子类中实现
这个方法的时候，你应该调用super（props）在任何声明之前，否则
this.props将为undefined在constructor中，这将引起一些bug。
Avoid introducing any side-effects or subscriptions in the constructor. For those use cases, use componentDidMount() instead.
constructor用来初始化state，将组件方法绑定到组件的实例上，不能调用setstate
如果你不需要初始化state并且不需要绑定方法，那么你不需要实现该方法在你de
React component中
在少数的情况下，通过组件实例的prop来初始化state
constructor(props) {
super(props);
this.state = {
color: props.initialColor
};
}注意这种模式，由于状态不能伴随着组件的属性更新而立即更新，你应该将state提升而不是将属性与状态同步。（lift the state up ：组件中的状态a第一次渲染，如果其他组件也需要a,那么你可以将该状态提升到这两个组件最近的共同父组件中，而不是去同步不同组件中的a，你应该依赖于由顶向下的数据流）
如果你为了状态将组件的属性分叉，你也可以实现componentWillReceiveProps(nextProps) 该方法来使状态立即更新，但是list the state up 比较而言更简单并且低出错率。
componentWillMount()
该方法在挂载之前立即调用，在render（）之前，所以在该方法中同步调用setState()
将不会触发额外的rendering，通常我们建议使用constructor()方法替代。
避免在该方法中引入任何副作用或者订阅模式。对于这些使用场景，用componentDidMount()
来替代。
在服务器渲染中，这是唯一一个被调用的钩子函数
componentDidMount()
该方法将在组件挂载之后立即调用。初始化需要的dom节点需要在这里执行，比如ajax获取数据
该方法中适合建立各种订阅，若该方法中建立订阅，那么componentWillMount()要取消订阅。
在该方法中使用setstate（）将触发额外的一次rendering，但是该rending发生在浏览器视图更新之前。
这可以确保即使render（）发生了两次，用户也不会看到中间的变化。在使用这种模式的时候要谨慎，因为它经常会引起一些展示问题。但是对于一些场景，这种模式还是非常重要的，比如：需要测量一个DOM node，在渲染某些东西之前（依赖于该dom node的大小与位置）
componentWillReceiveProps(nextProps)
该方法在被挂载好的组件接受一个新的props之前调用。
如果你需要更新state来答复属性的改变，你可以比较this.props和nextProps
然后使state转变通过使用this.setState()在该方法中。
注意：react会调用这个方法即使props没有发生改变，所以如果你仅仅要控制变化，比较当前的props与下一个props，否则父组件可以引起子组件重新渲染。
react不会调用该方法在正在挂载期间，它只会在组件的属性可能就更新的情况下被调用。
调用this.setState()方法通常不会触发componentWillReceiveProps()。
shouldComponentUpdate(nextjProps,nextState)
该方法让react知道组件的输出是否受当前的属性或者状态影响。默认的行为是每当状态改变就要重新渲染，并且大多数场景，你所依赖的就是默认行为。
该方法在组件接受新状态与属性之前调用，默认返回true，该方法不会被调用在初始的渲染或者当force Update（）被使用的情况下
当返回false的时候不会阻止其子组件状态改变时触发的重新渲染。
当下，若该方法返回false，那么componentWillUpdate(),render()和componentDidUpdate()将不会被调用。将来。。。。
如果你判定一个特殊的组件很慢通过性能分析，你可以将该组件继承 React.PureComponent,
其实现了shouldComponentUpdate()伴随一个狭窄的属性和状态对照。如果你非常自信想手写，你可以比较当前的属性/状态与下一个属性/状态，通过返回false来告诉react哪些更新时可以跳过的。
我们不建议做深入的比较检验或者使用JSON。stjringfy()在shouldcompentUpdate()中
这将是非常低效并且对展现有害的行为。
componentWillUpdate(nextProps,nextState)
该方法在rending之前立即调用，当新的属性或者状态正在被接收。在更新出现之前通过该方法来执行一些准备。该方法不会被调用在初始的渲染中
注意：该方法中不能调用this.setState(),同时也不能做任何会触发组件更新的操作在componentWillUpdate()返回之前。
如果你需要针对props的改变来更新状态，使用componentWillReceiveProps()替换。
componentDidUpdate(prevProps,preState)
该方法将会被立即调用在更新出现的时候，该方法不会在初始渲染的时候调用。
可以在该方法中操作dom当组件已经更新完成了.同时也可以做网络请求只要你比较当前的
props与下一个props。
componentWillUnmount()
该方法在组件不挂载并且销毁之前立即调用，执行任何主要的清理在该方法总
比如使定时器无效，取消请求，或者清除在componentDidMount()中产生的订阅。
componentDidCatch(error,info)
只能获取子组件的错误，无法获取本身的错误
setState()
告诉react组件和子组件需要伴随着状态的改变而更新。把该方法当作一个请求而不是一个立即执行的命令来更新组件。为了更好的体验，react也许会延迟它，然后更新若干个组件在一个处理中，react不能保证状态变化后被立即更新。
setstate()将总是引起重绘除非shouldComponentUpdate()返回false，如果易变的正在被使用并且条件渲染逻辑不能再shouldComponentUpdate()中被实现，调用setstate只在新的状态与原来的状态不一致的时候，来避免不必要的re-render.
（prevState,props) => stateChange
prevstate用来表示原来的state，它不会直接变化。并且，改变会通过创建一个新的对象依赖于传入的prevState和props。
prevState和props一起来保证立即更新，更新的输出结果会于prestate浅浅的合并。
第二个传入参数是一个可选的回掉函数在setstate完成后并且组件已经重新渲染过。通常，我们建议使用componentDidUpdate()用来处理这样的逻辑。
this.setState({quantity:2})
该方法是异步的，并且在一个循环中多次的调用会一起被处理，如果你想不止一次的增加某一项在一个循环中，使用该方法的结果便是每一项仅仅会被增加一次。这种场景应该使用
this.setState((prevState) => {
return {quantity: prevState.quantity + 1};
});forceUpdate()
component.forceUpdate(callback)
默认情况下，当组件的状态或者属性改变的时候，组件将重新渲染，如果你的render方法依赖于其他的一些数据，你需要告诉react组件需要重新渲染通过调用forceUpdate()
调用forceUpdate()将引起render()被调用，跳过shouldComponentUpdate().这将触发子组件普通的生命周期函数，包括每一个子组件的shouldcomponentUpdate()方法。react将更新dom如果确认改变。
通常你应该避免使用这个方法并且仅仅在render（）中读取this.props和this.state
defaultProps
定义为组件的一个属性用来为组件设置默认的属性，它用来设置未定义的属性而不是设置为空的属性
class CustomButton extends React.Component {
// ...
}
CustomButton.defaultProps = {
color: 'blue'
}; render() {
return <CustomButton /> ; // props.color will be set to blue
} render() {
return <CustomButton color={null} /> ; // props.color will remain null
}
displayName
this.props.children
