移动浏览器中的 React 性能

2024-05-14

我有一个组件(表),其中包含许多行,其中包含数据编辑,其掩码形式为contenteditable,可以选择所有字段并同时更改所有行。

在桌面上它运行得相当快,但在 iPhone 6 上我有不真实的滞后,Safari 每次操作都会挂起 20 秒。

我完成了提高 React 性能的建议:防止协调、纯组件等......

有没有办法提高性能?我是否有必要考虑对移动设备进行功能更改以提高性能?


你应该覆盖shouldComponentUpdate表中每一行的组件生命周期方法。理想情况下适用于每行中的每个单元格。

如果你有一张桌子并且它有不同的道具。发生的情况是每个嵌套组件都会被重新渲染。PureComponents 可能会有所帮助,但写作shouldComponentUpdate是真正控制重新渲染某些内容的唯一方法。

对于非常大的数据列表,还有一个反应虚拟化。一探究竟 https://github.com/bvaughn/react-virtualized。它太酷了。

如果你能发布源代码就好了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

移动浏览器中的 React 性能 的相关文章

随机推荐

  • 如何从 postgresql 函数或触发器发送一些 http 请求

    我需要通过 http 协议 GET 或 POST 请求 从函数或触发器发送数据 是否可以 您可以尝试用 PL Python 编写触发器并使用 urllib2 进行 POST
  • RuntimeError(f"目录 '{directory}' 不存在") RuntimeError: 目录 'app/static' 不存在

    当我运行 server py 文件时出现错误 File C Users nawin AppData Local Programs Python Python38 lib site packages starlette staticfiles
  • 我们如何使用 thymeleaf 绑定对象列表的列表

    我有一个表单 用户可以在其中添加任意数量的内容表对象这也可以包含他想要的列对象 就像在 SQL 中构建表一样 我尝试了下面的代码 但没有任何效果 并且当我尝试绑定两个列表时 表单不再出现 控制器 ModelAttribute page pu
  • 使用 FastAPI 传输 LangChain OpenAI 响应 [重复]

    这个问题在这里已经有答案了 我想将 OpenAI 的响应直接传输到 FastAPI 的端点 Code 在我的threads handler py 位于单独的文件夹中 中 我有以下函数askQuestion def askQuestion s
  • 编写健壮的 R 代码:命名空间、屏蔽和使用 `::` 运算符

    简洁版本 对于那些不想阅读我的 案例 的人来说 这就是本质 最小化新包破坏现有代码 即编写您编写的代码 的机会的推荐方法是什么尽可能坚固 充分利用该功能的推荐方法是什么 命名空间机制 when a just using贡献的软件包 比如在一
  • 从 Code::Blocks 运行程序时出现空白控制台窗口 [重复]

    这个问题在这里已经有答案了 当我尝试在 Code Blocks 中构建并运行新程序时 控制台窗口弹出空白 我必须单击退出按钮才能停止它 它对我尝试过的任何新项目 包括 Hello world 都执行此操作 奇怪的是 它对于我拥有的任何旧项目
  • @apply 在 Laravel Mix 中的 Vue 组件内不起作用

    我在 Laravel 中使用 Tailwind CSS 和 VueJS 组件 如下所示
  • OpenGL - 两个纹理的幂

    OpenGL 使用二次幂纹理 这是因为由于 MipMapping 某些 GPU 只接受 2 的幂纹理 当绘制比实际更大的纹理时 使用这些二次方纹理会导致问题 我想到了一种方法来解决这个问题 即仅在我们使纹理小于实际大小时使用 PO2 比率
  • 在 JavaFX 中搜索 TableView 列表

    如何在 TableWie 中查找记录 例如通过 ID 并选择创建的行并将其放在 Java 8 JavaFX 中的屏幕中间 您可以使用以下方式搜索元素 int searchId table getItems stream filter ite
  • TextView.setMaxLines 不起作用?

    在我的应用程序中 我有一个屏幕 其中显示一些文本 然后显示一张照片 文本的长度是可变的 有时根本没有 有时很多 所以我想对其进行设置 以便文本永远不会占用超过几行 但可以滚动 为下面的图像留下足够的空间 我这部分的视图组件是以编程方式创建的
  • Azure Java SDK:ServiceException:ForbiddenError:

    尝试了基本位置检索器代码 如下所示 String uri https management core windows net String subscriptionId XXXXXXXX 5fad XXXXXX 9dfa XXXXXX St
  • Django 将对象从视图传递到下一个进行处理

    如果您有 2 个视图 第一个视图使用 modelform 获取用户输入的信息 出生日期 姓名 电话号码等 第二个视图使用此信息创建表 如何将第一个视图中创建的对象传递到下一个视图 以便可以在第二个视图的模板中使用它 如果您能分享任何帮助 我
  • 运行故事书时出错 - sh: 1: start-storybook: 未找到

    我运行时遇到错误故事书 即使是干净的安装 npm run storybook gt storybook media programmersedge New Volume devs demostorybook gt start storybo
  • java实现excel价格、收益率函数[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 从成员函数指针类型生成函子

    我正在尝试简化 通过make fn 预处理参数的函子的生成 通过wrap 对于 arity 的成员函数n 生成函子基本上可以工作 但到目前为止只能通过显式指定成员函数的参数类型来实现 现在我想从它处理的成员函数类型生成正确的函子 struc
  • Android 中 Activity 之间的 3D 动画

    How to create animation between two Activity look like As Screen shot in android 搜索jazzyviewpager 这是link https github co
  • Onblur 事件在另一个 div 的 onclick 之前触发

    如上所述 我有一个按钮 单击该按钮将打开子菜单 对于子菜单中的每个选项 都有三个元素 我认为实际上还有更多元素 但为了简单起见 将其保留为 3 我将焦点放在子菜单的主 div 白色 框架 上 Onblur 这个 div 然后我隐藏子菜单 这
  • C# 委托责任链

    为了我的理解目的 我实现了责任链模式 Abstract Base Type public abstract class CustomerServiceDesk protected CustomerServiceDesk nextHandle
  • 了解应用程序在后台时何时收到 Firebase 消息

    我知道这个标题有同样的问题 但不幸的是它没有得到正确的回答 它被接受了 here https stackoverflow com questions 37711082 how to handle notification when app
  • 移动浏览器中的 React 性能

    我有一个组件 表 其中包含许多行 其中包含数据编辑 其掩码形式为contenteditable 可以选择所有字段并同时更改所有行 在桌面上它运行得相当快 但在 iPhone 6 上我有不真实的滞后 Safari 每次操作都会挂起 20 秒