Как сообщить компоненту, что он должен обновить - PullRequest
Новая
       10

Как сообщить компоненту, что он должен обновить

0 голосов
/ 01 июля 2019

Как видно из приведенного ниже кода, я проверяю каждые 100 мс (используя setInterval), было ли внесено изменение в convertProgress, и, если это так, компонент необходимо обновить. 

class TradingThing extends React.Component {
  componentDidMount() {
    const { convertProgress, setConvertProgress } = this.props.store; // mobx store
    this.interval = setInterval(() => {
         if(convertProgress < 100) {
             setConvertProgress(Math.min(convertProgress + 5, 100));
         }
    , 100);
  }

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

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

Как я могу справиться с этим?Можно ли вызывать пустую функцию каждые 100 мс?

Примечание. Мне не разрешено вызывать функцию setState в render, componentWillUpdate, componentDidUpdate и getSnapshotBeforeUpdate.

.

1 Ответ

1 голос
/ 01 июля 2019

Вместо опроса каждого 100ms лучше использовать некоторый механизм Publish-Subscribe .Этот механизм позволяет вам «уведомлять» ваш компонент о необходимости его обновления вместо постоянной (и избыточной) проверки необходимости обновления.

События в JavaScript являются хорошим примером шаблона публикации-подписки.

Есть много способов реализовать это, но вот базовый пример концепции: 

// This class is utilizing the publish-subscribe pattern
class ProgressUpdater {
  static subscribers = [];

  static publish(progress) {
    this.subscribers.forEach(s => s(progress));
  }

  static subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }
}

Тогда ваш процесс должен опубликовать свой прогресс, вызвав: 

ProgressUpdater.publish(progress);

И ваш компонент должен subscribe к событию обновления прогресса в componentDidMount: 

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

  componentDidMount() {
    ProgressUpdater.subscribe(progress => {
        this.setState({progress});
    })
  }

  render() {
    return (
      <div className='progress'>Progress: {this.state.progress}</div>
    )
  }
}

Вот скрипка , чтобы увидеть, как все это работает вместе

...