ReactJS - 严格模式
React 是基于组件、属性和状态的概念构建的。React 提供了一组相对较少的 API 来创建和更新组件。React 的基本功能足以满足我们大部分前端应用程序的需求。但是,现代应用程序仍然具有复杂的场景,需要高级前端逻辑。React 提供了许多高级 API,这将有助于我们创建复杂的前端应用程序。高级 API 是有代价的。高级 API 在我们的应用程序中学习和应用起来有点困难。
React 提供了一种严格模式,它通过突出显示应用程序开发阶段的潜在问题来帮助开发人员正确应用高级 API。众所周知,React 中的一切都是建立在组件概念之上的,严格模式只是一个非可视化组件,React.StrictMode。严格模式组件的使用也非常简单。只需用 React.StrictMode 组件包装要分析的组件,如下所示 −
<React.StrictMode> <OurComplexComponent /> </React.StrictMode>
严格模式的另一个功能是,当应用程序中使用某些遗留或弃用的 API(最终会在应用程序中引入错误)时抛出错误或警告。
让我们学习本章中严格模式组件突出显示的项目列表。
不安全的生命周期使用
React 确定一些遗留生命周期事件在基于异步的应用程序中不安全使用。它们如下 −
componentWillMount
componentWillReceiveProps
componentWillUpdate
不安全意味着它会在应用程序中创建难以调试的错误。React 最终将在库的未来版本中删除这些不安全的生命周期事件。在此之前,开发人员在使用旧版不安全生命周期事件时会收到警报。
旧版 ref API 用法
React 的早期版本使用基于字符串的 ref 管理,后来添加了基于回调的 ref 管理。建议使用基于回调的选项,因为它稳定且不易出错。如果我们使用基于字符串的选项,严格模式将发出警告。
React 的最新版本提供了改进的 ref 管理选项,它既易于编码又不易出错。
旧版 findDOMNode 用法
findDOMNode 有助于根据类实例搜索 DOM 节点树。 findDOMNode 的使用已弃用,并提倡使用基于 ref 的 DOM 管理。
副作用
React 有两个主要阶段,render 和 commit。render 阶段涉及大量工作且耗时,而 commit 阶段则简单快捷。React 引入了并发模式,这将提高 render 阶段的性能。并发模式的要求之一是 render 阶段中使用的生命周期事件不应包含副作用。
React 将在开发阶段尝试使用不同的方法查找意外的副作用并将其报告为警告。
旧版上下文 API
旧版上下文 API 容易出错,不建议使用。它将在未来版本中被删除。在此之前,严格模式将检测旧上下文 API 的使用情况并报告。
可重用状态
具有可重用状态的组件可以多次挂载和销毁,不会产生任何副作用,并有助于提高应用程序的性能。React 库的未来版本将在保留状态的同时添加或删除 UI 部分。React 18 引入了严格模式功能,它将尝试卸载并重新挂载组件以确保组件具有弹性。此阶段的任何问题都将被报告。