使用React嚴格模式避免過期的代碼和反作用

在本文中，咱們將研究如何使用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 元素則由嚴格模式檢查。

識別不安全的生命週期

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

他們是：

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

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，而後將結果與先前的渲染進行比較。
• 提交階段運行任何生命週期方法來應用所需的更改。

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

• constructor
• componentWillMount
• componentWillReceiveProps
• componentWillUpdate
• getDerivedStateFromProps
• shouldComponentUpdate
• render
• setState

因爲它們可能被屢次調用，所以它們不該該有任何反作用。忽略此規則可能會致使諸如內存泄漏和無效的應用程序狀態之類的問題。

嚴格模式經過兩次運行如下方法來檢查是否產生了反作用：

• 類組件的構造(constructor)方法
• 渲染(render)方法
• setState
• 靜態 getDerivedStateFromProps 生命週期

檢測舊版上下文API

嚴格模式將檢測舊Context API的使用。在之後的版本中將其刪除。若是使用了新的，咱們應該轉移到新的。

總結

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

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

---

若是對你有所啓發和幫助，能夠點個關注、收藏，也能夠留言討論，這是對做者的最大鼓勵

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