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

 

略。