react组件在render里面打印会打印两次的问题

最新推荐文章于 2024-06-11 17:14:57 发布
最新推荐文章于 2024-06-11 17:14:57 发布
阅读量1.7k 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49847397/article/details/125876209
版权

前端 javascript 开发语言 前端框架

今天在使用的时候发现如果在rendre里面打印，老是会打印两次，如下图：

后来在网上找答案发现是因为我是直接通过create-react-app模式创建的，默认就是StrictMode下。StrticMode默认会执行两次render，来检测你的render函数有没有副作用。

 只需要删除React.StrictMode即可，此时打印一次

 

Ang321
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 高阶组件入门介绍
08-28
* 不要在 render 函数中使用高阶组件，因为每一次render函数调用都会创建一个新的EnhancedComponent实例。 * 需要将静态方法做拷贝，以避免在重新挂载组件时丢失静态方法。 高阶组件是一种强大的工具，可以帮助我们...
react.js 父子组件数据绑定实时通讯的示例代码
10-19
而是会在组件的下一个更新周期中更新。如果需要在状态更新后执行某些操作，可以提供一个回调函数给`setState`，这个回调会在状态更新并完成重新渲染后执行。 总结起来，React.js中父子组件的实时通讯是通过props来...
【React】解决react执行两遍的问题
weixin_45289656的博客
01-04 1595
【代码】【React】解决react执行两遍的问题。
React的render函数执行了两次
dreamer_sen的博客
10-30 3262
假设没有更新state或者props，render函数又执行了两次，很有可能是哪个地方用了React.StrictMode 具体是因为：https://reactjs.org/docs/strict-mode.html
react 中出现了代码执行多次（例如，console.log 输出了两次）
最新发布
SailingCoder的博客
06-11 948
如果你有自定义的 Webpack 配置，可以直接在。
react 点击两次_为什么React 点击一次按钮，render执行两次？
weixin_39775872的博客
12-19 1903
class App extends React.Component {constructor(props) {super(props);this.state = {message: 'click button',};this.handleClick = this.handleClick.bind(this);}handleClick() {console.log('Click happen');t...
react 的函数组件每次渲染执行两次
qq_33715850的博客
07-07 3358
react 的函数组件每次渲染执行两次
react render渲染两次，一次为原始state的数据，一次为新获取的数据
weixin_34211761的博客
05-13 5337
在项目中遇到一个问题，componentDidMount在dispath action之后，render渲染state的数据时会渲染两次，一次是原始state，一次是新获取的state，如下图这是因为react渲染机制造成组建挂载之前，也就是componentDidMount生命周期之前自动获取了原始的state数据，componentDi...
React初始化加载组件会渲染两次的问题
weixin_52020362的博客
10-19 1870
react初始化加载出现渲染两次的问题
浅谈react受控组件与非受控组件(小结)
11-26
这是因为在React中，`defaultValue`只会在组件首次渲染时设置一次，之后的值改变不会受到影响。如果想要动态更新输入框的值，应该使用受控组件的方式，通过`value`和`onChange`来控制输入框的状态。 总的来说，受控...
react-reactdesktopmacOSSierra和Windows10的ReactUI组件
08-14
2. **引入组件**: 在你的React组件中，导入你需要的React Desktop组件，例如`import { Button } from 'react-desktop/macOS/Buttons'`。 3. **使用组件**: 将组件插入到你的jsx代码中，赋予相应的属性和样式，如`...
【JavaScript源代码】React antd tabs切换造成子组件重复刷新.docx
12-29
在使用React结合Ant Design框架开发Web应用程序时，可能会遇到一个常见问题：当使用`Tabs`组件时，频繁地在不同的`TabPane`之间进行切换会导致每个`TabPane`中的子组件被重复渲染。这一现象不仅可能导致性能下降，还...
笔记：React 为什么每次都会渲染两次？
sky8880的博客
12-11 399
React 为什么每次都会渲染两次？
React setState执行两次的问题
量子前端的博客
06-02 2559
在做组件库的过程中，测试项目引入线上组件发现状态的修改执行了两次，而组件项目中只执行一次（正常），分析原因后发现组件项目未开启严格模式，而测试项目开启了严格模式，代码如下： 解决方案有两种： 1.关闭严格模式 2.深拷贝需要修改的状态变量 最后贴一下官方的解释：...
【React】- 组件生命周期连续渲染两次问题
HVENLY的博客
07-13 1981
最近在整理生命周期相关的知识内容，然后发现一个奇怪的现象，即组件的生命周期会运行2次！经过确认不是代码问题，于是开始找度娘，终于找到其原因-React中的严格模式，在这里记录一下
DevTools console打印的对象，展开之后与展开之前不一致问题
nsd130的博客
03-07 2727
在使用React设置state的时候，第一次遇到了打印一个对象，在console中展开之前与展开之后存在不一样的情况，在咨询了一些前辈之后才知道，问题的所在是因为，console打印的只是对象在初始时候的快照，等到setState之后，已经改变了对象的。所以问题的根源是两个： 1、react中setState是一个异步方法； 2、对象的引用不是复制，是指向同一个对...
react setState调用为什么会触发整个组件函数的重新运行
小漠007的专栏
01-07 624
这里的index申明是否可以省略呢，其实也可以，但是这样就得手动给App函数添加index属性，Function是Object的实现，所以它也可以有自己的属性。上面代码里面的index每次调用的时候都会递增，那setState调用时候会触发App的调用那index不是还是会继续递增么？setAge执行会导致App函数重新执行，但是age还是保存之前的结果！然后setState的执行会触发执行它的函数的重新运行，这个怎么写呢？这样无法做到index和我们useState的调用顺序保持一致！
为什么 react+ electron 组件渲染两次
06-10
在使用 React + Electron 进行开发时，组件渲染两次的原因和纯 Electron 开发中的原因一样，也是由于 Electron 采用了 Chromium 的多进程架构。在 React 的生命周期中，组件的 render 方法会在组件状态或属性发生变化时被调用，因此在 Electron 中渲染 React 组件时，同样会触发两次 render 过程。具体来说，当 React 组件在渲染进程中被创建时，会被发送到浏览器进程进行渲染，并将渲染结果返回到渲染进程进行显示，这个过程会触发第一次 render；当组件状态或属性发生变化时，React 会再次调用 render 方法重新渲染组件，这个过程会触发第二次 render。因此，在 React + Electron 中，组件渲染两次是正常的行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值