改善进度条的不良表现 [英] Improve poor progress bar performance

问题描述

我正在尝试通过MobX存储将进度状态传递给其他进度栏.

I am trying to pass progress state to other progress bar by using the MobX store.

有两个进度条.其中之一应该在短时间内(约2秒)独立变化.我使用setTimeOut增加了当前进度，并且效果很好.然后，我尝试将当前的进度值保存到MobX存储中，以传递给另一个组件.此后，进度条的性能下降.

There are two progress bars. One of them should be changing independently in a short period(about 2secs). I used setTimeOut to increase the current progress and it worked well. Then I tried to save the current progress value into the MobX store to pass to another component. After this, the performance of the progress bar was degraded.

render() {
...
if (tradingProgress.progress > 100) {
    this.setState(prevState => ({
        tradingProgress: {
            ...prevState.tradingProgress,
            progress: 100,
            },
    }));
} else if (tradingProgress.isTrading) {
    setTimeout(() => {
        this.setState(prevState => ({
            tradingProgress: {
                ...prevState.tradingProgress,
                progress: prevState.tradingProgress.progress + 5,
            },
        }));
    }, 100);
}

...
// save current progress to mobx store. 
// convertProgress, setConvertProgress are in my mobx store.
if (tradingProgress.progress !== convertProgress && tradingProgress.isTrading) {
     setConvertProgress(tradingProgress.progress); // in mobx store: this.convertProgress = currentProgress
}

我认为经常使用MobX存储是瓶颈，并且我没有在其他组件中使用该存储值.

I think using the MobX store frequently is the bottleneck, and I didn't use that store value in other components.

感谢您为我度过黄金时光.

Thanks for spending your golden time for me.

推荐答案

MobX不太可能成为此处的瓶颈.更令人担忧的是在render方法中使用setState.这几乎总是一个坏主意，因为setState总是会导致另一个渲染.因此，您最终可能会以比实际意图更多的方式渲染，这肯定会影响性能.同样，您也不想从render内部更新MobX存储，因为它很可能触发另一个渲染.

MobX is unlikely to be the bottleneck here. What's more worrying is the use of setState in the render method. This is almost always a bad idea, because setState always causes another render. So you could end up rendering way more often than you actually meant to, which can definitely impact performance. Likewise, you don't want to update your MobX store from inside render, as it's very likely to trigger another render.

相反，请尝试将逻辑移至程序的其他部分，并使渲染更多地是事后思考":您正在做的所有其他事情的最终结果.

Instead, try to move your logic to other parts of the program, and have rendering be more of an 'afterthought': a final consequence of everything else you're doing.

在没有真正了解您的目标的情况下，这是一个带有简单MobX商店支持的演示.

Without really understanding your goal, here's a demonstration with a simple MobX store backing it.

import React from "react";
import ReactDOM from "react-dom";
import { action, decorate, observable } from "mobx";
import { inject, Provider, observer } from "mobx-react";

class UIStore {
  convertProgress = 0;

  setConvertProgress = progress => {
    if (this.convertProgress < 100) {
      this.convertProgress = progress;
    }
  };
}

decorate(UIStore, {
  convertProgress: observable,
  setConvertProgress: action
});

const store = new UIStore();

class TradingThing extends React.Component {
  state = { progress: 0 };

  componentDidMount() {
    this.setState({ interval: setInterval(this.tick, 100) });
  }

  componentWillUnmount() {
    clearInterval(this.state.interval);
  }

  tick = () => {
    const { convertProgress, setConvertProgress } = this.props.store;
    const { progress } = this.state;

    setConvertProgress(convertProgress + 1);
    if (progress < 100) {
      this.setState({ progress: progress + 5 });
    }
  };

  render() {
    return (
      <>
        <div>Progress from component state: {this.state.progress}</div>
        <div>Progress from MobX state: {this.props.store.convertProgress}</div>
      </>
    );
  }
}

const TradingProgress = inject("store")(observer(TradingThing));

ReactDOM.render(
  <Provider store={store}>
    <TradingProgress />
  </Provider>,
  document.getElementById("root")
);

CodeSandbox

如您所见，render方法非常简单.通常这是一个好兆头！

As you can see, the render method is very simple. This is usually a good sign!

这篇关于改善进度条的不良表现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！