React，如何通过重新选择停止应用程序的重新渲染？
在React中，可以通过使用shouldComponentUpdate()方法来控制组件的重新渲染。shouldComponentUpdate()是一个生命周期方法，它在组件即将重新渲染之前被调用。
默认情况下，React组件的shouldComponentUpdate()方法会返回true，表示组件将重新渲染。但是，我们可以在这个方法中编写自定义的逻辑来判断是否需要重新渲染组件。
以下是一种常见的优化方式，可以通过重新选择停止应用程序的重新渲染：
- 在组件的shouldComponentUpdate()方法中，比较新的props和state与当前的props和state，判断是否有变化。如果没有变化，返回false，表示不需要重新渲染组件。
shouldComponentUpdate(nextProps, nextState) {
// 比较新的props和state与当前的props和state
// 如果没有变化，返回false，表示不需要重新渲染组件
if (this.props.someProp === nextProps.someProp && this.state.someState === nextState.someState) {
return false;
}
return true;
}- 使用React的PureComponent代替普通的Component。PureComponent内部已经实现了shouldComponentUpdate()方法的浅比较逻辑，可以自动判断是否需要重新渲染组件。
import React, { PureComponent } from 'react';
class MyComponent extends PureComponent {
// 组件的其他代码
}通过以上两种方式，可以有效地减少不必要的组件重新渲染，提高应用程序的性能和效率。
对于React的相关产品和产品介绍，腾讯云提供了云开发（CloudBase）服务，它是一款全栈云原生应用开发平台，提供了前端开发、后端开发、数据库、存储等一体化的解决方案。您可以通过以下链接了解更多信息：
腾讯云云开发（CloudBase）：https://cloud.tencent.com/product/tcb
相关·内容
2回答
我想知道如何在React中管理复杂的状态，限制那些内容没有改变的组件的渲染调用的数量。
举个例子：
我有简单的连接到redux存储容器组件与“项目”道具(这是数组)。
const Component = ({ items }) => (
<>{items.map(item => <ItemComponent key={item.id} {...item} />}</>
);
const mapStateToProps = state => ({
items: $$data.select.items(state),
});
浏览 39提问于2019-06-18得票数 4
我一直在使用react.js创建一个小应用程序。
所以我有一个简单的名为“微调”的子组件。我的目标是确保这个组件永远不会重新渲染。
下面是我的组件：
import React, {PureComponent} from 'react';
export default class Spinner extends PureComponent {
render() {
return (
<div className="spinner">
<div className="bounce1"
浏览 2提问于2016-12-10得票数 6
我使用的是React JS。
首先，我需要使用REST API从数据库中获取数据，并使用此结果设置一些变量，然后将这些变量传递给另一个类。现在，我想通过axios发出一个同步请求，这样只有在设置了数据控制之后，才应该进行下一步。简而言之，我想停止渲染我的代码，直到我的变量设置为数据。如何通过axios实现这一点？
浏览 3提问于2016-11-21得票数 0
如何使全页面加载器/旋转将首先加载，然后将显示，直到React (或不同的基于JS的框架)应用程序完全加载。
我所说的“完全加载”是指浏览器的旋转器停止旋转的那一刻。
我正在为非JS渲染的网站做这些加载器/微调器，但我不确定如何为JS渲染的应用程序制作它们。
我怎么知道根目录中什么时候充满了完全加载的React应用？
浏览 14提问于2020-02-26得票数 1
我在类型记录中编写了一个简单的treeview，使用react来呈现DOM。
每个节点都必须遵循简单的接口。
interface INode {
label: string;
children: INode[];
}
然后用以下方法描述这棵树：
var tree = {
label: "root",
children: [
{
label: "node 1",
children: [
{
labe
浏览 1提问于2016-03-14得票数 6
回答已采纳
在我们的React应用程序中，我们有一个相当昂贵的(性能明智的)网格，并且希望在侧边栏打开或某个长期运行的进程处于活动状态时停止重新呈现异步数据更新。
如何停止一段时间的更新并停止重新渲染？
浏览 14提问于2019-10-30得票数 0
1回答
我的应用程序中有一个FormControlLabel组件，redux操作被分派为'onChange‘，商店中的状态得到正确更新，只是该组件不会在屏幕上更新。如何告诉react在调度操作后需要执行重新渲染？ 我可以利用useState，但是同时使用redux存储和useState钩子是多余的；我希望我的存储是我应用程序中唯一的状态源。
浏览 18提问于2021-03-29得票数 0
回答已采纳
React给出了一种使用React.memo来记忆组件的方法，如果属性没有变化，它实际上会停止组件的重新渲染。 import React, { memo } from 'react';
interface ComponentNameProps {
}
const ComponentName:React.FC<ComponentNameProps> = props => {
const {} = props;
return (
<div>
</div>
)
}
export d
浏览 77提问于2021-08-20得票数 0
我知道之前有人问过这个问题，但解决方案与我构建/编写React应用程序的方式不同，如下所示。如何基于更新的listData使用一次更新/渲染 import React, { useState } from "react";
const PageName = () => {
const [listData, setlistData] = useState([]);
function add(){
let newrow = {};
listData.push(newrow);
setlistData(listData);
}
浏览 55提问于2021-10-07得票数 0
回答已采纳
在我的react项目中，我设置了回调来停止过多的重新渲染，因为那里显示的数据相当大，并且有许多不同的按钮可供用户单击，所有这些都会导致重新渲染。 useCallback钩子可以工作，并且不会调用重新渲染，除非我还在useCallback函数旁边传入了道具，在这种情况下，每当用户与应用程序交互时，子组件都会重新渲染。 例如，如果我像这样创建子组件： <Dropdown
//props={{ cat, var }}
getLi={getLi}
getType={getType}
increment={increment}
/> 在dropdown子级中，我将cat和var定义为con
浏览 10提问于2021-04-07得票数 0
回答已采纳
例如，我有一个名为List的React Hook组件，它具有任意数量的子项Entry (可以添加或删除)。如果条目的数据发生变化，我如何才能在不重新渲染父条目的情况下更新它，这将重新渲染其所有兄弟项，这可能是巨大的。我希望避免使用useRef和useImperativeHandle，首先是因为我的代码变得更加复杂，而使用react-sortable-hoc使得使用它们变得不可能。
浏览 32提问于2020-03-06得票数 0
2回答
似乎每隔一周我就会遇到同样的问题，我的将停止构建并且不会在Xcode中打开，我想知道有哪些修复可以解决这个问题。当我尝试在Visual代码中构建时，应用程序会被⠇ Building the app消息卡住。当我尝试在Xcode中打开工作区时，Xcode停止响应，它会被困在旋转的彩虹轮上。由于某些原因，npx react-native start工作正常，在使用npx react-native run-ios时会出现问题。
当这种情况发生时，我要花上几个小时来解决这个问题，而且我也找不到一个一致的解决方法。有没有人有这方面的经验，并知道解决方案？
浏览 6提问于2022-12-03得票数 -1
我正在开发一个应用程序，上面有一个很大的子组件垂直列表。每个子组件都使用React.memo，我已经构建了优化，以确保当修改列表中的其他组件并更新组件树中更高位置的状态时，它们不会重新呈现。
这是工作良好，并有戏剧性的性能提高，但我想写单元测试(S)，以防止未来的回归，因为人们在项目中添加更多的功能，道具，状态等。
理想情况下，我希望渲染父组件和其中的一些子组件，并在其中一个组件上执行一个操作，该操作应该只会导致父组件和那个子组件重新渲染。然后，我想测试其他子组件是否不会重新呈现。这将是一个安全测试，以确保人们不会做出破坏React.memo的更改(匿名函数或新对象，如道具等)。
以下是对层次
浏览 3提问于2021-11-03得票数 1
背景 标题可能会令人困惑，但为了解释，我使用切片和Redux Toolkit来管理状态。这些切片保存了我的地图应用程序的各种状态值。具体地说，我在渲染时遇到的两个问题是单击位置(称为focusedPosition和鼠标坐标mouseCoords)。这些切片中的每一个都包含一个lat和lng值。使用react-leaflet，每当用户单击地图以显示弹出窗口时，我的地图事件都会更新focusedPosition。我还有一个事件来捕获要显示在地图角落的mouseCoords。但是，由于某些原因，任何订阅了focusedPosition更新组件都会在鼠标移动时重新呈现--即使它没有订阅mouseCo
浏览 167提问于2021-10-27得票数 0
回答已采纳
9回答
我对IE 11和我的react应用程序有一个问题。我使用了Webpack，巴别塔和polyfill.io cdn，一切都很好，直到渲染堆文件，然后它停止做任何事情。你知道会出什么问题吗？
提前谢谢。
浏览 1提问于2018-12-05得票数 56
2回答
我对原生反应还很陌生。我正在使用Atom IDE开发Android应用程序。我对react的读数有一点怀疑。当在react原生中设计组件时，是否有任何即时渲染窗口的方法。
浏览 0提问于2017-01-11得票数 1
1回答
我有一个react应用程序。在这个应用程序上，我渲染了10个表。当用户对表进行更改时，我只希望重新呈现一个表，而不是所有10个表。 为了完成这项任务，我使用了具有比较器功能的React.useMemo()。这就是它： function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
con
浏览 22提问于2020-01-20得票数 2
如果React在重新渲染之前比较(浅)前一个状态和下一个状态，它将减少许多渲染，这有助于优化性能。
根据的说法，当setState方法被调用时，React总是呈现组件及其子组件。React应该巧妙地处理组件及其子组件的不必要的重新呈现。
浏览 8提问于2018-07-21得票数 5
1回答
我是Meteor/React的新手，我正在尝试如何创建一个多页应用程序。我真的对如何让路由正常工作感到困惑。我想有多个html文件，这取决于发生了什么，将导致另一个渲染。例如,
我在main.html上，我点击了一个按钮->，然后它应该会导致secondary.html在屏幕上呈现。我在secondary.html ->上点击了另一个按钮，它会把我带到tertiary.html。
然而，每当我启动一个应用程序时，我所有的html文件都会被一次渲染(我猜Meteor是自动渲染的)。我一直在尝试和FlowRouter合作。任何帮助或建议都将不胜感激！
浏览 1提问于2016-02-08得票数 3
我正在尝试通过react@16.5.2在我的create-react-app中使用lazy loading，我这样做了：
import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
const Header = React.lazy(() => import('./_header'));
class SomeFile extends Component {
render() {
return
浏览 33提问于2018-12-15得票数 2
回答已采纳
在React应用程序中，我有一个带有多个手风琴的侧面板，用户必须向下滚动才能看到所有的手风琴。当我单击面板下方的按钮时，面板显示为重新渲染(刷新，看起来就像用户滚动回面板顶部一样)。有没有办法防止这种重新渲染，以便当用户单击按钮时，面板不会移动/滚动/重新渲染(以便用户正在查看的按钮和折叠面板仍然可见)？
我希望当用户单击面板下部的按钮时，面板不会重新呈现或滚动回顶部。
浏览 14提问于2019-10-25得票数 0
3回答
当我检查由react在服务器上呈现的标记时，我看到了很多评论，比如：
<!-- /react-text --><!-- react-text: 28 --><!-- /react-text -->
我该如何让反应停止渲染它们？
浏览 6提问于2016-06-16得票数 10
回答已采纳
我认为react-spring会导致组件重新渲染很多次，所以如果它是一个已经有大量useSpring()工作要做的组件，那么react-spring不是最适合这个任务的。
在他们的示例中，我可以看到它重新渲染了很多次：
(通过查看console.log输出，其中包含大量的renderCount打印输出。当我们将持续时间更改为5000 (即5秒)时，打印输出要多得多。
同样，如果它是一个类似于react-spring的组件，它会呈现很多内容：
但是，以下代码：
let renderCount = 0
export default function App() {
const style
浏览 4提问于2021-04-21得票数 1
我想将我的项目从普通的react迁移到react redux，我对React并不陌生，但对Redux来说却是新的。我有一个用React写的相当大的web应用程序，里面有几十个React.js文件。它们中的大多数包含状态的+在它们之间传递变量。包括分配Post/Get请求函数，在我的文件中至少实现了一半。
我想慢慢地从普通的react转到react redux。
我想问一下，是否有人有一些文章，或者可以提供一些关于将现有的react项目迁移到react-redux的见解。我不想为了改变的唯一目的而停止开发，而是慢慢地适应它。
有可能吗？有没有工具可以帮我做到这一点？
我看到了一些redux的例子
浏览 7提问于2019-06-22得票数 1
我使用React渲染我的web应用程序所需的一些组件，我有一个带有播放和停止按钮的计时器。我从get请求中检索所有的时间记录，并且我想在组件每次更改时重新修改它，我如何做到这一点？
除了使用一个简单的setInterval来调用this.forceUpdate()函数之外，一切都可以正常工作，但这给了我一个警告：
警告:forceUpdate(.)：只能更新安装或安装组件。这通常意味着在未挂载的组件上调用forceUpdate()。这是禁止行动。请检查TimerBox组件的代码。
我的组成部分：
var TimerBox = React.createClass({
displa
浏览 3提问于2017-03-09得票数 0
回答已采纳
我有一个问题，为什么子组件没有在3d时间重新渲染。 请看下面的代码，我有一个Parent组件，它有一个状态钩子，并通过setState函数来做Child组件。在Child中，它有一个超时，会在2秒后将状态更改为false。此外，当父组件或子组件渲染时，I console.log。 看到代码下面的控制台日志，我可以理解为什么两个组件都会重新渲染两次，以及当父组件第三次重新渲染时，但我不明白为什么子组件也会停止第三次重新渲染？ Code sandbox import React, { useState } from "react";
import ReactDOM from &#
浏览 17提问于2020-04-16得票数 0
4回答
我正在用react和react-leaflet制作地图。React Leaflet有一个名为FeatureGroup的类，我希望在第一次呈现时使用React中的useRef钩子访问它，然后访问useEffect函数中的值。但是，在初始渲染时，引用是未定义的(markerRef.current返回null)。只有在我对代码进行任何类型的更改后，保存并重新加载React应用程序，它才会获得值
你能告诉我我做错了什么吗?我怎样才能使markerRef.current在初始渲染时不为空？
请在下面找到组件的缩写代码：
import {useRef} from 'react';
im
浏览 3提问于2021-01-29得票数 2
我读到这在理论上是可以的。在我的小用例中，我遇到了一个问题，混合这些技术会导致双重重新渲染。 首先，当redux分派被执行时，一些组件通过useSelector使用属性。然后，在功能组件已经被重新呈现之后，将应用一个useEffect钩子来更新某些属性的状态。此更新将再次重新触发渲染。 例如，在我的例子中，下面的控制台日志打印了两次。 问:我是否应该删除useEffect和useState并将其集成到redux的存储中？ import {useSelector} from "react-redux";
import React from "react";
浏览 9提问于2020-08-05得票数 0
4回答
我正在使用Expo + React导航。
在我的React Native应用程序中有很多使用组件Map的屏幕。我不希望这个组件在切换屏幕时被重新渲染。有没有办法将我的组件Map保存到某种类型的存储中，这样每次我需要Map时，我的应用程序就不必重新渲染它？
浏览 2提问于2018-04-02得票数 5
如果父级更新响应js中的上下文或状态，如何停止子组件的重新呈现？
我已经在使用React.memo了，但它仍在重新呈现。
这是我的子组件
const Ab = () => {
console.log("---ff-ddd");
const pageContext = useContext(PageContext);
useEffect(() => {
setTimeout(() => {
pageContext.updateGlobalMenu({});
}, 5000);
}, []);
return <
浏览 2提问于2022-05-24得票数 0
回答已采纳
1回答
当使用Jasmine测试我的Angular应用程序时，我必须创建目标测试组件中使用的所有组件的模拟副本。我这样做是为了避免对所有包含的组件进行深度渲染，因为我只需要渲染我的“父”组件。我想知道有没有像React/Jest中那样的浅层渲染？它允许离开我的组件的“真正的”子组件，但只是停止渲染在1级？
浏览 0提问于2018-10-14得票数 0
2回答
我知道redux非常适合处理应用程序的全局状态，当该状态被更新以反映在视图中时。但是，有没有可能在不应该重新呈现的react组件上使用它？我有一张地图，它使用小叶，而不是重新渲染和绘制数据，我希望它绘制数据而不是重新渲染。
redux看起来是个不错的选择吗？如果是这样，我应该在哪里处理api调用，因为我被告知不应该在reducer中这样做。
目前，我的应用程序由一个导航栏、一个全屏地图和一个由api请求填充的搜索菜单组成。这个想法是，当选择一个搜索时，它会将数据填充到地图上。
浏览 2提问于2016-03-07得票数 1
2回答
我在我的应用程序中使用web组件。在web组件中，我需要插入一个react组件。Web组件具有Shadow DOM。当我尝试使用下面的命令来呈现react组件时，我得到了错误。
comp = React.createElement(ReactElem, {
config: config,
onRender: handleRender
});
ReactDOM.render(comp , self.shadowRoot.querySelector('#app1'));
错误
target container is not a dom element
我尝试使用W
浏览 2提问于2017-02-16得票数 5
回答已采纳
我是一个新的React Native开发人员，目前在用户启动应用程序时遇到性能问题。在Nexus 6P模拟器和我的三星平板电脑上，渲染应用程序的内容大约需要5-10秒。
目前，我将tab导航器作为主要组件，并在tab导航器中使用了三个堆栈导航器，似乎react本机尝试一次挂载\渲染所有这些组件。你能告诉我如何解决这个问题，用我的应用程序创建更流畅的用户体验吗？因为我的所有组件都是非常轻量级的，而且奇怪的是我有任何性能问题。
浏览 0提问于2018-09-25得票数 0
1回答
我在我的项目中对动画使用了react motion，我通过保持状态解决了每次道具改变时渲染动画的问题。
const {animation} = this.state;
if (animation) {
return (
// updates state upon animatioon to false
<Animator rest={this.rest}>
{this.getContent()}
<
浏览 0提问于2016-09-30得票数 1
2回答
React -重新渲染
、、、
我第一次使用react构建了一个简单的spotify应用程序。目前，我能够渲染用户正在播放的当前曲目，它自动出现在页面上。如果我快速更改曲目(在几秒钟内)，它会在页面上呈现新的曲目详细信息。但是，如果我等待几秒钟，它就会停止渲染。有什么原因吗？
下面是我的代码示例
return (
<div className="App">
<a href='http://localhost:8888'>
<button>Login But With Spotify</button>
浏览 1提问于2020-03-04得票数 0
我有一个无状态的函数组件<Sidebar/>，它只是在div中返回它的子组件。这个组件是由<App/>呈现的，它维护自己的状态，并将该状态的一个元素传递到它的一个子级中。
const Sidebar = React.memo(({children}) => {
return <div className='sidebar'>{children}</div>
})
const App = (props) => {
const [counter, setCounter] = useState(0);
setI
浏览 1提问于2020-05-26得票数 3
我们如何将客户端渲染react应用程序转换为服务器端渲染，使用react-路由器4？
浏览 0提问于2021-03-05得票数 6
1回答
我一直在尝试通过阻止下面示例中的容器组件在每次子组件更新时重新呈现来优化应用程序。当UsersList组件的输入发生变化时，如何预渲染EditableRow组件？谢谢。链接代码：https://stackblitz.com/edit/react-ts-llwq51?file=EditableRow.tsx
浏览 17提问于2021-10-22得票数 1
在我的React应用程序的根组件中，我有以下内容：
class App extends Component {
...
ComponentDidMount() {
window.addEventListener('resize', this.handleResize, false);
}
handleResize{
this.parentSize = {height: window.innerWidht - this.node.offsetLeft ..., width: ...};
this.forceUpdate();
}
ren
浏览 4提问于2017-08-11得票数 0
回答已采纳
1回答
我在我的React-Native应用程序中使用了动态移动标记，为了使标记移动，我每隔一段时间就更新一次状态，用新的标记位置重新呈现屏幕。我也在尝试使用react-native-maps directions，它使用的是google Routes API (这是要花钱的)，我不能允许路由API每秒被调用两次，因为这看起来很浪费(也因为我很穷)。
基本上，您是否知道在不重新渲染路径的情况下不断重新渲染更新标记位置的部分的方法
下面是我的渲染：
render() {
return (
<View>
<MapView
a
浏览 1提问于2020-12-29得票数 3
2回答
我在我的应用程序中使用语义-ui-react。它过去工作完美，但在某一时刻，它停止渲染模态对话框在适当的地方。我唯一安装的东西，不确定是否是原因，是一个节点8.9.4后，安装了新的节点版本，我的npm“要求”我升级sass-加载程序。
现在我所有的对话框都在左上角开了一半。有什么想法吗？
如果我禁用css中的DISPLAY属性，它就会在正确的位置显示对话框。
浏览 0提问于2018-02-26得票数 1
回答已采纳
当使用多个useReducers时，每个组件都使用一部分状态渲染器。 import React, { useContext } from 'react'
import Store from '../store'
import { setName } from "../actions/nameActions"
const Name = () => {
const { state: { nameReducer: { name } }, dispatch } = useContext(Store)
const handleIn
浏览 15提问于2019-05-30得票数 7
2回答
import React, { useState, useEffect } from 'react';
const Test = () => {
const [ count, setCount ] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count up!</button>
<ChildComponent />
浏览 11提问于2019-12-19得票数 0
1回答
物料UI开关不更改UI
、、、、
我正在使用Material UI的开关来改变多页应用程序的主题。发生的唯一错误是交换机不能从左向右移动(ui功能不会出现)，但onChange功能工作正常。我尝试了一下，结果是当我移除forceUpdate()时，material ui开关将会工作，但是组件将不会被重新渲染。forceUpdate中有什么原因导致交换机功能无法正常工作？
App.tsx：
import React from "react"
import {Switch, Route, BrowserRouter, Redirect} from "react-router-dom"
import
浏览 2提问于2020-11-24得票数 1
我正在用React构建一个网站，最近切换到使用服务器端渲染(SSR)来提高性能。我在此更改后遇到的一个问题是，当我格式化页面上的时间时(我使用的是)，它使用服务器的时区不能正确地呈现。
如何使用客户端的时区格式化时间？我是否需要在服务器响应时停止计时，然后让客户端进行渲染？
浏览 109提问于2018-06-16得票数 8
1回答
捆绑向量-应用程序的离线访问图标
、、、、
我使用了来自@expo/vector-icons的两个带有Ionicons的图标作为React Native应用程序。
有没有办法将这两个图标捆绑到应用程序中，这样用户就不需要互联网连接来渲染这些图标了？
浏览 5提问于2017-10-25得票数 1
2回答
我想要一些帮助，请理解为什么下面的代码导致inf呈现循环。在我看来，这应该是一个循环：
渲染容器。
渲染子StrRow。
第一次运行效果并调用update()。
更改容器状态。
重新渲染容器。
重新渲染StrRow.
由于依赖项没有更改，不会再次运行。
然而，这种效果似乎是在StrRow的每次呈现之后运行的。
function Container() {
const [count, setCount] = React.useState(0);
const update = React.useCallback(() => {
浏览 3提问于2020-05-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
