亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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()