小编Vic*_*ina的帖子

介绍

我的 VirtualizedList （无限滚动）遇到严重的性能问题...我一直在遵循此方法来改进它，但仍然工作得很慢。

当我向下滚动时，UI 线程从 60fps 变为 30fps，JS 线程从 60fps 变为 10/20fps（有时变为 0fps）。在 iOS (iPhone 6) 上似乎比在我的 Android (Samsung Galaxy S8+) 上运行流畅

我的 VirtualizedList 正在渲染具有不同高度的项目，并在到达末尾时获取数据。我的项目从 React.PureComponent 扩展而来，正如推荐的那样：

VirtualizedList：您有一个更新缓慢的列表 - 确保您的 renderItem 函数渲染遵循 React 性能最佳实践的组件，例如 PureComponent、shouldComponentUpdate 等。 Object { "contentLength": 20720, "dt": 532, "prevDt" ：2933，}

当我向下滚动大约 20 个项目时，就会出现这个问题......

代码

这是 VirtualizedList 的代码：

const keyExtractor = ({ id }) => id;
...
 
getItem = (data, index) => data[index];

getItemCount = (data) => data.length;

renderItem = ({ item, index }) …

我有一个最初是假的布尔值。但是在未来的某个时候，如果它的值发生变化（可以更改多次，但只能更改为相同的）。

例如，使用给定的伪代码

const hasChanged = false; // stateful

// This function can be called multipe times
const handleSubmit = () => {
   // ...
   hasChanged = true;
   // ...
}

我总是将值 'true' 重新分配给我的布尔值......我认为，也许可以通过首先检查它是否为假来优化它，如下所示：

const handleSubmit = () => {
   // ...
   !hasChanged && hasChanged = true;
   // ...
}

但这只有在条件检查（读取 + 检查）比 JS 中的写入操作更快时才成立，这是我不知道的。

有任何想法吗？

制作 React App International 时建议使用哪种技术？

我正在考虑编写以下代码：

1. 创建一个 React 上下文“语言”
2. 创建不同的模块，导出包含每种语言“pt”、“en”、“fr”、“sp”、“it”的所有字符串的地图...
3. 尝试使用语言上下文提供程序提供的方法从我的启动屏幕中的 AsyncStorage 加载默认语言。
4. 如果没有找到，则根据用户的位置获取用户语言。

对我来说，这是有道理的，但可能还有其他更简单的方法可以实现相同的目标，感觉更专业。

// This is my Languages Context
import React, { createContext, useState } from "react";
import * as Localization from "expo-localization";

import { VALID_LANGUAGES } from "../../utils/languages/constants"; // "English", "Spanish", "Portuguese"...
import languages from "../../languages"; // en, sp, pt, ... modules with all texts (key, value)
import AsyncStorage from "../../lib/async-storage/AsyncStorage";

const LanguagesContext = createContext(null);

export default LanguagesContext;

export function LanguagesProvider({ children }) {
  const [language, setLanguage] …

我有以下项目结构：

api/\n  users/\n    users.d.js\n\ncontexts/\n  users/\n    users.d.js\n\nutils/\n  users/\n    users.d.js\n

在utils/users/users.d.js中中，我正在定义可在整个系统中重用的类型。

例如，以下类型：

/**\n * Represents a User.\n *\n * @typedef {object} User\n * @property {string} id - Unique identifier.\n * \xe2\x80\xa6\n * @property {Date} birthday - Birthday.\n */\n

这很酷，现在我可以在我的模块index.js中重用它中重用它，如下所示：

import \xe2\x80\x9c./utils/users/users.d\xe2\x80\x9d;\n\n/**\n * \xe2\x80\xa6\n * @param {User} user - The profile owner.\n */\nfunction navigateToUserProfile(user) {\n  \xe2\x80\xa6\n}\n

效果很好！我的代码编辑器会检测类型，并且可以毫无问题地自动生成文档:)

但是\xe2\x80\xa6 如果api/users/users.d.js会怎样需要全局类型定义怎么办？

例如，如果在该模块中我有以下定义怎么办：

/**\n * @typedef {object} EditProfileInterface\n *\n * …

介绍

我有一个数据数组，其中包含具有唯一 ID 的对象。

我正在尝试创建尽可能多的参考资料。例如，如果数组有 4 个元素，那么我将创建 4 个引用。每个引用都必须包含在一个数组中，而且我需要将其与对象的唯一 id 关联起来。

这是我试图在“伪代码”中执行的操作：

伪代码

 data = [{id: "10i3298yfrcd", ...}, {id: "y48hfeucldnjs", ...}]

 references = data.map(({id}) => useRef(null))

问题

我不知道如何将每个创建的引用与其各自的对象 ID 关联起来（只是为了访问引用，例如使用字母数字索引数组，或类似的东西）...

另外，以这种方式创建引用时出现错误：

React 检测到 %s 调用的 Hook 顺序发生了变化。如果不修复，这将导致错误和错误。有关更多信息，请阅读 Hooks 规则：https://reactjs.org/docs/hooks-rules.html

所以我认为这不是动态创建引用的有效形式。

有什么想法如何做到这一点吗？谢谢。