React - Strict Mode

React 建立在 component、properties 和 state 的概念之上。React 提供了一小套 API 来创建和更新 component。React 的基本功能足以满足我们前端应用的大部分需求。但是，现代应用仍有复杂的场景，需要高级的前端逻辑。React 提供了许多高级 API，帮助我们创建复杂的前端应用。高级 API 是有成本的。高级 API 学习和应用起来稍显困难。

React 提供了一种 strict mode，它帮助开发者在应用开发阶段通过突出潜在问题来正确应用高级 API。如我们所知，React 中的一切都建立在 component 的概念上，strict mode 只是一个非可视化的 component，即 React.StrictMode。strict mode component 的使用也非常简单。只需将要分析的 component 用 React.StrictMode component 包裹即可，如以下所示 −

<React.StrictMode>
   <OurComplexComponent />
</React.StrictMode>

strict mode 的另一个功能是在应用中使用某些 legacy 或 deprecated API（这些 API 最终会在应用中引入 bug）时抛出错误或警告。

在本章中，我们将学习 strict mode component 突出显示的项目列表。

不安全的 lifecycle 使用

React 识别出一些 legacy lifecycle 事件在基于 async 的应用中不安全使用。它们如下 −

• componentWillMount

• componentWillReceiveProps

• componentWillUpdate

不安全意味着它会在应用中创建难以调试的 bug。React 将在库的未来版本中移除这些不安全的 lifecycle 事件。在此之前，当开发者使用 legacy 不安全的 lifecycle 事件时，会收到警报。

Legacy ref API 使用

React 早期版本使用基于字符串的 ref 管理，后来添加了基于 callback 的 ref 管理。推荐使用基于 callback 的方式，因为它更稳定且不易出错。如果我们使用基于字符串的方式，strict mode 会抛出警告。

React 的最新版本提供了改进的 ref 管理选项，既易于编码又不易出错。

Legacy findDOMNode 使用

findDOMNode 有助于给定 class 实例搜索 DOM 节点树。findDOMNode 的使用已被 deprecated，并推荐使用基于 ref 的 DOM 管理。

Side effects

React 有两个主要阶段：render 和 commit。render 阶段涉及大量工作且耗时，而 commit 阶段则简单快捷。React 引入了 concurrent mode，以提升 render 阶段的性能。concurrent mode 的一个要求是，用于 render 阶段的 lifecycle 事件不应包含 side effects。

React 将在开发阶段使用不同方法尝试发现意外的 side effects，并将其报告为警告。

Legacy context API

Legacy context API 容易出错，不推荐使用。它将在未来版本中被移除。在此之前，strict mode 将检测 legacy context API 的使用并报告。

Reusable state

具有 reusable state 的 component 可以多次 mount 和 destroy 而无 side effects，这有助于提升应用性能。React 库的未来版本将会在保留 state 的同时添加或移除 UI 部分。React 18 引入了 strict mode 功能，它会尝试 unmount 并 remount component，以确保 component 的弹性。在此阶段的任何问题都会被报告。