在本文中，我們將研究如何使用React的嚴格模式來獲得有關開發期間過時的API和副作用的額外警告。

嚴格模式

嚴格模式是用於突出顯示應用程式中潛在問題的工具，它不會呈現任何可見的UI。

它只用於啟用對其後代的額外檢查和警告。

嚴格模式不會影響生產環境。

我們可以將嚴格模式新增到React應用程式，如下所示：

class App extends React.Component {  render() {    return (      <div>        <p>foo</p>        <React.StrictMode>          <p>bar</p>        </React.StrictMode>      </div>    );  }}

在上面的程式碼中，帶有 'foo' 的 p 標籤不在嚴格模式下檢查，因為它位於 React.StrictMode 元件的外部，但是內部的 p 元素則由嚴格模式檢查。

識別不安全的生命週期

嚴格的模式檢查不安全的生命週期，一些生命週期方法正在被棄用，因為它們鼓勵了不安全的編碼實踐。

他們是：

componentWillMountcomponentWillReceivePropscomponentWillUpdate

UNSAFE_ 字首將在以後的版本中新增。

有2種新的生命週期方法正在替代上述方法。它們是靜態的 getDerivedStateFromProps 和getSnapshotBeforeUpdate 方法。

在進行突變之前，將呼叫 getSnapshotBeforeUpdate 生命週期，並將其返回值作為第三個引數傳遞給componentDidUpdate。

getSnapshotBeforeUpdate 和 componentDidUpdate 一起涵蓋了 componentWillUpdate 的所有用例。

嚴格模式將警告不要使用舊的生命週期鉤子。

關於舊版字串引用API使用的警告

而且，React嚴格模式將警告在我們的程式碼中使用字串引用。

不推薦使用字串引用，因為它們不能靜態輸入。它們需要始終保持一致，神奇的動態字串破壞了VM中的優化，並且只能在一個級別上使用。

我們不能像回撥和物件引用那樣傳遞它。

因此，它會警告我們有關字串引用的用法，因為它們已被棄用。

將來會支援回撥 refs 和 createRef。

關於不建議使用的findDOMNode情況的警告

不推薦使用 findDOMNode 方法，我們可以使用它來搜尋給定類例項的DOM節點。

我們不需要這樣做，我們不需要這樣做，因為我們可以將一個 ref 附加到一個DOM節點。

findDOMNode 僅返回第一個子級，但是元件可以使用Fragments呈現多個DOM級別。

因此，它現在不是很有用，因為它僅搜尋一個級別，我們可以使用ref來獲取我們要查詢的確切元素。

我們可以將 ref 附加到wrapper元素上：

class App extends React.Component {  constructor(props) {    super(props);    this.wrapper = React.createRef();  }  render() {    return <div ref={this.wrapper}>{this.props.children}</div>;  }}

如果我們不想包裹div，我們可以設定 display: contents 在我們的CSS中，如果我們不想讓節點成為佈局的一部分。

檢測意外的副作用

React工作分為兩個階段：

渲染階段對DOM進行任何更改，React在此階段呼叫 render，然後將結果與先前的渲染進行比較。提交階段執行任何生命週期方法來應用所需的更改。

渲染階段生命週期包括以下類元件方法：

constructorcomponentWillMountcomponentWillReceivePropscomponentWillUpdategetDerivedStateFromPropsshouldComponentUpdaterendersetState

由於它們可能被多次呼叫，因此它們不應該有任何副作用。忽略此規則可能會導致諸如記憶體洩漏和無效的應用程式狀態之類的問題。

嚴格模式通過兩次執行以下方法來檢查是否產生了副作用：

類元件的構造(constructor)方法渲染(render)方法setState靜態 getDerivedStateFromProps 生命週期檢測舊版上下文API

嚴格模式將檢測舊Context API的使用。在以後的版本中將其刪除。如果使用了新的，我們應該轉移到新的。

總結

我們可以使用嚴格模式來檢測已棄用的生命週期方法，舊版Context API，字串引用以及一些可能帶來意外副作用的程式碼。

它僅顯示開發中的警告，不會影響生產環境程式碼。

這裡推薦一本超棒的React書籍，我看過，所以才推薦。

作者簡介：Web前端工程師，全棧開發工程師、持續學習者。