ReactNative.jpg

ReactNative整理：《ReactNative系列》

一、簡述

??類似Android和iOS開發(fā)中的生命周期，ReactNative中的組件也存在生命周期，代表著每個組件從創(chuàng)建到銷毀的經(jīng)歷的整個過程。詳細理解生命周期，是搞開發(fā)的小伙伴們的必修課，真正理解了Lifecycle，能幫助我們更高效更合理的開發(fā)。下面貼張生命周期圖：

組件生命周期圖.jpg

從圖中就可以看出，組件的生命周期分為三個部分：

• 實例化階段：負責頁面數(shù)據(jù)和狀態(tài)的初始化，以及頁面渲染、展示、邏輯處理；
• 運行展示階段：負責頁面展示及事件交互，根據(jù)操作對頁面元素進行調(diào)整或重新渲染；
• 卸載銷毀階段：負責移除Virtual DOM中的一些數(shù)據(jù)結構，回收組件事件，解綁監(jiān)聽器Listener或者釋放定時器，取消網(wǎng)絡請求等；

注釋：
Q: 什么是Virtual DOM？
A: Virtual DOM是虛擬文檔對象模型（Document Object Model，DOM），簡單來說，它是React框架中的重要組成部分。用戶操作或頁面渲染都需要真實DOM的結構調(diào)整或重新計算，但是頻繁調(diào)用DOM造成的性能損耗相對于其他操作是很大的，前端開發(fā)中都是盡量保持較小次數(shù)的DOM操作來提高性能。而虛擬DOM會重新構建DOM樹，通過diff算法，將當前DOM樹和之前的進行比較，得到前后DOM樹的區(qū)別，然后僅僅把變化的部分映射到真實DOM上，從而提高渲染性能。

二、階段拆分

1. 實例化階段

• getDefaultProps：獲取組件初始props屬性的方法，往往是從父組件傳遞過來的屬性值，是ES5的寫法，ES6中已廢除。在ES6中用靜態(tài)方法static defaultProps = {}替代?？梢岳?code>this.props獲取屬性值，該函數(shù)全局只調(diào)用一次，所以組件不能自己修改props，只有其他組件調(diào)用時，在外部修改。
• getInitialState：用于初始化組件的狀態(tài)，一般初始化的都是變量，利用this.state獲取狀態(tài)值。該函數(shù)能多次調(diào)用，如果想要修改組件狀態(tài)state值，必須用this.setState()的方式來修改，同樣也是ES5的寫法，ES6中已經(jīng)廢除。ES6中用構造方法constructor(props)初始化狀態(tài)值。

// ES5寫法
var Demo = React.createClass({
  getDefaultProps() { // 初始化屬性值
    return {
      title: '簡書',
      content: '組件生命周期'
    };
  },
  getInitialState() { // 初始化狀態(tài)值
    return {
      number: 20
    };
  },
  render () {
    return (
      <View></View>
    );
  },
});

// ES6第一種寫法
class Demo extends Component {
  // 初始化屬性值
  static defaultProps = { // 默認屬性值
    title: '簡書',
    content: '組件生命周期'
  };
  static propTypes = { // 屬性值類型
    title: PropTypes.string,
    content: PropTypes.string
  };
  constructor(props) {
    super(props);
    // 組件狀態(tài)變量聲明
    this.state = {
      number: 20
    };
  }

  render() {
    return (
      <View></View>
    );
  }
}

// ES6第二種寫法
class Demo extends Component {
  constructor(props) {
    super(props);
    // 組件狀態(tài)變量聲明
    this.state = {
      number: 20
    };
  }
}
Demo.defaultProps = {
  title: '簡書',
  content: '組件生命周期'
};
Demo.propTypes = {
  title: PropTypes.string,
  content: PropTypes.string
}

• componentWillMount：在組件被渲染到視圖上之前調(diào)用，整個生命周期中只調(diào)用一次！可以在該函數(shù)中進行業(yè)務初始化，或者設置組件狀態(tài)。（適合做非網(wǎng)絡請求的狀態(tài)設置和修改）
• render：render函數(shù)是主渲染函數(shù)，是組件中必須存在的方法。會返回一個由JSX或其他組件構成的Virtual DOM，只允許返回一個最頂層容器組件。不能在渲染組件的時候更改組件狀態(tài)，否則會進入死循環(huán)--setState -> render -> setState...
• componentDidMount：render之后，React框架會根據(jù)之前返回的虛擬DOM生成真實DOM，生成之后就會調(diào)用該函數(shù)，通知組件已經(jīng)加載完畢?？梢栽谠摵瘮?shù)中進行網(wǎng)絡請求，或者是加入定時器。在生命周期中也是只調(diào)用一次！

2. 運行展示階段

• componentWillReceiveProps：組件props改變時調(diào)用（父組件更改或通過狀態(tài)管理框架修改），新的props會以參數(shù)的形式傳進來，舊的props還是通過this.props來獲取?？梢愿鶕?jù)props的變化來調(diào)用this.setState()更新組件狀態(tài)。在該函數(shù)中修改組件狀態(tài)state不會引起二次render渲染！

  void componentWillReceiveProps(Object nextProps) {}
  

注：不管是props還是state的更改，都需要經(jīng)過shouldComponentUpdate函數(shù)。在componentWillReceiveProps函數(shù)中修改狀態(tài)，會統(tǒng)一進入shouldComponentUpdate進行處理，所以不會二次渲染。

• shouldComponentUpdate：

  boolean shouldComponentUpdate(Object nextProps, Object  nextState) {}
  

返回的布爾值來決定組件是否需要重新渲染!
?攜帶的兩個參數(shù)分別代表新的props和新的state，通過新舊props和state的對比來判斷渲染邏輯，如果需要渲染，返回true，會繼續(xù)調(diào)用后面的周期函數(shù)；如果不需要，返回false，進入運行狀態(tài)，等待下次更新操作。
?默認情況下，函數(shù)返回值為true。如果有特定的判斷條件或業(yè)務邏輯處理，可以選擇更新或不更新，則能夠在該函數(shù)中做優(yōu)化，提高性能。

• componentWillUpdate：

  void componentWillUpdate (Object nextProps, Object nextState) {}
  

?攜帶的參數(shù)同樣為新的props和state。組件刷新前調(diào)用，在該回調(diào)函數(shù)中，可以做一些頁面更新前要做的操作。有些類似componentWillMount，但是不能修改和更新組件state。
?該函數(shù)調(diào)用過之后，就會把nextProps和nextState分別賦給this.props和this.state。

• componentDidUpdate：調(diào)用完render函數(shù)，生成真實DOM之后回調(diào)該函數(shù)，類似componentDidMount傳遞過來的參數(shù)是當前的props和state。因為到這個方法時，已經(jīng)完成了props和state的更新，所以輸入?yún)?shù)變成了prevProps和prevState。

  void componentDidUpdate(Object prevProps, Object prevState) {}
  

3. 卸載銷毀階段

• componentWillUnmount：組件移除銷毀時調(diào)用，主要做資源的回收釋放和相關清理，例如：解綁監(jiān)聽器，取消計時器或者取消網(wǎng)絡請求等。

三、總結

?RN組件的生命周期介紹完了，熟悉這些周期函數(shù)的特性，對開發(fā)小伙伴有不小的幫助，希望能幫到大家?。?！