錯(cuò)誤邊界（Error Boundaries）

部分 UI 的 JavaScript 錯(cuò)誤不應(yīng)該導(dǎo)致整個(gè)應(yīng)用崩潰，為了解決這個(gè)問(wèn)題，React 16 引入了一個(gè)新的概念 —— 錯(cuò)誤邊界。

錯(cuò)誤邊界是一種 React 組件，這種組件可以捕獲并打印發(fā)生在其子組件樹(shù)任何位置的 JavaScript 錯(cuò)誤，并且，它會(huì)渲染出備用 UI，而不是渲染那些崩潰了的子組件樹(shù)。錯(cuò)誤邊界在渲染期間、生命周期方法和整個(gè)組件樹(shù)的構(gòu)造函數(shù)中捕獲錯(cuò)誤。

錯(cuò)誤邊界的工作方式類(lèi)似于 JavaScript 的?catch {}，不同的地方在于錯(cuò)誤邊界只針對(duì) React 組件。只有 class 組件才可以成為成錯(cuò)誤邊界組件。大多數(shù)情況下, 你只需要聲明一次錯(cuò)誤邊界組件, 并在整個(gè)應(yīng)用中使用它。

注意錯(cuò)誤邊界僅可以捕獲其子組件的錯(cuò)誤，它無(wú)法捕獲其自身的錯(cuò)誤。如果一個(gè)錯(cuò)誤邊界無(wú)法渲染錯(cuò)誤信息，則錯(cuò)誤會(huì)冒泡至最近的上層錯(cuò)誤邊界，這也類(lèi)似于 JavaScript 中 catch {} 的工作機(jī)制。

錯(cuò)誤邊界應(yīng)該放置在哪？

錯(cuò)誤邊界的粒度由你來(lái)決定，可以將其包裝在最頂層的路由組件并為用戶(hù)展示一個(gè) “Something went wrong” 的錯(cuò)誤信息，就像服務(wù)端框架經(jīng)常處理崩潰一樣。你也可以將單獨(dú)的部件包裝在錯(cuò)誤邊界以保護(hù)應(yīng)用其他部分不崩潰。

Fragments

React 中的一個(gè)常見(jiàn)模式是一個(gè)組件返回多個(gè)元素。Fragments 允許你將子列表分組，而無(wú)需向 DOM 添加額外節(jié)點(diǎn)。

短語(yǔ)法

你可以使用一種新的，且更簡(jiǎn)短的語(yǔ)法來(lái)聲明 Fragments。它看起來(lái)像空標(biāo)簽：

高階組件（higherOrderComponent）

高階組件（HOC）是 React 中用于復(fù)用組件邏輯的一種高級(jí)技巧。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設(shè)計(jì)模式。

具體而言，高階組件是參數(shù)為組件，返回值為新組件的函數(shù)。

const EnhancedComponent=higherOrderComponent(WrappedComponent);

組件是將 props 轉(zhuǎn)換為 UI，而高階組件是將組件轉(zhuǎn)換為另一個(gè)組件。

HOC 在 React 的第三方庫(kù)中很常見(jiàn)，例如 Redux 的?connect?和 Relay 的?createFragmentContainer。

在一個(gè)大型應(yīng)用程序中，這種訂閱?DataSource?和調(diào)用?setState?的模式將一次又一次地發(fā)生。我們需要一個(gè)抽象，允許我們?cè)谝粋€(gè)地方定義這個(gè)邏輯，并在許多組件之間共享它。這正是高階組件擅長(zhǎng)的地方。