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