第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

react中 調(diào)用setState方法會自動觸發(fā)render方法調(diào)用? 促使頁面更新

react 屬性只能自上而下傳遞，不能從下往上傳遞

{...props} 可以直接接受所有從父節(jié)點傳下來的所有屬性? 減少代碼? 使屬性更新的 難度降低

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被變更時，會觸發(fā)一系列的周期。

首先，第一個被調(diào)用的生命周期函數(shù)是：

componentWillReceiveProps: function(newProps){ } :? 返回寫return就OK。

接下來被調(diào)用的函數(shù)與上一節(jié)類似，順序如下：

shouldcomponentUpdate

componentWillUpdate

render

componentDidUpdate

componentWillUnmount : 如果組件要被從這個DOM里拿掉，就調(diào)用此函數(shù)。這個函數(shù)可以做這個組件被刪除前的收尾工作。

ReactDOM.unmountComponentAtNode()用來直接導(dǎo)致組件被刪除。此案例中被用在componentWillUnmount中。

shouldComponentUpdate: function(newPros, newStae){}

shouldComponentUpdate生命周期函數(shù)返回false,react會停止調(diào)用后面的生命周期函數(shù);?返回true,會調(diào)用compnentWillUpdate，再由他來調(diào)用render，更新組件在該界面上的顯示。

componentWillUpdate：如果shouldComponentUpdate返回true,此函數(shù)將被調(diào)用，此函數(shù)返回return就好。

componentDidUpdate: componentWillUpdate實現(xiàn)完后被調(diào)用

getDefaultProps：組件加載前被調(diào)用,被調(diào)用的時候，組件在構(gòu)造this.props對象，return { }中的“{ }”為this.props

getInitialState: 用來創(chuàng)建組件原生的狀態(tài)對象this.stae。 return { }中的“{ }”，這個空的對象為this.state

componentWillMount : 組件被掛載到DOM節(jié)點之前，會調(diào)用此函數(shù)，告訴我們此組件即將被加載，調(diào)用完后，組件會調(diào)用render函數(shù)。返回直接寫return就ok 。

componentDidMount : 當(dāng)這個函數(shù)被調(diào)用，程序就知道當(dāng)前組件已經(jīng)成功加載到瀏覽器中了（render函數(shù)已把component繪制到界面上）

?React組件聲明周期函數(shù)：

1. componentWillMount

2. componentDidMount

3. componentWillUnmount

4. componentWillUpdate

5. componentDidUpdate

6. shouldComponentUpdate

7. componentWillReceiveProps
   

... 三點操作符，把一個css對象融入另一個css對象中

?屬性，類名，不能是class，是className，因為class是react的關(guān)鍵詞

children是react的固有屬性

深層次的傳值使用? {...this.props}

React中寫樣式：

????①、使用className，在style標(biāo)簽中寫css樣式

????②、使用style={}，在render: function() {} 中增加變量，注意：樣式改用用font-size->fontSize

1、創(chuàng)建組件

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

當(dāng)父組件調(diào)用了render函數(shù)會觸發(fā)子組件也調(diào)用render函數(shù)

4、組件被渲染之前

? this.getInitialState()

5、組件被render之前

this.componentDidMount()

6、狀態(tài)管理

?????6.1設(shè)置狀態(tài)

???? ????this.state = {}

?????6.2? this.getDefaultProps() 對應(yīng)this.props對象

? ? ?6.3修改狀態(tài)

???????? 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當(dāng)數(shù)據(jù)變化時,判斷屬性或者狀態(tài)改變是否滿足更新條件，this.shouldComponentUpdate()第一個被調(diào)用

????????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當(dāng)組件屬性更改之后調(diào)用的生命周期

????????componentWillReceiveProps: function(newProps){}

????????改變屬性調(diào)用生命周期比改變state時多了this.componentWillReceiveProps()