改善进度条性能不佳

我正在尝试使用 MobX 存储将进度状态传递给其他进度栏。

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

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 存储是瓶颈，并且我没有在其他组件中使用该存储值。

谢谢你为我度过了黄金时光。

MobX 不太可能成为这里的瓶颈。更让人担心的是使用setState in the render方法。这几乎总是一个坏主意，因为setState总是会导致另一次渲染。因此，您最终可能会比实际意图更频繁地渲染，这肯定会影响性能。同样，您不想从内部更新您的 MobX 商店render，因为它很可能会触发另一次渲染。

相反，尝试将您的逻辑转移到程序的其他部分，并使渲染更像是“事后的想法”：您正在做的所有其他事情的最终结果。

在没有真正理解您的目标的情况下，这里有一个简单的 MobX 存储支持的演示。

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")
);

代码沙箱 https://codesandbox.io/s/dreamy-joliot-vhpen?fontsize=14

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