javascript - 与 Redux 反应，获取图像并将其设置为状态切片的一部分时性能损失很大

Question

我有一个 React 应用程序，状态由 Redux 管理。

用户可以搜索游戏，并且在提交时会出现标题与查询大致匹配的大量结果。每次用户输入另一个查询时，以前的结果都会被新的结果替换。

在 5-6 次搜索后，应用程序的速度会大大降低。在第 7 次搜索后，它完全停止工作，Chrome 抛出“页面无响应”通知。

redux 切片如下所示：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import rawg from '../../apis/rawg';

const initialState = {
  results: [],
};

export const fetchGames = createAsyncThunk(
  'gamesSearch/fetchGames',
  async (query) => {
    const response = await rawg.get('/games', {
      params: {
        search: query,
      },
    });

    return response.data.results;
  }
);

const gamesSearchSlice = createSlice({
  name: 'gamesSearch',
  initialState,
  reducers: {},
  extraReducers: {
    [fetchGames.fulfilled]: (state, action) => {
      const results = action.payload;

      const parsedResults = results.map((result) => {
        return {
          name: result.name,
          slug: result.slug,
          backgroundImage: result.background_image,
          genres: result.genres.map((genre) => genre.name).join(', '),
          id: result.id,
          released: result.released
            ? `${result.released.split('-')[2]}.${
                result.released.split('-')[1]
              }.${result.released.split('-')[0]}`
            : null,
        };
      });
    },
  },
});

export default gamesSearchSlice.reducer;

export const selectResults = (state) => state.gamesSearch.results;

从中分派 fetch 的组件如下所示：

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';

import { fetchGames } from './gamesSearchSlice';

const SearchBar = () => {
  const [query, setQuery] = useState('');
  const dispatch = useDispatch();

  const onSubmit = (e) => {
    e.preventDefault();

    if (!query) return;

    dispatch(fetchGames(query));
  };

  return (
    <div className="searchbar">
      <form onSubmit={onSubmit}>
        <input
          className="searchbar__input"
          type="text"
          placeholder="Search for a game..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
      </form>
    </div>
  );
};

export default SearchBar;

我是否遗漏了一些关于 React 和 Redux 如何协同工作的细节，或者从基础的角度来看我的代码有什么问题（意思是：我没有使用 JavaScript 足够有效地处理数据）？

标签： javascriptreactjsperformanceredux