react组件:strictmode

news/2024/5/14 17:42:36

帮助你在开发过程中尽早地发现组件中的常见错误。

**
严格模式启用了以下仅在开发环境下有效的行为:

组件将 重新渲染一次,以查找由于非纯渲染而引起的错误。
组件将 重新运行 Effect 一次,以查找由于缺少 Effect 清理而引起的错误。
组件将被 检查是否使用了已弃用的 API。

StrictMode 不接受任何参数。

在由 包裹的树中,无法选择退出严格模式。这可以确保在 内的所有组件都经过检查。如果两个团队在一个产品上工作,并且对于这些检查是否有价值存在分歧,他们需要达成共识或将 下移到树的较低层级。
**

为整个应用启用严格模式

**
如果要为整个应用启用严格模式,请在渲染根组件时使用 包裹它:

import { StrictMode } from ‘react’;
import { createRoot } from ‘react-dom/client’;

const root = createRoot(document.getElementById(‘root’));
root.render(



);
**

为应用程序的一部分启用严格模式

**
import { StrictMode } from ‘react’;

function App() {
return (
<>









</>
);
}

在这个例子中,严格模式的检查不会对 Header 和 Footer 组件运行。然而,它们会在 Sidebar 和 Content 以及它们内部的所有组件上运行,无论多深。
**

修复在开发过程中通过双重渲染发现的错误

**
React 假设编写的每个组件都是纯函数。这意味着编写的 React 组件在给定相同的输入(props、state 和 context)时必须始终返回相同的 JSX。

违反此规则的组件会表现得不可预测,并引发错误。为了帮助你找到意外的非纯函数代码,严格模式 在开发环境中会调用一些函数两次(仅限应为纯函数的函数)。这些函数包括:

组件函数体(仅限顶层逻辑,不包括事件处理程序内的代码)
传递给 useState、set 函数、useMemo 或 useReducer 的函数。
部分类组件的方法,例如 constructor、render、shouldComponentUpdate 等(请参阅完整列表)。
如果一个函数是纯函数,运行两次不会改变其行为,因为纯函数每次都会产生相同的结果。然而,如果一个函数是非纯函数(例如,它会修改接收到的数据),运行两次通常会产生明显的差异(这就是它是非纯函数的原因!)。这有助于及早发现并修复错误。
**

修复在开发中通过重新运行 Effect 发现的错误

**
每个 Effect 都有一些 setup 和可能的 cleanup 函数。通常情况下,当组件挂载时,React 会调用 setup 代码;当组件卸载时,React 会调用 cleanup 代码。如果依赖关系在上一次渲染之后发生了变化,React 将再次调用 setup 代码和 cleanup 代码。

当开启严格模式时,React 还会在开发模式下为每个 Effect 额外运行一次 setup 和 cleanup 函数。这可能会让人感到惊讶,但它有助于发现手动难以捕捉到的细微错误。
**

修复严格模式发出的弃用警告

**
React 会在任何一个位于 树中的组件使用以下弃用 API 时发出警告:

findDOMNode,请参考替代方案。
UNSAFE_ 类生命周期方法,例如 UNSAFE_componentWillMount,请参考替代方案。
旧版上下文(childContextTypes、contextTypes 和 getChildContext),请参考替代方案。
旧版字符串引用(this.refs),请参考替代方案。
这些 API 主要用于旧版的 类式组件,因此在新版程序中很少出现。
**

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.tangninghui.cn.cn/item-12730.htm

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

豆瓣9.7,这部Java神作第3版重磅上市!

Java 程序员们开年就有重磅好消息&#xff0c;《Effective Java 中文版&#xff08;原书第 3 版&#xff09;》要上市啦&#xff01; 该书的第1版出版于 2001 年&#xff0c;当时就在业界流传开来&#xff0c;受到广泛赞誉。时至今日&#xff0c;已热销近20年&#xff0c;本书…

uniapp选择退出到指定页面

方法一&#xff1a;返回上n层页面 onUnload(){uni.navigateBack({delta:5,//返回上5层})},方法二&#xff1a;关闭当前页面&#xff0c;跳转到应用内的某个页面。 uni.redirectTo({url: "../home/index"//页面地址}) 方法三&#xff1a;关闭所有页面&#xff0c;打…

OpenHarmony实战:轻量级系统之启动恢复子系统移植

启动恢复子系统负责在内核启动之后到应用启动之前的系统关键进程和服务的启动过程的功能。 移植指导 针对轻量系统主要提供了各服务和功能的启动入口标识。在SAMGR启动时&#xff0c;会调用bootstrap标识的入口函数&#xff0c;并启动系统服务。 适配完成后&#xff0c;调用…

深度学习学习日记4.7

1.梯度下降 w 新 w旧 - 学习率梯度 训练的目的就是让 loss 减小 2.前向传播进行预测&#xff0c; 反向传播进行训练(每一个参数通过梯度下降进行更新参数)&#xff0c;(1前向传播 2求 loss 3反向传播 4梯度更新) 能够让损失下降的参数&#xff0c;就是更好的参数。 损失…

分布式链路追踪与云原生可观测性

分布式链路追踪系统历史 Dapper, a Large-Scale Distributed Systems Tracing Infrastructure - Google Dapper&#xff0c;大规模分布式系统的跟踪系统大规模分布式系统的跟踪系统&#xff1a;Dapper设计给我们的启示 阿里巴巴鹰眼技术解密 - 周小帆京东云分布式链路追踪在金…

【Docker】搭建一键更新容器工具 - OneKey

【Docker】搭建一键更新容器工具 - OneKey 前言 本教程基于绿联的NAS设备DX4600 Pro的docker功能进行搭建。 简介 一键更新容器工具&#xff0c;保留容器配置的情况下更新容器所使用的镜像&#xff0c;现在已经支持所有平台。 部署 打开“开启远程调试功能”&#xff0c;通…