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

略。