React 前言

  作為一個開發人員，如今我們大多數都會沉迷於專案的業務開發，很少花時間進行技術或問題梳理。以至於我們每次遇到相同的問題或障礙，都會再次陷入。總結和思考應該是我們每一個人所要掌握的軟技能。React作為一個主流的JS庫，使我們的開發變得更加簡單。

React 是什麼？

  React是Facebook開發的一款JS庫。React便於構建隨資料變化的大型應用程式。

React 特點

• 構建、更新 簡單
  
  • UI搭建方便簡單
  • 自動更新UI介面
• 元件複用強
  
  • 高複用
  • 單元測試

React 原理

• 虛擬DOM
  
  • 通過虛擬DOM來更新真實DOM減少資源浪費,優化效能
  • diff演算法
    
    • diff演算法作為虛擬DOM的加速器，保障了整個介面渲染的基礎和效能
  • 傳統diff演算法
    
    • 計算一顆樹形結構轉換為另一顆樹形結構所需要的最少步驟（時間複雜度為O(n^3)）
  • ==diff演算法(React)==(diff演算法)
    
    • UI 中DOM節點跨層級的移動操作特別少，可以忽略不計
    • 擁有相同類的兩個元件將會生成相似的樹形結構，擁有不同類的兩個元件將會生成不同的樹形結構
    • 對於同一層級的一組子節點，它們可以通過唯一id進行區分
• 節點
  
  • 傳統DOM樹上的節點被稱為元素
  • 虛擬DOM樹上的節點稱為元件(完整的抽象元件)
• 狀態state和render生命週期函式
  
  • 狀態改變呼叫render函式更新UI

React 用法

  props是一個從外部傳進元件的引數，主要作為父子元件間資料傳遞，具有隻讀性和不變性，只能通過外部元件主動傳入新的props來重新渲染子元件，否則子元件的props以及展現形式不會改變。

• props
  
  • 只讀性
    
    • props經常被用作渲染元件和初始化狀態
  • 預設值
    
    • 設定預設值，並且制定它的型別

  state的主要用於儲存、控制以及修改元件的狀態，它只能在constructor中初始化this.state={a:1}，屬於元件的私有屬性，不可通過外部訪問和修改，只能通過元件內部的this.setState({a:2})來修改

• state
  
  • 特殊用法
    
    • this.setState({a;2},()=>{//重新渲染時UI時被呼叫})

  react生命週期是一個比較重要的知識點。

• 生命週期

    /**
    *-------構造器-------
    *1、初始化預設屬性
    *2、....
    */
    constructor(props){
        super(props);
    }


     /**
    *-------元件掛載之前-------
    *1、更改屬性
    *2、....
    */
    componentWillMount(){

    }

     /**
    *-------元件掛載之後-------
    *1、引用refs
    *2、網路請求
    *3、.......
    */
    componentDidMount(){

    }

    /**
    *-------父元件render時子元件執行-------
    *1、引用refs
    *2、....
    */
    componentWillReceiveProps(nextProps){
        //不管props有沒有更新，也不管父子元件之間有沒有資料交換,都會被執行
    }

     /**
    *-------元件掛載之後state發生改變-------
    *1、需要重新渲染元件，預設返回true，需要重新render
    *2、....
    */
    shouldComponentUpdate(nextProps, nextState){

    }

     /**
    *-------元件渲染之前-------
    *1、shouldComponentUpdate返回true或者呼叫forceUpdate之後
    *2、....
    */
    componentWillUpdate(nextProps, nextState){

    }

    /**
    *-------元件渲染-------
    */
    render(){

    }


    /**
    *-------元件渲染之後-------
    */
    componentDidUpdate(){

    }

     /**
    *-------元件解除安裝之前-------
    *1、取消監聽
    *2、釋放資源
    *3、......
    */
    componentWillUnmount(){

    }

React 總結

   合理進行React元件封裝，生命週期函式componentDidMount、componentWillUnmount、shouldComponentUpdate的使用，巧用props、state進行UI渲染會使得介面開發更加簡單方便。