react组件:strictmode

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

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

组件将 重新渲染一次,以查找由于非纯渲染而引起的错误。
组件将 重新运行 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.mzph.cn/news/794379.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文笔记:UNDERSTANDING PROMPT ENGINEERINGMAY NOT REQUIRE RETHINKING GENERALIZATION

ICLR 2024 reviewer评分 6888 1 intro zero-shot prompt 在视觉-语言模型中&#xff0c;已经取得了令人印象深刻的表现 这一成功呈现出一个看似令人惊讶的观察&#xff1a;这些方法相对不太受过拟合的影响 即当一个提示被手动工程化以在给定训练集上达到低错误率时&#xff0…

Unity3D 编辑器扩展与框架工具合成详解

前言 Unity3D的编辑器扩展和框架工具则是为了进一步提高开发效率和扩展性而设计的。本文将详细介绍Unity3D的编辑器扩展与框架工具的合成&#xff0c;包括技术详解和代码实现。 对惹&#xff0c;这里有一个游戏开发交流小组&#xff0c;希望大家可以点击进来一起交流一下开发…

学习心得1

这时我第一次更学习心得&#xff01;不足的在评论区指教。 首先先来分享一下&#xff0c;刷一维数组题目的方法。 仔细读题&#xff0c;不会做的题目先完成输入输出。不要干等着着急&#xff0c;就跳到下一题。如果使用的时oj&#xff0c;那就没有题解但是使用洛谷、LeetCood…

Prometheus+grafana监控nacos和spring-boot服务(增加自定义指标)(七)

前面记录了项目中常用的各种中间件的指标采集器的用法及搭建方式 &#xff0c; 由于所有组件写一篇幅过长&#xff0c;所以每个组件分一篇方便查看&#xff0c;前六篇链接如下 Prometheusgrafana环境搭建方法及流程两种方式(docker和源码包)(一)-CSDN博客 Prometheusgrafana…

LeetCode - 边积分最高的节点

2374. 边积分最高的节点 这是一个有向图&#xff0c;且每个节点都只有一条出边&#xff0c;指向0的边有1&#xff0c;2&#xff0c;3&#xff0c;4 10&#xff0c; 指向7的有5&#xff0c;6 11. 我们只需要一次遍历就可以解决&#xff0c;先搞一张哈希表&#xff0c;k存节点…

解决VScode中matplotlib图像中文显示问题

一、更改配置文件 参考这个文件路径找到自己Python环境下的matplotlibrc文件并用记事本打开。 用ctrl F寻找下面的这两行并将前面的#删除&#xff0c;保存并退出。 font.family: sans-serif font.serif: DejaVu Serif, Bitstream Vera Serif, Computer Modern Roman, N…

Day31|贪心算法part01:理论基础、455.分发饼干、376. 摆动序列、53. 最大子序和

理论基础 记得贪心没有规律即可&#xff01;解不出来就看题解。 455. 分发饼干 先把学生和饼干都排序&#xff08;Arrays.sort只能升序&#xff09;&#xff0c;然后都从后往前遍历&#xff0c;把最大的饼干给需求最大的孩子&#xff08;贪心&#xff09; class Solution {…

计算机提示msvcp120.dll怎么解决,7种详细有效修复方法分享

在Windows操作系统的庞大舞台上&#xff0c;每一个组件都扮演着其独特的角色。在这些不为人知的角色中&#xff0c;有一个名为msvcp120.dll的文件&#xff0c;它是Visual C运行时库的一部分&#xff0c;对于确保许多应用程序的正常运行至关重要。本文将深入探讨msvcp120.dll文件…

【项目实战】——商品管理的制作完整代码

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

逐步学习Go-WaitGroup【连字都懒得写了,直接Show my Code】

package waitgroup_testimport ("fmt""runtime""sync""testing""time""github.com/stretchr/testify/assert" )// 这是对Go语标准库中sync包下的WaitGroup的描述。// WaitGroup用于等待一组并发的goroutine结结束…

安卓APP的技术质量:如何提高

安卓APP的技术质量:如何提高 技术质量包括稳定性和性能,还有资源工具化程序.你的APP 的技术质量能够影响你的用户体验.一个高质量的体验不仅 最小化了技术问题的存在,而且也最大化地利用了安卓操作 系统和设备硬件的能力. 为了构建一个高质量的APP,遵循如下的指导原则: 形式因…

重新排序(贪心+差分)

题目 给定一个数组 A 和一些查询 Li,Ri&#xff0c;求数组中第 Li 至第 Ri 个元素之和。 小蓝觉得这个问题很无聊&#xff0c;于是他想重新排列一下数组&#xff0c;使得最终每个查询结果的和尽可能地大。 小蓝想知道相比原数组&#xff0c;所有查询结果的总和最多可以增加多…

非关系型数据库-----------探索 Redis高可用 、持久化、性能管理

目录 一、Redis 高可用 1.1什么是高可用 1.2Redis的高可用技术 二、 Redis 持久化 2.1持久化的功能 2.2Redis 提供两种方式进行持久化 三、Redis 持久化之----------RDB 3.1触发条件 3.1.1手动触发 3.1.2自动触发 3.1.3其他自动触发机制 3.2执行流程 3.3启动时加载…

在深度学习模型中引入先验

当面对复杂问题的时候&#xff0c;在深度学习模型提取特征的过程中完全抛弃知识是非常不明智的策略。虽然有很多研究者在深度网络处理数据之前&#xff0c;利用具有某种知识的模型驱动方法对数据进行预处理&#xff0c;但是这种方法没有进行实质性地改造深度网络&#xff0c;且…

ms-前端八股文

1、暂时性死区 是指在 JavaScript 中使用 let 或 const 声明变量时&#xff0c;变量在其声明之前不能被访问或使用的特性。 var可以变量提升&#xff08;在 JavaScript 中&#xff0c;变量声明提升是指在执行代码之前&#xff0c;变量声明会被提升到作用域的顶部。&#xff0…

scRAN-seq|加权最近邻分析(1)

概述 本文[1]介绍了Seurat 5.0.0中的加权最近邻&#xff08;WNN&#xff09;分析方法&#xff0c;这是一种用于整合和分析多模态单细胞数据的无监督框架。 简介 多模态分析作为单细胞基因组学的一个新兴领域&#xff0c;它通过同时测量多种数据类型来精确描绘细胞状态&#xff…

idea的后端环境配置

首先&#xff0c;在你刚打开idea时红色箭头所指的是你进行配置的地方&#xff0c;接下来我把具体步骤说一下 1&#xff0c;直接点击箭头所指的地方就会出现如图界面&#xff0c;然后点击Tomcat server,使其展开点击第一个 第二步取消勾选&#xff0c;第三步选择bin的上一级然后…

C++ | Leetcode C++题解之第10题正则表达式匹配

题目&#xff1a; 题解&#xff1a; class Solution { public:bool isMatch(string s, string p) {int m s.size();int n p.size();auto matches [&](int i, int j) {if (i 0) {return false;}if (p[j - 1] .) {return true;}return s[i - 1] p[j - 1];};vector<…

网络工程师练习题(9)

网络工程师练习题 固态硬盘的存储介质是内存。虚拟存储技术把内存与外存有机地结合起来使用&#xff0c;从而得到一个更大容量的“内存”。下列接口协议中&#xff0c;不属于硬盘接口协议的是SPI。当进程所请求的资源得到满足&#xff0c;进程的状态从阻塞态变为就绪态。下列操…

2023年第15届12月STEMA

2023年第15届12月STEMA 一、选择题1. 定义字符串 string a “Hello C”&#xff0c;下列选项可以获取到字符 ‘C’ 的是&#xff08; &#xff09;。2. 下列选项中数值与其它项不同的是&#xff08; &#xff09;。3. 定义变量 int i 0, a&#xff0c;执行表达式 a --i 后&a…