React

           一直对React心仪之久，也就在今天终于拿起笔杆，对React相关用法进行“笔伐”。

            先声明：本文的来源与参考：（一）facebook  对React.Component的文档介绍；（二），网上相关开发者实践经验介绍。 

            首先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几乎不直接当做组件使用，一般是“继承”它，自定义组件，当然自定义组件至少要实现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的生命周期中的各个函数的用法及场景啦。

场景：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