反应 setState 慢 [英] React setState slow

问题描述

所以我正在用 React 编写一个应用程序，结果是我有一个组件，它的状态有一个相当大的列表.我正在从网络获取一个 JSON 文件，然后将过滤后的副本直接存储到组件的状态.可能不是最佳解决方案，但我认为这仍然可以，React 应该可以处理它，我的意思是，它只有 10 kB.

无论如何，我决定向我的组件添加一个搜索输入并将其值存储到其状态.现在我有大列表和 searchInput 处于它的状态，我设置每个 onChange 并根据它过滤列表.

而且速度超级慢.每个 setState 都在刷新列表并对组件的每个子级和子级执行 componentUpdates，这基本上使搜索无法使用.

所以我的问题是如何解决这个问题?我应该将过滤后的列表存储在 redux 存储中而不是本地组件状态中吗?这似乎也不是一个很好的解决方案，因为我现在有一个全局 searchInput 值，我必须在休假时重置和删除它，我认为它作为本地值更好.

目前情况如下:

list ->组件 ->过滤器列表 ->孩子 ->将列表分成 4 个 ->子子->映射子列表 ->呈现列表项值

我还想添加额外的列表，其中包含显示哪些项目应该隐藏/显示的值，因此我不是操纵大列表，而是操纵较小的项目 ID 列表.尽管如此，这似乎有点愚蠢，这件事不应该这么难，我的意思是人们已经用 JS 和 HTML 做列表很长一段时间了.我正在考虑用 Vue 重新创建相同的组件，只是为了看看它会不会更好(我认为会更好).

解决方案

我明白了你的问题.实际上，慢的并不是 setState 而是渲染和您在所述状态下搜索事物的方式.

如果我是你，我会在两件事上投入时间:

1. 去抖动用于搜索

debounce 不会立即触发搜索，而是等待"一定的时间让用户停止输入，然后触发该功能.

这是 React 中的一个例子:

//你可以使用另一个.我以前刚用过这个，它有效从throttle-debounce"导入去抖动；class SearchBox 扩展了 React.Component {构造函数(道具){超级(道具)；//等待" 750 毫秒this.search = debounce(this.search, 750);}搜索() { ... }使成为() {<input type="text" onKeyUp={this.search}/>}}

2. 如果您有一个很大的列表，那么备忘录是一个不错的选择.为此，您可以使用 react-virtualized.

<块引用>

用于高效渲染大型列表和表格的 React 组件数据

您甚至可以在这里

3. 良好的 UI 设计和分页

react-virtualized List 组件只会呈现用户看到的内容.因此，如果您有一个不错的 UI 设计，那么您可以从一个非常大的值列表中提高很多性能.

很多时候这取决于您如何向最终用户显示数据.因此，您可以为数据添加分页，并通过分页链接或无限滚动功能获取更多信息.

希望对我有帮助

so I was programming an app with React and what happened is that I have a component with a fairly large list in its state. I am fetching a JSON file from network and then storing a filtered copy directly to component's state. Might be unoptimal solution BUT I think that's still okay and React should handle it I mean, it's just 10 kB.

Anyway I decided to add a search input to my component and store its value to its state. Now I have both the large list and searchInput in its state which I am setStating every onChange and filtering the list based on that.

And that is super slow. Every setState is refreshing the list and doing componentUpdates on every children and subchildren of the component which basically makes the search unusable.

So my question is how to fix this issue? Should I store the filtered list in the redux store instead of local component state? That doesn't seem that good a solution either as I have now a global searchInput value which I have to reset and delete on leave and which I think is better as local value.

Here's how it's currently:

list -> component -> filter list -> child -> split the list into 4 -> subchild -> map the sublist -> render the list item values

What I thought too was adding additional list with values showing which items should be hidden/shown so instead of manipulating the large list I am manipulating smaller list of item ids. Still that seems a bit silly, this thing shouldn't be this hard I mean people have been doing lists with JS and HTML quite a while now. I was thinking about re-creating the same component with Vue just to see would it be better (which I think it would).

解决方案

I see your problem. It's not actually the setState that is slow but actually the rendering and the way you search things in said state.

If I were you I would invest time in 2 things:

1. debounce for the searching

debounce doesn't trigger the search immediately but "waits" a set amount of time for the user to stop typing and then it triggers the function.

Here's an example in React:

// you can use another one. I've just used this one before and it works
import debounce from "throttle-debounce";

class SearchBox extends React.Component {
    constructor(props) {
        super(props);
        // "waits" for 750 ms
        this.search = debounce(this.search, 750);
    }

    search() { ... }

    render() {
      <input type="text" onKeyUp={this.search} />
    }
}

2. If you have a big list then memoization is a good bet. You can use react-virtualized for that.

React components for efficiently rendering large lists and tabular data

You can even access the List demo here

3. A good UI design and pagination

react-virtualized List component will only render what is being seen by the user. So if you have a nice UI design you can juice up a lot of performance from a really big list of values.

Many times it comes down to how you display data to your end-users. So you can add pagination to your data and fetch more either with pagination links or a infinite scroll feature.

Hope I helped

这篇关于反应 setState 慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！