react native生命周期詳解！

今天小編為大家分享有關(guān)于“react native生命周期詳解！”這方面的相關(guān)內(nèi)容，希望小編的分享對大家的學(xué)習(xí)和了解有所幫助！

我們先來看看下面這個有關(guān)于 react native 生命周期的流程圖，如下所示：

在上面這個流程圖中我們可以了解到，在 react native 生命周期中分為三個階段。 

階段一：實(shí)例化階段函數(shù)功能分析

1、 getDefaultProps：在這個組件中我們可以通過使用 ?this.props? 獲取初始化它的屬性，而且在組件初始化后，再次使用這個組件是不會調(diào)用?getDefaultProps?函數(shù)，所以組件自己不可以修改?props?，只可由其他組件調(diào)用它時再外部進(jìn)行修改。

2、getInitialState：這個函數(shù)用于對組件部分狀態(tài)進(jìn)行初始化，而且該函數(shù)不同于 ?getDefaultProps? ,在之后的過程中我們會再次調(diào)用，所以可以將控制控件狀態(tài)的一些變量放在這里初始化（比如控件上顯示的文字，可以通過this.state來獲取值，通過this.setState來修改state值。）

注意：而且一旦調(diào)用了?this.setState?方法，組件一定會調(diào)用 ?render ?方法，對組件進(jìn)行再次渲染，不過，React 框架會根據(jù) DOM的狀態(tài)自動判斷是否需要真正渲染。

下面我們來看看下面相關(guān)的代碼：

constructor(props) {
    super(props);
    this.state = {
      clickText: "開始點(diǎn)擊按鈕",
      count: 1,
      detailContent: true
    }
  }
    ...
clickButton(){
    const { count } = this.state;
    this.setState({
      clickText: "我點(diǎn)擊了按鈕",
      count: count + 1,
      detailContent: false
    })
  }

render() {
    console.log("render1111");
    return (
      <View style={styles.container}>
        <Text>歡迎來到首頁</Text>
        <TouchableOpacity
          onPress={() => Actions.notice()}
        >
          <Text>跳轉(zhuǎn)到公告頁</Text>
        </TouchableOpacity>
        <Text style={{color: 'blue', fontSize: 40}}>{this.state.count}</Text>
        <TouchableOpacity
          style={styles.button}
          onPress={() => this.clickButton()}
        >
          <Text>{this.state.clickText}</Text>
        </TouchableOpacity>
        <HomeDetails detailContent={this.state.detailContent}/>
      </View>
    )
  }

3、componentWillMount： 組件將要被加載到視圖之前調(diào)用

4、componentDidMount:  在這個方法中調(diào)用了render方法，組件加載成功并被成功渲染出來之后，所要執(zhí)行的后續(xù)操作，一般都會在這個函數(shù)中進(jìn)行。

階段二：存在階段函數(shù)功能分析

shouldComponentUpdate:一般用于優(yōu)化，可以返回false或true來控制是否進(jìn)行渲染(true 的話進(jìn)行下2步操作，false不會進(jìn)行下去)
componentWillUpdate: 組件刷新前調(diào)用
componentDidUpdate：更新后

shouldComponentUpdate(nextProps, nextState){
    console.log(this.state.detailContent,'detailContent');
    if (this.state.count !== nextState.count) {
      console.log("shouldComponentUpdate1111---組件需要更新");
      return true;
    }
    return false;
  }

  componentWillUpdate(){
    console.log("componentWillUpdate1111---組件將要更新");
  }

  componentDidUpdate(){
    console.log("componentDidUpdate1111---組件更新完畢");
  }

componentWillReceiveProps:指父元素對組件的props或state進(jìn)行了修改

// 在子組件中對父元素props或state的改變進(jìn)行監(jiān)聽進(jìn)行相應(yīng)的操作
componentWillReceiveProps(nextProps){
    console.log(this.props.detailContent,'this--->>componentWillReceiveProps');
    console.log(nextProps.detailContent,'next--->>componentWillReceiveProps')
  }
// componentWillReceiveProps -> 改變后執(zhí)行父組件中 shouldComponentUpdate -> componentWillUpdate -> componentDidUpdate

階段三：銷毀階段函數(shù)功能分析

componentWillUnmount
用于清理一些無用的內(nèi)容，比如：定時器清除

下面為大家介紹一些我們?nèi)粘３Ｓ玫闹R點(diǎn)：

this.state:開發(fā)中，組件肯定要與用戶進(jìn)行交互，React 的一大創(chuàng)新就是將組件看成了一個狀態(tài)機(jī)，一開始有一個初始狀態(tài)，然后用戶交互，導(dǎo)致狀態(tài)變化，從而觸發(fā)重新渲染UI。

1、當(dāng)用戶點(diǎn)擊組件，導(dǎo)致狀態(tài)變化，this.setSate方法就修改狀態(tài)值，每次修改以后，會自動調(diào)用this.render方法，再次渲染組件
2、可以把組件看成一個狀態(tài)機(jī)，根據(jù)不同的status有不同的UI展示，只要使用setState改變狀態(tài)值，根據(jù)diff算法算出有差值后，就會執(zhí)行ReactDom的render方法，重新渲染界面
3、由于this.props和this.state都用于描述組件的特性，可能會產(chǎn)生混淆，一個簡單的區(qū)分方法就是---this.props表示那些一旦定義，就不再更改的特性，而this.state是會隨著用戶交互而產(chǎn)生改變的特性

獲取真實(shí)的Dom節(jié)點(diǎn):
1、在React Native中，組件并不是真實(shí)的DOM節(jié)點(diǎn)，而是存在于內(nèi)存中的一種數(shù)據(jù)結(jié)構(gòu)，叫虛擬DOM
2、只有當(dāng)它插入文檔后，才會變成真實(shí)的DOM
3、根據(jù)React的設(shè)計(jì)，所有DOM變動，都現(xiàn)在虛擬DOM上發(fā)生，然后再將實(shí)際發(fā)生變動的部分，反映在真實(shí)DOM上，這種算法叫做DOM diff，它可以極大提高網(wǎng)頁的性能表現(xiàn)。
4、有時需要從組建獲取真實(shí)DOM節(jié)點(diǎn)，這時就需要到ref屬性

以上就是有關(guān)于：“react native生命周期詳解！”這方面的相關(guān)內(nèi)容分享，更多有關(guān)于 react native 這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！