react-严格模式

最新推荐文章于 2024-04-05 08:53:58 发布
最新推荐文章于 2024-04-05 08:53:58 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuey0809/article/details/126177570
版权

严格模式
StrictMode(React.StrictMode),本质是一个组件,该组件不会进行UI渲染,它的作用是在渲染内部组件时,发现不合适的代码

  • 识别不安全的生命周期 (比如旧版生命周期被淘汰的componentWillMount)
  • 使用过时字符串refAPI的警告
  • 使用废弃的findDOMNode方法的警告
  • 检测意外的副作用(除了函数副作用的三点还有改变参数值和调用setState)
  • 检测过时的context API (比如 childContextTypes)

严格模式无法自动检测出具有副作用的代码,因此
在严格模式下(开发阶段),组件的生命周期会被调用两次,以此来明显化副作用代码

注意: 在React17中,React会自动修改console.log方法,在第二次调用生命周期函数时,将会静默输出
在React18中,React将不会抑制任何日志,如果你安装了devtools,第二次输入将会被淡化,在devtools工具中可以屏蔽第二次输出
还要注意一下,由于componentDidMount等函数会被放入执行队列,所以就算关闭了第二次输出,函数里面的打印在严格模式下还是会输出两次

合法的咸鱼
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
[react] React的严格模式有什么用处？
歌谣的博客
11-13 1462
[react] React的严格模式有什么用处？ react的strictMode 是一个突出显示应用程序中潜在问题的工具，与Fragment一样，strictMode 不会渲染任何的可见UI，它为其后代元素触发额外的检查和警告。 注意：严格模式仅在开发模式下运行，它们不会影响生产构建 可以为程序的任何部分使用严格模式 import React from 'react'; function ExampleApplication() { return ( <div>
react-ts-component-library:React严格类型的组件库
04-08
介绍 这是一个用Typescript编写的React组件库。 使用Storybook可以方便地使用库的UI。 组件以易于提取的方式构建。... 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且
React本地开发时，组件为啥会渲染两次
qq_42931285的博客
01-07 1487
React本地开发时，组件为啥会渲染两次
React严格模式-React.StrictMode
weixin_41301816的博客
10-10 2982
React严格模式-React.StrictMode 严格模式（Reatc.StrictMode） StrictMode是一个用以标记出应用中潜在问题的工具。就是Fragment，StrictMode不会渲染任何真是的UI。它为其后代元素触发额外的检查的警告 注：严格模式检查只在开发模式下运行，不会与生产模式冲突 可以在代码的任何地方启用严格模式。例如： // 入口文件 React.render( <React.StrictMode> <App />
react内置组件之＜StrictMode＞＜/StrictMode＞
weixin_48633811的博客
12-11 860
组件时，React 会记录哪些生命周期方法已经废弃，以及哪些方法可能会导致副作用。它还会检测不安全的生命周期方法，并在控制台输出相关警告。组件包裹应用程序或组件可以启用一些额外的检查和警告。它可以帮助你捕获可能的错误、发现过时的 API 和行为，并提醒你进行一些潜在的优化。组件会对应用程序的性能产生一些额外的开销，因此不建议在生产环境中使用。在发布应用程序之前，请务必将。是 React 提供的一个组件，用于帮助开发者在开发过程中检测潜在的问题，并修复一些常见的警告。组件来帮助你识别潜在问题并进行调试。
react组件:strictmode
最新发布
qq_36413371的博客
04-05 1005
如果一个函数是纯函数，运行两次不会改变其行为，因为纯函数每次都会产生相同的结果。然而，如果一个函数是非纯函数（例如，它会修改接收到的数据），运行两次通常会产生明显的差异（这就是它是非纯函数的原因！在这个例子中，严格模式的检查不会对 Header 和 Footer 组件运行。这意味着编写的 React 组件在给定相同的输入（props、state 和 context）时必须始终返回相同的 JSX。为了帮助你找到意外的非纯函数代码，严格模式 在开发环境中会调用一些函数两次（仅限应为纯函数的函数）。
React中StrictMode严格模式，导致开发环境，接口会请求两次或多次（ useEffect 请求多次）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
11-20 4843
我在首页 useEffect里 请求一个接口，整个页面就在这里请求这一次接口。但 实际上请求了两次。我检查了代码，确定只调用了一次，且我这个页面就是父组件。也就是说，你也可以 不做处理，如果你觉得开发环境请求两次不能接受，可以注释掉 index.js或者 App.js里的严格模式注释掉。我在用 create-react-app时，开发环境，一进页面接口会请求两次或多次。
react-states-machine:使用有限状态机进行状态管理
05-02
React状态机 受启发，该模块使用众所周知的模式，通过将状态管理与组件严格分开来缓解复杂的React应用程序中出现的一些问题。 这个模块忠实于React的初衷： 仅将状态描述为静态组件（组件内的动态关系在组件本身之外...
React-Strict-TS-Eslint-Prettier-Husky-Starter
04-29
React严格的TS Eslint漂亮的Husky Starter资料夹结构组件：将所有组件放置在此处。 每个都在自己的文件夹中。 子级组件属于其父文件夹，除非它们被另一个组件使用。 从index.ts文件导出。 常量：您在应用程序上可能...
web前端react框架
02-20
是前端很火的框架，包含jsx使用规则，严格模式<React.StrictMode>，函数组件，类组件的区别，super是否添加参数问题，setState进行异步修改状态，以及状态提升，类组件生命周期（废弃掉的），组件之间的优化，受控和...
eslint-config-alchemy:eslint配置
05-16
严格模式 代码风格 变量声明 React 规则 import JSX 使用 package.json 中添加依赖： "eslint": "^4.2.0", "eslint-config-alchemy": "latest", "eslint-plugin-import": "^2.7.0", "eslint-plugin-jsx-a11y": "^...
《十一》严格模式 React.StrictMode
花铛
03-29 479
严格模式可以为其后代元素触发额外的检查和警告，仅在开发模式下运行，不会影响生产构建。本质上也是一个组件，自身不会渲染成任何可见的 UI。
前端精髓-React
hulovelove的博客
09-04 268
具体实现:创建一个空的vue并暴露出去，这个作为公共的bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus，在组件A中通过bus.e m i t （’自定义事件名’，要发送的值）发送数据，在组件 B 中通过 b u s . emit（’自定义事件名’，要发送的值）发送数据，在组件B中通过bus.emit（’自定义事件名’，要发送的值）发送数据，在组件B中通过bus.on（‘自定义事件名‘,function(v) { //v即为要接收的值 }）接收数据。
react 严格模式（控制台调用两次问题）
qg2276879379的博客
08-12 2358
前言：由于用脚手架创建项目，默认会自动启用严格模式，所以你会发现双调用现象 严格模式(Strict Mode) StrictMode 是一个用以标记出应用中潜在问题的工具。就像 Fragment ，StrictMode 不会渲染任何真实的UI。它为其后代元素触发额外的检查和警告。 注意:严格模式检查只在开发模式下运行，不会与生产模式冲突。\color{#FF3030}{注意: 严格模式检查只在开发模式下运行，不会与生产 模式冲突。}注意:严格模式检查只在开发模式下运行，不会与生产模式冲突。 impo
React介绍
weixin_48294709的博客
05-29 1051
react起源于Facebook的内部项目，在13年5月开源。react不是一个完整的MVC框架，最多可以认为是MVC中的V（view），react并不认可MVC开发模式。可以理解为，react将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了页面。 react特性 声明式设计 虚拟dom，最大程度减少直接与dom的交互 JSX 是js的扩展 组件化 使得代码更容易复用 单向响应式的数据流 虚拟dom ......
React Hook基操， 引入第三方组件库 antDesign，路由，组件通信
ada的博客
08-18 684
React Hook基操， 引入第三方组件库 antDesign，路由，组件通信
StrictMode使用详解
weixin_34050427的博客
03-09 249
StrictMode StrictMode最常用来捕捉应用程序的主线程，它将报告与线程及虚拟机相关的策略违例。一旦检测到策略违例（policy violation），你将获得警告，其包含了一个栈trace显示你的应用在何处发生违例。除了主线程，我们还可以在Handler，AsyncTask，AsyncQueryHandler，Intent...
React-native运行异常之一一SyntaxError:Strict mode does not allow function declaration in a lexically nested
Xavier
12-11 6464
在执行React-Native Run-Android(or ios)后，程序跑在设备上，在成功连接pc的情况下，Relode以后，出现红屏，并报以下错误： SyntaxError:Strict mode does not allow function declaration in a lexically nested statement. 这是FaceBook官方目前的一
react 严格模式
07-28
React的严格模式是一种开发模式，旨在帮助开发者发现并解决一些潜在的问题和错误。当应用程序处于严格模式下时，React会进行额外的检查和警告，以确保代码的质量和性能。 启用React严格模式的方法很简单，只需在应用程序的根组件中添加一个特殊的标志即可。例如，在应用程序的入口文件中，可以这样写： ```jsx import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); ``` 一旦启用了严格模式，React将会在开发过程中执行一些额外的检查，包括： 1. 检测过时的生命周期方法：React会在控制台中给出警告，以便你及时更新和替换这些方法。 2. 检测不安全的生命周期方法使用：React会在控制台中给出警告，以提醒你避免使用这些不安全的方法。 3. 检测意外的副作用：React会检测并警告可能导致意外副作用的代码。 4. 检测过时的context API使用：React会在控制台中给出警告，以鼓励你使用新的context API。 请注意，严格模式只在开发环境中生效，生产环境中不会有额外的检查和警告。因此，你可以在开发期间使用严格模式来提高代码质量和性能，而不必担心对生产环境造成任何负面影响。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

合法的咸鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值