React Native 在JavaScript/VS代码中处理大量文本数据

llew8vvj  于 6个月前  发布在  React
关注(0)|答案(1)|浏览(75)

我正在开发一个react native应用程序,它有很多文本数据,计划是让它离线工作,所以它的所有内容都将在应用程序中编译。它是一个资源应用程序,所以有几个类别,但基本上是400篇文章,每个类别有3或4个(总共1200-1600),或者至少对于更高的数量。目前约30%通过第一个,它正在接近18,000行。与一个对象相比,将每篇文章放在一个json中并通过名称引入会更快更有效吗?我不认为在对象中查找会很慢,因为只有400个左右的id要查找,但我遇到了一个问题,vscode变得非常慢。整个应用程序中用于参考的ids越来越慢,这让我重新考虑如何存储数据。我没有看到应用程序上的任何性能问题,因为它被加载到一个flatlist中,但我很好奇是否有更好的方法来处理它的代码。
我在网上看了看,看到了更多关于渲染的信息,这不是一个问题,我认为这是一个VSCode问题。

y0u0uwnf

y0u0uwnf1#

如果你的文章主要用于reading,请考虑有效地组织它们。你可以创建一个文件夹结构,将categorizesarticles放入单独的文件夹中。在React Native中,你可以使用clear folder structure导入文章,如下所示:

import article1 from '../articles/category1/article1.json';

字符串
这种方法simplifies文章管理和增强整体组织。

**动态化:**假设你有相同的项目结构

project/
├─ src/
│   ├─ articles/
│   │   ├─ category1/
│   │   │   ├─ article1.json
│   │   │   ├─ article2.json
│   │   │   └─ ...
│   │   ├─ category2/
│   │   │   ├─ article1.json
│   │   │   ├─ article2.json
│   │   │   └─ ...
│   │   ├─ category3/
│   │   │   ├─ article1.json
│   │   │   ├─ article2.json
│   │   │   └─ ...


对于dynamic importarticle,您可以按照以下方式构建代码:

import React, { useEffect } from 'react';

async function loadArticle(category, articleName) {
  try {
    const articleModule = require(`../articles/${category}/${articleName}.json`);
    return articleModule.default; // Assuming articles are exported as default
  } catch (error) {
    console.error(`Error loading article: ${error}`);
    return null;
  }
}

const YourComponent = () => {
  const category = 'category1';
  const articleName = 'article1';

  useEffect(() => {
    async function fetchArticle() {
      const article = await loadArticle(category, articleName);
      if (article) {
        console.log(article);
      } else {
        console.log('Article not found or error loading.');
      }
    }
    fetchArticle();
  }, [category, articleName]);

  return (
    // Your component JSX here
  );
};

export default YourComponent;

相关问题