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

0_IL_61ErymdqjoNgL.jpeg

在本文中,我们将研究如何使用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种新的生命周期方法正在替代上述方法。它们是静态的 getDerivedStateFromPropsgetSnapshotBeforeUpdate 方法。

在进行突变之前,将调用 getSnapshotBeforeUpdate 生命周期,并将其返回值作为第三个参数传递给componentDidUpdate

getSnapshotBeforeUpdatecomponentDidUpdate 一起涵盖了 componentWillUpdate 的所有用例。

严格模式将警告不要使用旧的生命周期钩子。

关于旧版字符串引用API使用的警告

而且,React严格模式将警告在我们的代码中使用字符串引用。

不推荐使用字符串引用,因为它们不能静态输入。它们需要始终保持一致,神奇的动态字符串破坏了VM中的优化,并且只能在一个级别上使用。

我们不能像回调和对象引用那样传递它。

因此,它会警告我们有关字符串引用的用法,因为它们已被弃用。

将来会支持回调 refscreateRef

关于不建议使用的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前端工程师,全栈开发工程师、持续学习者。

subscribe2.png


前端全栈开发者
专栏首发于公众号《前端全栈开发者》,订阅关注第一时间阅读好文
1 篇内容引用

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
0 条评论
推荐阅读
在Flutter中动态地改变应用启动器图标
在本文中,我们将讨论如何在 Flutter 应用程序的运行时动态更改多个应用程序启动器图标。在 pubspec.yaml 文件中添加以下依赖项。flutter_dynamic_icon:[链接]考虑我们已经准备好基本的 UI(包含图像和按钮小部...

杭州程序员张张阅读 710

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan41阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
宣传栏