React组件，React和生命周期

笔记，具体可以看看这个博客：

https://segmentfault.com/a/1190000004168886?utm_source=tag-newest

react 的jsx  document.createElement()一层层cereateElement

问题一：jsx render函数原理？

一：
引入:
react.js
react-dom.js
browser.min.js

<script type="text/babel">
 var destination = document.querySelector("#container"))
ReactDOM.render(
    <div>hello world</div>
    ,destination
)
</script>

二，创建组件，React.createClass({

render:function()
{
    return (
        <div>hello world</div>

    )

}

})

三：组件的传递只能是父传给亲儿子，不能越级直接传孙子；{...this.props}

<p color={this.props.color} size={this.props.size}></p>
等同于：
<p {...this.props}></p>

四：原生接口
getInitialState：function（）{
    //刷api接口的时候,组件还未渲染
    return {
        strikes：，
    }
}
与this.state.strikes是返回的一个对象。

componentDidMount：function（）{
    //组件渲染完成，render渲染之前

}

this.setState({strikes:this.state.strikes+})

五：样式设计
render：function（）{
    var countStytle={
            color:this.props.color,
           fontSize:"14px",
        padding:"10px",
        backgroundColor:"#EEE"

    }
    return (
        <div className="letter" style={countStyle}>hello world</div>
    )
}

六：react组件的生命周期

componentWillMount

componentDidMount

componentWillUnmount

componentWillUpdate

componentDidUpdate

shouldComponentUpdate

componentWillReceiveProps

组件接口：
顺序：

getDefaultProps:function(){
    //组件加载前被调用
    //返回的是this.props
}

getInitialSate:function(){
    //返回的是this.state
}

componentWillMount:function(){
    //挂载到指定节点之前，会先调用这个函数
}

render：function（）{
    return ()
}

componentDidMount:function(){
    //组件已经成功滴被浏览器加载了
}

======当setState（）后,组件状态对象改变。=========
=====周期顺序===============
shouldComponentUpdate：function(newProps,newState){
    //返回true，render
    //返回false，不会render，界面不会改变
    if(newState.count<){
        return true
    }else{
        return false
    }
}

componentWillUpdate:function(){
    //
    rerurn;
}

render:function(){
    //
}

componentDidUpdate：function（）{
    //
}

React组件的生命周期机制：
componentWillUnmount
//节点销毁，从dom拿掉

用到调用Dom的api，把这个组件消亡掉：
ReactDOM.unmountComponentAtNode(destination)

=====================
组件属性更改：调用顺序：

componentWillReceiveProps：function（newProps）{
    //当组件的属性一旦更改，调用这个方法
    return {};
}

shuouldComponentUpdate:function(newProps,newState){
    //
}

componentWillUpdate

render 绘制完成。

componentDidUpdate

略。