Question

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

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

Answer 1

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

相反，请尝试将逻辑移至程序的其他部分，并使渲染更多地是“事后思考”：其他所有操作的最终结果。

在没有真正了解您的目标的情况下，这是一个带有简单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")
);

CodeSandbox

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

改善进度条的不良表现

1 个答案: