javascript - React 实例值或 State 以进行较小的 UI 更新

Question

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

想象一下当服务器请求尚未返回时将 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 设置为刷新组件的额外 WORK 状态，而不是使用实例值？我可能会遇到哪些麻烦？例如，除了拥有中央商店之外，我还能获得什么好处？

Answer 1

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

如果您的 UI 依赖于 searching，您需要将其置于 state，否则 React 将不知道 searching 值已更改.

React 已经非常高效，在您实际遇到任何性能问题之前无需考虑太多。