时间戳

首页 > 解决方案 > 为次要 UI 更新反应实例值或状态

javascript - 为次要 UI 更新反应实例值或状态

问题描述

在我看来，每当我调用setStateReact 组件时，我相信至少需要做一些工作来刷新组件。将每个重要的动态变量存储在状态中是我迄今为止在社区中看到的一个利基。

searching想象一下这个在服务器请求尚未返回时将变量设置为 true 的非平凡代码。

fetchSearch = async (food) => {
        this.searching = true;
        const request = await client.get(`http://localhost:8081/food?q=${food}`);
        const results = await request.json();

        this.setState((state) => {
            this.searching = false;
            return { searchResult: results }
        });
    }


<Input showSpinner={this.searching}</Input>

正如您可能已经猜到的那样， 的值this.searching是是否应用加载 UI 动画 CSS 类的决定因素。

我的问题是，与使用实例值相比，是否真的值得通过刷新组件this.searching的额外工作来设置状态？我可能会遇到什么麻烦？例如，除了拥有中央商店之外，我还能获得什么好处？

标签： javascriptreactjsstate

解决方案

由于您已经在更新 的状态searchResult，因此更新另一个字段searching不会导致额外的重新渲染。

如果您的 UI 依赖于searching您，则需要将它放在 中state，否则 react 将不知道该searching值已更改。

React 已经非常高效了，在你真正遇到任何性能问题之前，无需过度思考。

推荐阅读