react中 调用setState方法会自动触发render方法调用  促使页面更新

react 属性只能自上而下传递，不能从下往上传递

{...props} 可以直接接受所有从父节点传下来的所有属性  减少代码  使属性更新的 难度降低

var letterStyle = {
background:this.props.bgColor
}
<div style={letterStyle}>this.props.children</div>

<Letter bgColor = "#52bbff">T</Letter>
<Letter bgColor = "#3ce">Y</Letter>

{this.props.greetTarget}

greetTarget = "Nancy"

props被变更时，会触发一系列的周期。

首先，第一个被调用的生命周期函数是：

componentWillReceiveProps: function(newProps){ } :  返回写return就OK。

接下来被调用的函数与上一节类似，顺序如下：

shouldcomponentUpdate

componentWillUpdate

render

componentDidUpdate

componentWillUnmount : 如果组件要被从这个DOM里拿掉，就调用此函数。这个函数可以做这个组件被删除前的收尾工作。

ReactDOM.unmountComponentAtNode()用来直接导致组件被删除。此案例中被用在componentWillUnmount中。

shouldComponentUpdate: function(newPros, newStae){}

shouldComponentUpdate生命周期函数返回false,react会停止调用后面的生命周期函数; 返回true,会调用compnentWillUpdate，再由他来调用render，更新组件在该界面上的显示。

componentWillUpdate：如果shouldComponentUpdate返回true,此函数将被调用，此函数返回return就好。

componentDidUpdate: componentWillUpdate实现完后被调用

getDefaultProps：组件加载前被调用,被调用的时候，组件在构造this.props对象，return { }中的“{ }”为this.props

getInitialState: 用来创建组件原生的状态对象this.stae。 return { }中的“{ }”，这个空的对象为this.state

componentWillMount : 组件被挂载到DOM节点之前，会调用此函数，告诉我们此组件即将被加载，调用完后，组件会调用render函数。返回直接写return就ok 。

componentDidMount : 当这个函数被调用，程序就知道当前组件已经成功加载到浏览器中了（render函数已把component绘制到界面上）

 React组件声明周期函数：

1. componentWillMount

2. componentDidMount

3. componentWillUnmount

4. componentWillUpdate

5. componentDidUpdate

6. shouldComponentUpdate

7. componentWillReceiveProps
   

... 三点操作符，把一个css对象融入另一个css对象中

 属性，类名，不能是class，是className，因为class是react的关键词

children是react的固有属性

深层次的传值使用  {...this.props}

React中写样式：

    ①、使用className，在style标签中写css样式

    ②、使用style={}，在render: function() {} 中增加变量，注意：样式改用用font-size->fontSize

1、创建组件

React.createClass({

        getInitialState: function(){

            return {};

        },

        render: function(){

            const styleJson = {

                 color: red;

                 fontSize: 14;

            }

            return (

                <div style={styleJson }>my component<div>

            )

        }

})

2、挂载react实例

ReactDom.render({

    <div>my app</div>,

    destination

})

3、组件返回jsx

render: function(){}

当父组件调用了render函数会触发子组件也调用render函数

4、组件被渲染之前

  this.getInitialState()

5、组件被render之前

this.componentDidMount()

6、状态管理

     6.1设置状态

         this.state = {}

     6.2  this.getDefaultProps() 对应this.props对象

     6.3修改状态

         this.setState()

7、组件样式对象

    styleJson = {

         color: red;

         fontSize: 14;

    }

    使用样式

    <myComponent style={stylejson} />

8、生命周期

    8.1组件被挂载到容器之前

    this.componentWillMount() 

    8.2组件被渲染到容器中

    ReactDom.render()

    8.3组件被成功挂载到容器之后

    this.componentDidMount()

    this.componentWillMount -》 this.render() -> this.componentDidMount()

    8.4当数据变化时,判断属性或者状态改变是否满足更新条件，this.shouldComponentUpdate()第一个被调用

        shouldComponentUpdate: function(props, newState){

             if(..){

                  return true

             } else {

                // 将组件从dom中销毁

                 ReactDom.unmountComponentAtNode(destination); 

                 return false;

             }

        }

    8.5更新之前

        this.componentWillUpdate()

    8.6更新之后

        this.componentDidUpdate()

    8.7组件被销毁前最后一次通知

        this.componentWillUnmount()

    8.8当组件属性更改之后调用的生命周期

        componentWillReceiveProps: function(newProps){}

        改变属性调用生命周期比改变state时多了this.componentWillReceiveProps()