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：0，
    }
}
与this.state.strikes是返回的一个对象。


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

}

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

五：样式设计
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


组件接口：
顺序：
1
getDefaultProps:function(){
    //组件加载前被调用
    //返回的是this.props
}


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

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

4
render：function（）{
    return ()
}

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



======当setState（）后,组件状态对象改变。=========
=====周期顺序===============
shouldComponentUpdate：function(newProps,newState){
    //返回true，render
    //返回false，不会render，界面不会改变
    if(newState.count<5){
        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

略。