使用React严格模式避免过时的代码和副作用

更新日期: 2020-02-07阅读: 2.7k标签: 严格模式

在本文中,我们将研究如何使用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前端工程师,全栈开发工程师、持续学习者。


链接: https://fly63.com/article/detial/8515

Js严格模式详解【转】

除了正常运行模式,ECMAscript 5添加了第二种运行模式:严格模式(strict mode),严格模式的目的消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;提高编译器效率,增加运行速度等

在严格模式或ES6中,如何在函数内部拿到函数对象本身?

在函数中方法函数对象本身,我们以前可以这样实现,但是在严格模式或ES6下,使用callee/caller会报错,由于不能使用arguments.callee,在不使用函数名本身的情况,有什么方法可以实现呢?

Doctype的作用?区分严格模式与混合模式意义?

<!DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。严格模式又称标准模式,是指浏览器按照 W3C 标准解析代码。混合模式又称怪异模式或兼容模式

js严格模式(use strict)

use strict是ECMAScript 5引入的一条指令。指令不是语句(但非常接近于语句)。“usestrict\\\\\\\\\\\\\\\"指令和普通的语句之间有两个重要的区别:

Typescript 严格模式有多严格?

use strict指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。至今,前端 er 们基本都默认开启严格模式敲代码。那么,你知道 Typescript 其实也有属于自己的严格模式吗?

为什么需要在 JavaScript 中使用严格模式?

严格模式是什么意思?有什么用途?为什么我们应该使用它? 本文 将主要从这几个问题入手,讲述在 JavaScript 中使用严格模式的必要性。严格模式是现代 JavaScript 的重要组成部分。

Typescript 严格模式到底严在哪里?

当 Typescript 严格模式设置为 on 时,它将使用 strict 族下的严格类型规则对项目中的所有文件进行代码验证。规则是:此规则不允许变量或函数参数具有隐式 any 类型。请看以下示例:

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!