reactjs 在next js中使用lazy load删除本地json数据

wooyq4lh 于 11个月前发布在 React

关注(0)|答案(1)|浏览(120)

我的项目中有一个本地存储的json，它是一个包含大约200多个项目的数组。
示例：data.js

const data = [
  {
    title: 1
  },
  {
    title: 2 
  },
  ...
  {
    title: 200
  }
];

字符串
我的组件：

import {data} from "../mocks/data.js";

型
我正在考虑一种方法，使用json数据一段时间，直到我有一个数据库设置，但导入200多条记录减慢了页面。
有没有一种方法可以延迟加载本地json数据？

1条答案

首先，您的示例是一个JavaScript对象，而不是JSON。
其次，The use hook可以帮助您解决这个问题。

import { use } from 'react';

const data = use(import('./data.json'))

字符串
此外，还有一个名为json-loader的第三方模块用于读取JSON数据，该模块已经包含在create-react-app中。

import customData from '../customData.json';

型
恕我直言，我不认为在JSON中导入200多条记录**会显着减慢页面速度，但是一旦你将模拟数据转换为JSON，这些解决方案可能会帮助你。