? ? ? ? ? ?一直對React心儀之久，也就在今天終于拿起筆桿攒读，對React相關用法進行“筆伐”恢暖。
? ? ? ? ? ? 先聲明：本文的來源與參考：（一）facebook ?對React.Component的文檔介紹；（二）可岂，網上相關開發(fā)者實踐經驗介紹岸售。?
? ? ? ? ? ? 首先React.Component is provided by React.
? ? ? ? ? ? 關于React.Component官方文檔是這樣的介紹：Components let you splite the UI into independent,reusable pieces,and think about each piece in isolation.
? ? ? ? ? ? 首先要明確践樱，React.Component幾乎不直接當做組件使用，一般是“繼承”它凸丸，自定義組件拷邢，當然自定義組件至少要實現(xiàn)render()方法。
? ? ? ? ? ? 例如：
? ? ? ? ? ? class ?Greeting extends React.Component{
? ? ? ? ? ? ? ? ? ? ?render(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return <h1>Hello,{this.props.name} </h1>
? ? ? ? ? ? ? ? ? ? ? ? ?}?
? ? ? ? ? ? ?}
? ? ? ? ?然后屎慢，咱們來看一看The Component Lifecycle.
? ? ? ? ?官方對其的解析為：Each component ?has several "lifecycle methods" that you can override to run code at particular times in the process.Methods prefixed with will are called right before something happens,and methods prefixed with did are called right after something happens.(大概意思就是：每個組件都有若干的生命周期方法瞭稼，你可以在特定時間重寫這些方法，以至于在它的生命周期特定進程里面調用腻惠。前綴will的方法在該事件之前調用环肘。前綴did的方法在該事件之后調用)。
? ? ? ? 看完解釋之后集灌，接下來就要好好熟悉Component的生命周期中的各個函數(shù)的用法及場景啦悔雹。
場景：No.1
? ? ? ? ?簡稱:Mounting。
? ? ? ? ? 英文解釋為：These methods are called when an instance of a component is being created and inserted into the DOM.
? ? ? ? (1).constructor()
? ? ? ? 文檔解釋：the constructor for a React component is called before it is mouted.The constrctor is the right place to initialize state.
? ? ? ? ?Here's an example of a valid React.Component subclass constructor:
? ? ? ? ?constructor(props){
? ? ? ? ? ? ? ? ?super(props)
? ? ? ? ? ? ? ? ? this.state = {color:this.initalColor};
? ? ? ? }
? ? ? ? ? (2)componentWillMount()
? ? ? ? ? 摘至文檔：componentWillMount() is invoked immediately before mounting occurs.it is called before render().This is the only lifecycle hook called on server rendering.
注：建議用constructor()代替componentWillMount().
? ? ? (3)render()
? ? ? ? ? 摘至文檔：when called ,it should examine this.props and this.state and return a single React element.you can also return null or false to indicate that you don't want anything rendered.when returning null or false,ReactDom.findDOMNode(this) will return null;the render() function should be pure,meaning that it does not modify component state,it return the same result each time it's invoked,and it does not directly interact with the browser.if you need to interact with the browser,perform your work in componentDidMount() or the other lifecycle methods instead.keeping render() pure makes components easier to think about.
注意：render() will not be invoked if shouldComponentUpdate return false;如果shouldComponentUpdate返回false,render()將不會被調用欣喧。
? ? ? ? ?(4)componentDidMount
? ? ? ? 摘至文檔：componentDidMount() is invoked immediately after a component is mounted,Initialization that requires DOM nodes should go here. if you need to load data from a remote endpoint,this is a good place to instantiate the network request.Setting state in this method will trigger a re-rending.
? ? ?No.2
? ? ?簡稱：Updating
? ? ? ? an ?update can be caused by changes to props or state.these ?methods are called when a component is being re-rendered. (通過對props或者state的變化腌零，會引起組件的更新，這些方法會被調用當一個組件正在被繪制的時候)续誉。
? ? ? ?(1)componentWillReceiveProps(nextPropd)
? ? ? ?(2)shouldComponentUpdate(nextProps,nextState)
? ? ? ?(3)componentWillUpdate()
? ? ? ?(4)render()
? ? ? ?(5)componentDidUpdate()
? ? ? No.3
? ? ? 簡稱：Unmounting
? ? ? ? ?this method is called when a component is being removed from the DOM:(當組件正從DOM中移除的時候這個方法將會被調用)莱没。
? ? ? ? ?(1)componentWillUnmount()
? ? ? 介紹完React.Component生命周期初肉，再來看看React.Component其他的APIS:
? ? ? ? (1)each component also provides some other APIs:
? ? ? ? ? ? ? ? ?setState();
? ? ? ? ? ? ? ? ?forceUpdate()
? ? ? ?(2)Class Properties
? ? ? ? ? ? ? ? ? defaultProps
? ? ? ? ? ? ? ? ? displayName
? ? ? ?(3)Instance Properties
? ? ? ? ? ? ? ? ? ? props
? ? ? ? ? ? ? ? ? ? state
