Передача внешних значений компоненту реакции

Question

Я пытаюсь сделать Dancing Bars для индикации уровня. Значения для уровня поступают с сервера (вне дерева компонентов). Я динамически создал компонент Dancing Bars и хочу обновить текущий уровень в миллисекундах.

Ниже я попытаюсь достичь его.

var global;

function changeValue(value){
     global = value; //Getting the updated value
}

class DancingBars extends React.Component {
    componentDidMount() {
    this.interval = setInterval(this.forceUpdate.bind(this), 40);  // forcely update the component at this rate
    }
    render() {
       if(global === undefined){
          global = 50;  //Set default value
       }
        return (
            <LevelMeter fillColor={global}></LevelMeter>
        );
    }
}

Как видно из моего кода, я получаю обновите значение в changeValue() function и передайте его компоненту DancingBars через global variable. Первоначально, когда компонент DancingBars монтируется в DOM, затем компонент принудительно обновляется с некоторой скоростью (изменяемой), глобальная переменная не определяется при рендеринге. Поэтому я написал этот код сравнения для установки уровня по умолчанию, когда значения еще не поступили. Когда значения начинают изменяться, он автоматически обновляет уровень и работает плавно.

Но это не очень хороший способ, так как я не могу провести его через событие, потому что оно запускается при монтировании компонента и потребляет больше CPU Cycles , что впустую и не хорошо. Я также попробовал через redux state, но он обновляется очень медленно, и это тоже не очень хорошая идея. Я не хочу, чтобы производительность снижалась.

Я создал компонент DancingBars динамически с array map function, и я также использую избыточность для управления состоянием. Так как значения в реальном времени, и я не хочу хранить их в состоянии избыточности.

Есть ли простой способ сделать, например, когда значение изменяется в функции changeValue () тогда, а затем только в компоненте DancingBars следует повторно сделать? Или как мне перехватить событие изменения значения в функции changeValue (), передать значение в качестве подпорки компоненту DancingBars и сделать что-то с методом жизненного цикла shouldComponentUpdate?

Answer 1

• переместить инициализацию за пределы render()
• принудительное повторное рендеринг только при изменении значения

Fe:

class DancingBars extends React.Component {
  state = {
    level: global === undefined ? 50 : global
  };

  componentDidMount() {
    this.interval = setInterval(this.tick, 40);  
  }

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

  // no binding needed
  tick = () => {
    if(global && (global != this.state.level)) setState({ level: global });
  }

  render() {
    return (
        <LevelMeter fillColor={this.state.level}></LevelMeter>
    );
  }
}

Вы можете попробовать использовать хуки (функциональные компоненты), такие как this

Вместо редукса вы можете попробовать использовать mobx (наблюдаемые). Mobx немного медленнее редукса.

Вы можете / должны использовать сокеты и обновлять только при поступлении данных.