如何停止重新渲染组件(React-redux )？
在React-redux中，要停止重新渲染组件，可以采取以下几种方法：
- 使用shouldComponentUpdate生命周期方法：在组件中重写shouldComponentUpdate方法，通过比较新旧props和state的值，决定是否重新渲染组件。如果新旧值相同，则返回false，阻止重新渲染。
- 使用React.memo高阶组件：使用React.memo包裹组件，它会对组件的props进行浅比较，如果props没有发生变化，则阻止重新渲染。
- 使用React.PureComponent：继承React.PureComponent而不是React.Component来创建组件。React.PureComponent会自动进行浅比较，如果props和state没有发生变化，则阻止重新渲染。
- 使用React-Redux的connect函数的第二个参数：在connect函数中，可以传入一个函数，该函数接收两个参数，分别是state和ownProps。通过在该函数中判断state和ownProps的值，返回一个布尔值，来决定是否重新渲染组件。
以上是停止重新渲染组件的几种常用方法，根据具体情况选择合适的方法来优化组件的性能。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器CVM：https://cloud.tencent.com/product/cvm
- 云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
- 云存储COS：https://cloud.tencent.com/product/cos
- 人工智能AI：https://cloud.tencent.com/product/ai
- 云原生容器服务TKE：https://cloud.tencent.com/product/tke
- 云安全中心：https://cloud.tencent.com/product/ssc
- 云音视频处理：https://cloud.tencent.com/product/mps
- 物联网平台IoT Hub：https://cloud.tencent.com/product/iothub
- 区块链服务：https://cloud.tencent.com/product/baas
- 元宇宙：https://cloud.tencent.com/product/vr
相关·内容
我使用了react-router-redux并嵌套了connect()组件。这似乎工作得很好，除了我的嵌套组件会在状态改变时重新呈现。Probs: Root有5个子组件:如果任何一个子组件中有任何状态变化，所有组件都会重新呈现，因为所有组件都是connect()。
如何才能仅渲染所需的子项？
浏览 4提问于2017-12-11得票数 0
1回答
App组件的代码 import React, { useEffect } from 'react' {isOpen && <ModalContainer />} )
export default App 在这一行中，如果我刷新页面，我只会得到一次停止重新渲
浏览 26提问于2020-08-25得票数 1
回答已采纳
", store.textTwo);};
如果我使用上面的mapStateToProps函数来connect react-redux的方法，并更新状态，它将console.log更改mapStateToProps函数，但不会重新呈现组件，甚至不会出现componentWillReceiveProps钩子。但是，当我添加spread operator，即修改mapStateToProps返回数据时，它将重新呈现完整的组件。mapStateToP
浏览 15提问于2020-02-17得票数 0
React 16.7有状态钩子，所以我不再需要react-redux了，对吗？
浏览 1提问于2018-11-05得票数 0
)的要点是：import { bindActionCreators } from 'redux'; return connect(mapStateToProps, mapDispatchToProps)(component);所以，这里有一个问题:模拟一个组件(一个可以访问提供者的组件)的最好方法是什么，这样我就可以对这个笨蛋进行单元测试，让
浏览 0提问于2016-05-11得票数 0
2回答
flux让我困扰的部分是，每个用户操作都需要整个视图模型的重新渲染，然后再与DOM进行协调。因此，在数百个条目中切换一点会触发相当多的返工，重新生成数百个没有更改的其他条目，以适应一个条目上的更改。我知道React使用键来优化视图模型如何与DOM进行协调，但即使进行了这种优化，整个视图模型也会在任何操作中完全重新生成。如果消息路由和DOM协调更好，我看不出为什么不能显示数千个项目的列表。我的方法使用了一个版本的memoization，它从先前的渲染中缓存视图模型。我对学习别人的创新很感兴
浏览 1提问于2016-12-11得票数 1
1回答
在更新嵌套对象时，我看到它的同级组件的render方法也在被调用。 </div>}
MainContainer.jsx
import {connect} from 'react-redux我的理解是，当我更新ExpectedSalary subobject时，react足够智能，可以<em
浏览 26提问于2019-10-29得票数 0
我有这个组件树： Son Daughter Modal
每次Modal打开(通过设置this.setState({ openSimpleModal: true });)或关闭(将状态设置为false)时，组件的子组件、子组件及其子组件都会重新渲染到。有没有一种方法可以打开和关闭Modal，但不允许重新渲染1个特定的组
浏览 3提问于2019-12-13得票数 0
1回答
我的页面上的数据是在浏览器中呈现的Gridsome组件上重新生成的，它已经在SSR中预先生成。
如何停止客户端Vue组件渲染？
浏览 7提问于2020-12-26得票数 1
我有一个包含多个组件的web应用程序，其中两个是过滤器栏和过滤器显示。我们必须对筛选栏做一些主要的重构，并将其从类组件更改为带有钩子的功能组件，我还必须包含一些forceUpdate代码以使筛选栏实际显示所选的筛选器值(例如，单击筛选栏上的筛选选择将更改仪表板显示，但不会更改筛选栏本身过滤器显示组件是一个简单的展开面板，默认情况下是打开的，并显示当前处于活动状态的过滤器。以前，它会在filterbar中的值发生变化时自动更新，但由于我重写了filterbar，只有当我关闭并重新打开扩展面板时，它才会更新。
浏览 0提问于2020-03-25得票数 0
到目前为止，我注意到每当我将鼠标悬停在Openlayers地图上时，地图所在的Angular组件都会被重新渲染。为此，我创建了一个存储库来演示这一点：。在这个例子中，我在html中添加了一个方法，它将在运行时记录下来，从而给出了一个angu
浏览 15提问于2020-02-08得票数 0
回答已采纳
我们有一个组件需要访问Redux的存储。import React from 'react' ... code ...我们已经使用connect将此组件连接到存储。const mapStateToProps = state => ({ ...state })
为什么这是一种可以接受的将数据注入组件的方法？这会使这个组
浏览 1提问于2019-06-18得票数 7
我正在遵循官方文档中的redux计数器教程，但我的应用程序状态似乎没有更新。更清楚地说，应用程序本质上是一个计数器，带有一个递增按钮和一个递减按钮，它在屏幕上显示当前值。import React, { Component } from 'react';
switch(action.type) {
c
浏览 2提问于2018-02-10得票数 0
2回答
我想知道如何在React中管理复杂的状态，限制那些内容没有改变的组件的渲染调用的数量。我有简单的连接到redux存储容器组件与“项目”道具(这是数组)。这会导致重新渲染。(我在React Dev Tools中找到了它，它突出显示了更新的组件)
我是否应该担心这种不必要的重新渲染？处理它的最好方法是什么？我已经发现新的React.memo hoc停止重新渲染，但这是一个
浏览 39提问于2019-06-18得票数 4
1回答
在这个应用程序上，我渲染了10个表。当用户对表进行更改时，我只希望重新呈现一个表，而不是所有10个表。 为了完成这项任务，我使用了具有比较器功能的React.useMemo()。所以只有一个表应该重新呈现，而不是所有10个表都应该重新呈现？不对。这是我的火焰图： ? 我的表组件的名称是CategoryTable。正如您所看到的，备忘录( CategoryTable )是灰色的，但随后的CategoryTable是绿色的，并且会像它的所有子对象一样进行渲染。我已经通过在Category
浏览 22提问于2020-01-20得票数 2
1回答
在categories组件中，我呈现了每个类别的随机图像。我还为每个图像添加了一个onClick事件。我得到的问题是，每次我单击一个随机类别的图像时，DOM将重新呈现，并且新的随机图像将出现在DOM上。如何防止这种重新渲染？下面是我的代码。
浏览 17提问于2021-01-30得票数 0
回答已采纳
在我的小用例中，我遇到了一个问题，混合这些技术会导致双重重新渲染。 首先，当redux分派被执行时，一些组件通过useSelector使用属性。然后，在功能组件已经被重新呈现之后，将应用一个useEffect钩子来更新某些属性的状态。此更新将再次重新触发渲染。 例如，在我的例子中，下面的控制台日志打印了两次。import {useSelector} from "react-redux";
import React from &quo
浏览 9提问于2020-08-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
