React-虚拟化列表运行速度低于60fps。如何优化？
当React虚拟化列表的运行速度低于60fps时，可以采取以下优化措施：
- 使用虚拟滚动：虚拟滚动是一种技术，可以只渲染可见区域内的列表项，而不是渲染整个列表。这可以显著提高性能，特别是当列表项数量非常大时。可以使用React虚拟滚动库，如
react-virtualized或react-window来实现虚拟滚动。 - 优化列表项渲染：确保列表项组件的渲染逻辑尽可能简单和高效。避免在列表项渲染过程中进行复杂的计算或操作。如果可能的话，可以将列表项组件拆分为更小的可重用组件，以提高性能。
- 使用shouldComponentUpdate或React.memo：在列表项组件中使用
shouldComponentUpdate方法或React.memo高阶组件来避免不必要的重新渲染。这可以通过比较前后两个props和state的值来判断是否需要重新渲染组件。 - 使用key属性：在渲染列表时，确保为每个列表项提供唯一的key属性。这可以帮助React更好地识别哪些列表项需要更新，从而减少不必要的重新渲染。
- 使用性能优化工具：可以使用React性能优化工具，如React DevTools或Chrome开发者工具来分析和识别性能瓶颈。这些工具可以帮助你找到慢速渲染的原因，并提供优化建议。
- 使用React的批量更新：React具有批量更新机制，可以将多个状态更新合并为单个更新，从而减少不必要的渲染。确保在更新列表时使用React的批量更新机制，可以通过使用
setState的函数形式或使用useCallback来实现。 - 使用Web Workers：如果列表项的渲染逻辑非常复杂且耗时较长，可以考虑使用Web Workers将渲染逻辑放在后台线程中进行处理，以避免阻塞主线程。
- 减少重绘和重排：避免在列表项渲染过程中频繁修改DOM样式或布局，因为这可能会导致浏览器进行重绘和重排操作，影响性能。可以使用CSS的transform属性来进行动画或样式变换，因为它可以利用GPU加速。
腾讯云相关产品推荐：
相关·内容
2回答
React Router -导航子路由时的父级重新渲染
reactjs、react-router
如果我有一个根store组件，并且在其中嵌入了一个使用路由/product/:id呈现产品的产品组件，那么每次我更改产品时，根/呈现的行为是正常的吗？ import React, {Component} from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Link } from "react-router-dom";
const Products = [
{ "id" : "First", info
浏览 65提问于2019-06-19得票数 2
1回答
在react重新渲染中，如何防止将滚动条重置到其他未更改组件的顶端？
javascript、reactjs、react-hooks、react-dom
我有以下样例react代码 const A = () => {
const [value1, setValue1] = React.useState(true);
const [value2, setValue2] = React.useState(true);
return (
<div>
<div class="first-comp">
<FirstComponent data1={value1} data2={value2} />
<
浏览 283提问于2021-09-14得票数 0
回答已采纳
1回答
每次父渲染时，React子渲染都会重新渲染
reactjs、react-hooks
正如我在下面展示的，react子渲染每次它的父渲染时都会渲染。这是为什么，这是一个问题吗？另外，我怎样才能避免它，以致于只有当它的优点改变时，子对象才会重新渲染。 import React, {useEffect, useState} from 'react';
function App() {
return (
<div>
<Main></Main>
</div>
);
}
export default App;
function Main() {
const [count
浏览 38提问于2020-04-29得票数 1
在阅读了大量关于shouldComponentUpdate & render的文章之后，我想再次检查组件何时重命名(调用render方法)和何时调用shouldComponentUpdate是否正确。
仅当接收到新的道具或有新的状态shouldComponentUpdate时，才会调用文档(或者有几十篇文章)。但似乎PureComponent乍一看也是这样.
因此，为了调查，我编写了示例应用程序：
父组件
import React, { Component } from 'react';
import './App.css';
impor
浏览 0提问于2018-08-27得票数 1
2回答
为什么react钩子不支持纯组件或shouldComponentUpdate函数？
reactjs、react-native、react-hooks
我想实现flatlist的多选功能。我直接在官方网站上修改了这个例子。官方网站地址是：。因为列表中有很多项，所以我想使用shouldComponentUpdate来防止过度呈现项。但是我发现react钩子编写方法不能实现多选，它不能保存选中的状态，但是类编写方法可以实现多选，原因是什么？FlatList项目的源码如下：
import {StyleSheet, Text, TouchableOpacity} from 'react-native';
import React, {Component} from 'react';
class Item ex
浏览 1提问于2020-06-17得票数 0
4回答
如何防止我的功能组件使用React memo或React钩子重新呈现？
javascript、reactjs、ecmascript-6、react-hooks
何时 值发生更改，则组件将重新呈现。我希望这个组件 从不 重新渲染，即使其道具发生更改。通过一个类组件，我可以像这样实现sCU： shouldComponentUpdate() {
return false;
} 但是有没有办法处理React钩子/React memo呢？ 下面是我的组件的样子： import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import ConnectedSpringLogo from '../../containers
浏览 74提问于2019-03-01得票数 42
回答已采纳
1回答
一个具有任意多个子组件的React父组件如何在不使用useRef的情况下通过其字符串id更新选定的子组件？
reactjs、ecmascript-6、react-hooks、web-architecture、react-sortable-hoc
例如，我有一个名为List的React Hook组件，它具有任意数量的子项Entry (可以添加或删除)。如果条目的数据发生变化，我如何才能在不重新渲染父条目的情况下更新它，这将重新渲染其所有兄弟项，这可能是巨大的。我希望避免使用useRef和useImperativeHandle，首先是因为我的代码变得更加复杂，而使用react-sortable-hoc使得使用它们变得不可能。
浏览 32提问于2020-03-06得票数 0
2回答
是否有反应组件深入比较道具，以检查是否需要改进机？
javascript、reactjs
我想知道扩展React.Component的React在试图决定它是否需要改进型时是否对对象进行了深入的比较。
例如，给出
const Foo = ({ bar }) => {
return <div>{bar.baz}</div>
}
class App extends React.Component {
constructor() {
super()
this.state = { bar: { baz: 1} }
}
render() {
return <Foo bar={this.state.bar} /&g
浏览 1提问于2018-10-25得票数 17
回答已采纳
2回答
反应组分或反应PureComponent
reactjs
我是新手，我想知道什么时候应该使用React组件，什么时候应该使用React
组件：
import React, { Component } from 'react'
PureComponent:
import React, { PureComponent } from 'react'
我可以在任何地方使用React吗？
或
使用shouldComponentUpdate并检查并返回不需要的false是否安全？
我刚读到一篇文章，说使用纯组件实际上弊大于利。他们建议使用“反应-更新-如果-改变”。这有多少是真的？
文章：
浏览 0提问于2018-07-12得票数 4
回答已采纳
3回答
响应:父组件重新呈现所有的子组件，即使是那些在状态更改时没有更改的子组件。
reactjs、redux
我还没有找到一个明确的答案，希望这不是重复。
我正在使用React + Redux作为一个简单的聊天应用程序。该应用程序由InputBar、MessageList和Container组件组成。容器(如您想象的那样)封装了另外两个组件，并连接到存储区。我的消息以及当前消息(用户当前正在键入的消息)的状态保存在Redux存储中。简化结构：
class ContainerComponent extends Component {
...
render() {
return (
<div id="message-container">
浏览 5提问于2016-11-26得票数 105
回答已采纳
1回答
当单击节列表项时，在redux中调度操作会使应用程序变慢。
reactjs、react-native、redux、redux-toolkit
我在Reactinative中有一个区段列表，其中包含大量围绕400+项的项，因此，在每个项上，我将导航到下一个屏幕，并使用片从redux分配操作。我将ContactItem组件传递给SectionList的呈现项函数
const ContactItem = ({ contact }: { contact: IContact }) => (
<ContactListItem
key={contact.key}
name={contact.value}
thu
浏览 4提问于2022-03-11得票数 0
7回答
如何避免子组件的重呈现
reactjs
我有一个无法修复的渲染问题。在我的应用程序中，我有一个Posts组件，它的状态包含一个posts数据数组。
[
{ id: "P01", title: "First post", likeCount: 0 },
{ id: "P02", title: "Second post", likeCount: 0 }
]
在这个组件中，我映射posts状态以返回post状态内每个post的Post组件。
员额构成部分
export default function Posts() {
const [posts, setPost
浏览 4提问于2020-08-07得票数 3
回答已采纳
2回答
我应该使用shouldComponentupdate吗？
reactjs、react-hooks
最近，我意识到子组件总是在父组件改变时重新渲染，即使道具和子组件的状态没有改变。这使我的项目变得如此缓慢。所以，我使用shouldComponentupdate修复了这个问题。但是，我真的应该使用它吗？ 如果我用它的话。有没有办法把它应用到React-hook上？ 这是我的shouldComponentupdate中的代码 shouldComponentupdate(nextProps, nextState){
if(JSON.stringify(nextProps) !== JSON.stringify(this.props) ||
JSON.stringify(nextState) !=
浏览 20提问于2019-05-23得票数 4
1回答
性能-函数组件中的函数
javascript、reactjs、performance
当函数组件具有内部函数时，我对性能有一些疑问。
当有一个带有内部函数的函数组件时，该内部函数是否会在每次渲染时反复重新创建？在这种情况下，如果我用React.memo()对组件进行记忆，那么该函数也会被记忆吗？
下面是我所指的一个虚拟示例：
const MyComponent = React.memo(({genre, name}) => {
const someFunction = genre => {
return (genre === 'male') ? 'Mr.' : 'Ms.';
}
浏览 0提问于2019-09-11得票数 3
5回答
如果家长使用钩子重新命名，则防止重新进行子级重命名
react-native、react-hooks、memoization、use-reducer、react-memo
我的bestSellerDummy数据不会改变，所以我希望防止相同的产品子程序被重新命名，如果父重命名器。我尝试过在父母中使用useMemo，在子中使用React.memo，但是没有成功，它仍然显示日志“呈现产品组件”。每次父母改换。我在这里错过了什么？请指点。
注意:每次我在Product中调用addToCart函数(of CartContext)时，都会对父函数进行重命名。
我正在使用CartContext，可能与此相关，我不确定。下面是沙箱：
Home.tsx
const [bestSellerDummy] = useState(
[...new Array(5)].map((ite
浏览 7提问于2020-11-15得票数 4
回答已采纳
1回答
我在functional component中使用了useLazyQuery，但我需要在类component中使用它。我该怎么做呢？
reactjs、typescript、graphql、apollo-client
我有一些功能组件'‘，有3个复选框和1个按钮。我使用钩子useLazyQuery，我的查询是在点击按钮后发送的。我做到了。但每次单击按钮时，我的组件都会重新呈现。这就是为什么我被推荐将我的功能组件重做为类组件。但是我不知道如何在函数组件中重写函数 const generateQuery = (checkboxNameChecked: boolean, checkboxPatronymicChecked: boolean, checkboxSurnameChecked: boolean) =>
`query { me { id ${checkboxNameChecked
浏览 25提问于2020-03-31得票数 0
1回答
React函数组件防止重呈现
javascript、reactjs、react-hooks、react-functional-component
我有一个类反应组件，如果浏览器pathName是/exp，它使用函数钩子组件
当页面加载时，我的应用程序组件更改的状态大约是3-4次，
如果道具没有改变，如何防止示例钩子重新安装？
import React, { useState } from 'react';
function Example() {
console.log("i mounted")
}
__
export default class App extends Component {
state={key:"value"} <----------------
浏览 1提问于2020-11-01得票数 2
回答已采纳
1回答
使用无状态组件响应备忘录
reactjs
在引入memo和hook之前，所有的功能组件都是无状态的。
在介绍了memo和hook之后，我对这两个概念有点困惑。
是React.memo，用于只使用钩子的函数。
是否应该将(所有无状态功能组件)更新为React.memo以进行优化？还是在函数不自动使用钩子时对其进行优化？
浏览 1提问于2019-10-28得票数 0
回答已采纳
2回答
与shouldComponentUpdate一起使用时，react-native-draggable-flatlist拖放重置
javascript、react-native、user-interface、react-redux、react-native-draggable-flatlist
我正在开发一个react-native -draggable- for应用程序，其中一个列表使用react-native-draggable-flatlist，不幸的是，我不得不在组件中使用shouldComponentUpdate来操作来自另一个组件上其他列表项的数据，但在添加shouldComponentUpdate后，我的拖放不起作用，我可以拖放，但它会立即将整个列表重置为原始定位集。
请帮助我一些建议，使拖放与shouldComponentUpdate一起工作，因为我不想破坏现有的功能
代码
<DraggableFlatList
scrollPercent={5}
data=
浏览 28提问于2020-03-06得票数 2
回答已采纳
2回答
是什么使React.memo在防止呈现方面不可靠？
reactjs
在中，它说：
该方法仅作为性能优化存在。不要依赖它来“防止”渲染，因为这会导致错误。
我不太明白这个警告。为何不能依赖它呢？如果它不一定阻止呈现，它如何是一个优化？
我希望他们在这里更深入，但既然没有，有人能详细说明这一点吗？事实上，我根本不愿意使用它，因为这个警告使得它的行为看起来非常不清楚。
浏览 2提问于2019-03-26得票数 14
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
