目錄

• 一、React 各個版本之間的縱向對比
• 二、React 的基礎
  • 1、Components and Props
• 三、React V 16.0.0
  • 1、 The Component Lifecycle ( v16.0.0 )
  • 2、 Other APIs
  • 3、 Class Properties （類的屬性）
  • 4、Instance Properties （實例屬性）
  • 3、 回顧

由於 React 的版本更新頻繁，各類的新特性也是讓人眼花繚亂的，為了方便自己查詢最新的以及過往的 各個 React 版本 api、生命周期函數。 這裏就用 caniuse 的方式做一個 方便查詢的小功能。

那麽要實現這個小功能之前，我們必須要對 React 的各種版本進行仔細的解讀。
最快捷的方式就是 直接 通過官方文檔來獲取最真實的信息。
 

一、React 各個版本之間的縱向對比

二、React 的基礎

1、Components and Props

1-1、About Components

1、Components let you split the UI into independent, reusable pieces, and think about each piece in isolation 

組件允許您將UI拆分為獨立的、可重用的部分，並獨立地考慮每個部分

2、Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

從概念上講，組件類似於JavaScript函數。它們接受任意輸入(稱為“props”)，並返回描述屏幕上應該出現的內容的React元素。

1-2、Component‘s presentation (展現形式)

The simplest way to define a component is to write a JavaScript function:
（最簡單的方式）

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

You can also use an ES6 class to define a component:
（你也可以使用 ES2015 中 類 的方式）

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

上面的二種寫法，目前來看是等價的.

任何都 React 版本，關於 Lifecycle 我們都可以找到對應的幾個狀態，來進行不同的 api 的差異的對比。這樣也是方便，我們進行記憶的。

三、React V 16.0.0

官方文檔傳送門： React V 16.0.0 官方文檔

1、 The Component Lifecycle ( v16.0.0 )

1-1 Mounting （綁定階段）

constructor()

1. React.Component 的 constructor 會在組件被 mounted 之前被調用
2. 當作為 React.Component 的子類的時候，必須要有 super(props) 被調用，否則會有 bug
3. constructor 是正確的初始化 state 的地方。並且在 constructor 中不能調用 setState() 方法
4. 如果沒有初始化的方法或者 state 的話，就不需要 constructor
5. state 也可以 基於 props 的值，但是 state 不會隨著 props 帶改變而改變。

例如:

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

1. 如果你想監聽 props 的變化，再這個版本中你可以使用 componentWillReceiveProps(nextProps) 方法。

componentWillMount()

1. componentWillMount()在掛載發生之前立即被調用
2. 在 render() 之前 被調用
3. 所以在 這個方法中使用 setState() 不會 觸發 render 方法
4. 避免在此方法中引入任何副作用
5. 這是在服務器呈現時調用的惟一生命周期鉤子

render()

1. render() 方法是必要的
2. render 方法當被調用時，會檢查當前的 props 和 state 並返回 一種具體的類型

以下類型：
React elements、String and numbers 、 Portals 、null

當 render  null、 false、ReactDOM.findDOMNode(this) 的時候會返回 null

1. render 函數中不應該修改 state 的值，它不會馬上和瀏覽器交互。
2. 如果想改變 state 的值，並馬上能在瀏覽器上看到，那就在 componentDidMount() 中調用。

componentDidMount()

1. componentDidMount() 方法在 component is mounted 之後馬上被調用
2. 在這一步可以初始化需要的 Dom 節點
3. 而且這裏也是很好的進行 ajax 請求的地方。
4. 這裏也是進行 訂閱 的地方。並記得在 componentWillUnmount() 方法中 退訂。
5. 在這裏調用 setState() 會觸發一個 額外的 rendering。如果同時觸發2次也只會執行一次。
6. 不要頻繁使用 setState() 因為會帶來 性能問題。

1-2 Updating （數據更新階段）

componentWillReceiveProps()

componentWillReceiveProps(nextProps)

1. componentWillReceiveProps() 方法 在已經被 mounted 的組件在接受一個新的props 的時候被調用。
2. 在這個方法中，你可以對比 this.props 和 nextProps 然後 使用 this.setState() 改變 props 的值
3. 當父組件 re-render 當前組件的時候，用於 props 並未發生改變，但是 也會執行 componentWillReceiveProps 這個方法。 所以這裏就需要你進行 當前值 和 nextProps 對比 來進行下一步的操作。
4. 此方法不會在 初始化 對時候就執行的。
5. 唯一會執行這個方法對就是 props 更新發生變化的時候。這也是正確的使用當前 api 的場景。

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

1. 讓React知道組件的輸出是否不受當前狀態或道具更改的影響
2. 是在每個狀態更改時重新呈現 時候的默認行為。
3. 當有新的 props 和 state 被接受的 之前 就會 調用此方法
4. 在 初始化 render 和 forceUpdate方法被調用的時候，這個方法不會被調用。
5. 返回 fasle 的時候不會 防止 他們的組件組 進行 重新渲染。

componentWillUpdate()

componentWillUpdate(nextProps, nextState)

1. 此方法 比 shouldComponentUpdate 多了一個 immediately
2. 此方方法是為了 執行一些準備，在 updata 之前。
3. 在此方法中不能 執行 setState() ，也不能做任何事情，除了 dispatch a Redux action 等。
4. 如果你需要 更新 state 或者 props 的結果，你可以 使用 componentWillReceiveProps()

componentDidUpdate()

componentDidUpdate(prevProps, prevState)

1. 在 updating 發生之後立即執行 componentDidUpdate
2. 在此方法 是一個機會來 處理 Dom 當 組件 update 之後。
3. 這也是一個好的地方來處理網絡請求，當 props 發生改變的時候。
4. 如果 props 沒發生改變，則不需要發送 ajax 請求。

1-3 Unmounting （解除綁定階段）

componentWillUnmount()

1. 當組件被卸載和銷毀的時候此方法馬上被調用。
2. 同時 也可以 清理 一些方法。例如 無效的 timers 、取消ajax請求、一些訂閱

1-4 Error Handling （錯誤處理階段）

componentDidCatch()

componentDidCatch(error, info)

1. 錯誤邊界是響應組件，這些組件捕捉子組件樹中的任何位置的JavaScript錯誤，記錄這些錯誤，並顯示一個回退UI，而不是崩潰的組件樹。錯誤邊界在呈現、生命周期方法和下面整個樹的構造函數中捕獲錯誤。

2. 如果類組件定義了這個生命周期方法，它就會成為一個錯誤邊界。在其中調用setState()允許您在下面的樹中捕獲未處理的JavaScript錯誤並顯示回退UI。只使用錯誤邊界從意外異常中恢復;不要試圖用它們來控制流程。

2、 Other APIs

2-1 setState() （數據變更）

2-2 forceUpdate() （強制數據變更）

3、 Class Properties （類的屬性）

3-1 defaultProps（默認的 props）

3-2 displayName（展示名稱）

4、Instance Properties （實例屬性）

4-1 props（父組件傳遞進來的數據）

4-2 state（本地組件的數據）

3、 回顧

可能就會有同學問了，為啥 第二部分的內容不講了？
答： 這真的沒什麽好講的。
以上則是 React V16.0.0 的全部內容，歡迎大家一起討論～後面還有 關於剩下版本的 apis 變化的介紹，
主要是以 為什麽 react 開發組要 幹掉這些 api 以及 新的 api 能解決什麽問題為出發點。介紹 ReactJS 這些年的進化
幫助大家一起來走進這個框架。

GitHub 地址：（歡迎 star 、歡迎推薦 : )

ReactJs 的各個版本生命周期、API變化 匯總

ReactJs 的各個版本生命周期、API變化 匯總（一、V16.0.0）