1.state屬性

state顧名思義就是狀態，它只是用來控制這個元件本身自己的狀態，我們可以用state來完成對行為的控制、資料的更新、介面的渲染.

setState更新是非同步的，事件處理過程 setState 不會同步更新 this.state， React 控制之外的情況， setState 會同步更新 this.state

總結：儘量少地用 state，儘量多地用 props。原因是這樣會降低程式碼維護的難度，也會在一定程度上增強元件的可複用性，react鼓勵我們編寫函式式元件。

2.componentDidUpdate：

react函式每次更新元件（或者資料）都需要this.setState(state)來進行，

這裡補充每次呼叫setState()結束之後都會自動呼叫componentDidUpdate()鉤子，

因此，如果有每次更新都要進行的行動都可以寫在這個鉤子中

componentDidUpdate(prevProps, prevState) {
        <!--一定要給個判斷條件，不然就會死迴圈-->
        if (prevProps.data !== this.props.data) {
          const { data } = this.props;
          if (data) {
            this.setState({
              data
            });
          }
        }
    }
 

3、render

• 我們經常會看到render執行很多次，通常render渲染有以下情況：

  1. 首次載入，即資料進來首先執行render渲染基本頁面元件
  2. setState改變元件內部state。（只要觸發setState一次就會render一次）
  3. 接受到新的props

注：一般情況下我們會有三次render，首次載入、componentDidMount傳送ajax時render、得到迴應render

4、dva中間聯結器（dva 首先是一個基於redux和redux-saga的資料流方案，然後為了簡化開發體驗，dva 還額外內建了react-router和fetch，所以也可以理解為一個輕量級的應用框架。）

5、react鉤子函式

1）.constructor(props, context)
建構函式，在建立元件的時候呼叫一次。
2）componentWillMount()
在元件render之前立即呼叫
Tip1: 不建議在此請求資料，由於請求資料介面一般都是非同步，這時候render已經被執行，建議在componentDidMount 資料

Tip2: 如果在服務端渲染，該鉤子函式將被呼叫兩次，一次服務端，一次瀏覽器端，而componentDidMount函式只會在瀏覽器端請求一次

Tip3: 在taro構建的小程式裡對應的生命週期是 onLoad。

3）componentDidMount()
所有的元件（包括子元件）在render執行完之後立即呼叫，並且只會被呼叫一次。
Tip: 建議在此請求資料

4）componentWillReceiveProps(nextProps)
在props被改變時被觸發，初始化render時不呼叫。
舊的屬性還是可以通過this.props來獲取，在這裡通過呼叫this.setState()來更新你的元件狀態。
Tip1: 某些情況下，props沒變也會觸發該鉤子函式，需要在方法裡手動判斷一下this.props和nextProps是否相同，不相同了才執行我的更新方法。

Tip2：該函式一般用來更新依賴props的狀態

5） shouldComponentUpdate(nextProps, nextState)
發生重渲染時，在render()函式呼叫前被呼叫的函式，當函式返回false時候，阻止接下來的render()函式的呼叫，阻止元件重渲染，而返回true時，元件照常重渲染。
該方法並不會在初始化渲染或當使用forceUpdate()時被呼叫。
6）componentWillUpdate(nextProps, nextState)
shouldComponentUpdate返回true或者呼叫forceUpdate之後，componentWillUpdate會被呼叫。
7.）getSnapshotBeforeUpdate(prevProps, prevState)
該函式在最新的渲染輸出提交給DOM前將會立即呼叫。它讓你的元件能在當前的值可能要改變前獲得它們。這一生命週期返回的任何值將會 作為引數被傳遞給componentDidUpdate()。
8） componentDidUpdate(prevProps, prevState)
除了首次render之後呼叫componentDidMount，其它render結束之後都是呼叫componentDidUpdate。
9）componentWillUnmount()
在元件被解除安裝和銷燬之前立刻呼叫。可以在該方法裡處理任何必要的清理工作，例如解繫結時器，取消網路請求，清理任何在componentDidMount環節建立的DOM元素。
10）componentDidCatch(error, info)
該函式稱為錯誤邊界，捕捉髮生在子元件樹中任意地方的JavaScript錯誤，列印錯誤日誌，並且顯示回退的使用者介面。
Tip：錯誤邊界只捕捉樹中發生在它們之下元件裡的錯誤。一個錯誤邊界並不能捕捉它自己內部的錯誤。

11）render()
render是一個React元件所必不可少的核心函式（上面的其它函式都不是必須的）。
Tip：記住，不要在render裡面修改state。

12.React元件更新路徑
參考：https://www.jianshu.com/p/e7f7967f8928

6、react-file-viewer外掛（實現pdf,word,xlsx檔案預覽）

1)npm install react-file-viewer

2)在組建中引入importFileViewerfrom'react-file-viewer';

3)直接使用（涉及到跨域文題自行解決可以使用代理來解決別的方案也可行）

<FileViewer 
   fileType='docx'//檔案型別
   filePath={wo} //檔案地址
   onError={this.onError.bind(this)} //函式[可選]：當檔案檢視器在獲取或呈現請求的資源時發生錯誤時將呼叫的函式。在這裡可以傳遞日誌記錄實用程式的回撥。
   errorComponent={console.log("出現錯誤")} //[可選]：發生錯誤時呈現的元件，而不是react-file-viewer隨附的預設錯誤元件。
  unsupportedComponent={console.log("不支援")} //[可選]：在不支援檔案格式的情況下呈現的元件。
  />