使用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前端工程师，全栈开发工程师、持续学习者。