ReactJs 的各個版本生命週期、API變化 彙總（1、V16.0.0）

目錄

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

因爲 React 的版本更新頻繁，各種的新特性也是讓人眼花繚亂的，爲了方便本身查詢最新的以及過往的 各個 React 版本 api、生命週期函數。 這裏就用 caniuse 的方式作一個 方便查詢的小功能。

---

那麼要實現這個小功能以前，咱們必需要對 React 的各類版本進行仔細的解讀。
最快捷的方式就是 直接 經過官方文檔來獲取最真實的信息。

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

React 版本   各個階段 API	Mounting（綁定）	Updating（數據更新）
V 16.0.0	constructor() componentWillMount() render() componentDidMount()	componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate()
V 16.3.2	constructor() static&nbspgetDerivedStateFromProps() componentWillMount() / UNSAFE_componentWillMount() render() componentDidMount()	componentWillReceiveProps() / UNSAFE_componentWillReceiveProps() static getDerivedStateFromProps() shouldComponentUpdate() componentWillUpdate() /UNSAFE_componentWillUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate()
V 16.5.2	constructor() static getDerivedStateFromProps() render() componentDidMount()	static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate()
V 16.7.0(最新)	constructor() static getDerivedStateFromProps() render() componentDidMount()	static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate()

2、React 的基礎

一、Components and Props

1-一、About Components

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

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

---

二、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-二、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 的差別的對比。這樣也是方便，咱們進行記憶的。

3、React V 16.0.0

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

一、 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。只使用錯誤邊界從意外異常中恢復;不要試圖用它們來控制流程。

二、 Other APIs

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

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

三、 Class Properties （類的屬性）

3-1 defaultProps（默認的 props）

3-2 displayName（展現名稱）

四、Instance Properties （實例屬性）

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

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

三、 回顧

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

---

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

ReactJs 的各個版本生命週期、API變化 彙總