ReactJS - 嚴格模式

React 基於元件、屬性和狀態的概念構建。React 提供了相對較少的 API 來建立和更新元件。React 的基本特性足以滿足我們大部分前端應用的需求。但是，現代應用仍然存在複雜的場景，需要高階前端邏輯。React 提供了許多高階 API，可以幫助我們建立複雜的前端應用。高階 API 有一定的成本。高階 API 比較難學習並在我們的應用中應用。

React 提供了一種嚴格模式，它透過在應用的開發階段突出潛在問題來幫助開發者正確應用高階 API。眾所周知，React 中的一切都是基於元件的概念構建的，嚴格模式只是一個非可視元件，`React.StrictMode`。嚴格模式元件的使用也很簡單。只需將要分析的元件用 `React.StrictMode` 元件包裝起來，如下所示：

<React.StrictMode>
   <OurComplexComponent />
</React.StrictMode>

嚴格模式的另一個功能是在應用中使用某些遺留或已棄用的 API（最終會在應用中引入 bug）時丟擲錯誤或警告。

讓我們在本節中學習嚴格模式元件突出顯示的專案列表。

不安全的生命週期使用

React 發現一些遺留的生命週期事件在基於非同步的應用中是不安全的。它們如下所示：

• componentWillMount

• componentWillReceiveProps

• componentWillUpdate

不安全意味著它會在應用中產生難以除錯的 bug。React 最終會在該庫的未來版本中刪除這些不安全生命週期事件。在此之前，開發者在使用遺留的不安全生命週期事件時會收到警告。

遺留 ref API 使用

早期版本的 React 使用基於字串的 ref 管理，後來添加了基於回撥的 ref 管理。推薦使用基於回撥的選項，因為它更穩定，出錯的可能性更小。如果我們使用基於字串的選項，嚴格模式將發出警告。

最新版本的 React 提供了改進的 ref 管理選項，它既易於編寫程式碼，出錯的可能性也更小。

遺留的 findDOMNode 使用

findDOMNode 幫助搜尋給定類例項的 DOM 節點樹。findDOMNode 的使用已被棄用，並提倡使用基於 ref 的 DOM 管理。

副作用

React 有兩個主要階段，渲染和提交。渲染階段涉及大量工作且耗時，而提交階段則簡單快捷。React 引入了併發模式，它將提高渲染階段的效能。併發模式的要求之一是，在渲染階段使用的生命週期事件不應包含副作用。

React 將嘗試在開發階段使用不同的方法查詢意外的副作用，並將其報告為警告。

遺留的 context API

遺留的 context API 易於出錯，不推薦使用。它將在未來版本中刪除。在此之前，嚴格模式將檢測遺留 context API 的使用並進行報告。

可重用的狀態

具有可重用狀態的元件可以在不產生任何副作用的情況下多次掛載和解除安裝，這將有助於提高應用的效能。未來版本的 React 庫將在保留狀態的同時新增或刪除 UI 部分。React 18 引入了一項嚴格模式特性，它將嘗試解除安裝並重新掛載元件以確保元件具有彈性。此階段的任何問題都將被報告。