如何防止重新渲染react-redux
防止重新渲染react-redux的方法是使用React.memo()和useMemo()来优化组件的渲染。
React.memo()是一个高阶组件，可以将组件包裹起来，使其在传入的props不变的情况下避免不必要的重新渲染。当组件的props没有发生变化时，React.memo()会使用之前的渲染结果，从而提高性能。
例如，如果有一个使用react-redux连接store的组件：
import React from 'react';
import { connect } from 'react-redux';
const MyComponent = ({ data }) => {
// 组件的渲染逻辑
};
const mapStateToProps = (state) => ({
data: state.data,
});
export default connect(mapStateToProps)(MyComponent);可以使用React.memo()对该组件进行优化：
import React from 'react';
import { connect } from 'react-redux';
const MyComponent = React.memo(({ data }) => {
// 组件的渲染逻辑
});
const mapStateToProps = (state) => ({
data: state.data,
});
export default connect(mapStateToProps)(MyComponent);另外，可以使用useMemo()来优化组件内部的计算逻辑。useMemo()会根据依赖项的变化来决定是否重新计算某个值，并将计算结果缓存起来。
例如，在组件内部需要根据props中的某个值计算一个派生值：
import React from 'react';
import { connect } from 'react-redux';
const MyComponent = ({ data }) => {
const derivedValue = calculateDerivedValue(data);
// 组件的渲染逻辑
};
const calculateDerivedValue = (data) => {
// 计算派生值的逻辑
};
const mapStateToProps = (state) => ({
data: state.data,
});
export default connect(mapStateToProps)(MyComponent);可以使用useMemo()来优化calculateDerivedValue的计算逻辑：
import React, { useMemo } from 'react';
import { connect } from 'react-redux';
const MyComponent = ({ data }) => {
const derivedValue = useMemo(() => calculateDerivedValue(data), [data]);
// 组件的渲染逻辑
};
const calculateDerivedValue = (data) => {
// 计算派生值的逻辑
};
const mapStateToProps = (state) => ({
data: state.data,
});
export default connect(mapStateToProps)(MyComponent);通过使用React.memo()和useMemo()，可以避免不必要的组件重新渲染，从而提高应用程序的性能。在具体的项目中，根据实际情况选择合适的优化方式。
相关·内容
1回答
我得到的问题是，每次我单击一个随机类别的图像时，DOM将重新呈现，并且新的随机图像将出现在DOM上。如何防止这种重新渲染？下面是我的代码。
浏览 17提问于2021-01-30得票数 0
回答已采纳
我希望得到一些帮助，告诉我如何在列表的顶端创建新的费用。我一直得到相同的错误:太多的重新渲染。React限制渲染的次数，以防止无限循环。我该如何解决这个问题呢？/slices/dataSlice";
const
浏览 1提问于2021-09-06得票数 0
这似乎工作得很好，除了我的嵌套组件会在状态改变时重新呈现。(有没有办法使用connectAdvanced生命周期方法来解决这个问题？
浏览 4提问于2017-12-11得票数 0
但甚至在遇到传奇FETCH_DATA之前，调用就会到达reducer，因为没有动作类型FETCH_DATA情况可以处理，它将返回默认状态，这会导致应用程序重新呈现。所以渲染发生了两次，这会给列表中的项目带来一些问题。
我认为这在某种程度上也是意料之中的，因为我在一些文章中读到了.How，以摆脱这种重新渲染？
浏览 38提问于2019-07-25得票数 0
4回答
我正在学习redux，我想知道useSelector是如何更新组件的，因为组件没有自己的状态。
我知道useSelector()将组件订阅到存储区，当存储区更新时，组件也会更新。如何强制更新功能组件？
浏览 2提问于2020-12-14得票数 1
1回答
我正在用React-Redux一起做我的第一步。我在国家管理方面遇到了麻烦。
一切都在按预期进行。我有一个用来触发动作分派器(FetchUserAction)的onClick按钮。
浏览 3提问于2017-07-24得票数 0
以前，它会在filterbar中的值发生变化时自动更新，但由于我重写了filterbar，只有当我关闭并重新打开扩展面板时，它才会更新。})}</div>};
我可以在forceUpdate中编写代码，但我不知道如何在不引起无限重现的情况下做到这一点
浏览 0提问于2020-03-25得票数 0
4回答
一切正常，但是，当我尝试删除数组中的一项时，整个页面都会重新呈现。
有没有人能告诉我哪里出错了？我只想在单击按钮后删除一个特定的项目，而不是重新呈现整个页面。
浏览 2提问于2020-03-21得票数 4
1回答
我必须在页面上显示一个PDF文件，它工作得很好，但每当我打开或关闭模式时，PDF都会重新呈现。 import { documentActions } from '..
浏览 8提问于2020-06-30得票数 1
回答已采纳
然而，我知道在内部，当我们分派一个动作时，react-redux会通过它的setState方法重新呈现一个连接的组件，这是异步的。因此，我在理解React何时有效地使用新数据重新呈现组件时遇到了一些困难。感谢您的关注。
浏览 1提问于2018-06-08得票数 0
React 16.7有状态钩子，所以我不再需要react-redux了，对吗？
浏览 1提问于2018-11-05得票数 0
在这个沙箱https://codesandbox.io/s/ovomwoompq中，每当我单击问候组件时，它都会被重新呈现。这效率不是很高。如何防止我的组件无法重新渲染？
浏览 21提问于2020-01-20得票数 0
回答已采纳
import React, { useEffect } from 'react';/**
浏览 39提问于2020-12-28得票数 1
回答已采纳
3回答
如何防止子组件重新渲染？
、、、
因此，布局组件会触发其所有子组件的重新呈现。我试图实现React.memo()，但它对我没有帮助。请纠正我。提前谢谢你！> </form> );我不想重新呈现的
浏览 1提问于2019-11-14得票数 1
3回答
所以，每当我在输入中输入一些东西时，模式也会闪烁(重新渲染)。
如何在更新状态时防止Modal重新渲染？
浏览 17提问于2020-02-03得票数 0
回答已采纳
当我向下滚动时，我遇到了一个关于DOM重新渲染的奇怪问题。我有一堆需要在页面上呈现的OEmbed数据，但如果不重新加载所有的嵌入内容，似乎无法在页面上呈现这些数据。ngIf="item.template == 'embed'"></div>
有没有关于如何防止重新
浏览 2提问于2016-08-23得票数 0
我有一个组件，它在渲染时进行两次useSelector调用。现在，我模拟了useSelector，并成功地从两个调用中返回了两个不同的值，如下所示： const Redux = require('react-redux');
const mockSelectorSpy
浏览 104提问于2020-10-02得票数 1
但是，这会导致无限循环，因为useEffect + setState会导致重新绘制，从而再次更改存储变量，依此类推。
浏览 9提问于2021-03-25得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
