Как проверить, обновлен ли компонент React?

Question

У меня есть компонент, который регулярно обновляется, и я хотел бы создать функцию полезности вне этого компонента, где ему необходимо обновить свое внутреннее состояние при обновлении компонента.

Например:

class Sample extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { counter: 1 }; 
    } 
} 

class Utility { 
    constructor(componentInstance) { 
    this.internalNum = // computedInstance's internal counter state (how?) 
    // and when the component has updated, I'd like to change the internalNum (how?) 
    } 
} 

Я знаю, что это может быть достигнуто, если бы я передать функции Utility в функцию Sample и имеет Sample обновленного Utility на основе методов жизненного цикла РЕАКТА, но я не хочу ввести такую ​​зависимость в Sample.

Возможно, здесь есть лучший шаблон дизайна ... или если все в порядке, как это работает?

Answer 1

Возможно есть лучший шаблон дизайна здесь

В основном вы должны вклиниться в том, что Sample вызовы setState с новым значением. Такую вещь лучше всего показывать Sample (в качестве обратного вызова или события).

В качестве альтернативы вы можете перемещать состояние из Sample в глобальное место, например. используя redux.

Больше

https://github.com/reactjs/redux

Answer 2

Я согласен с @basarat, что вы должны реализовать Redux только потому, что вы всегда должны осуществлять Redux (потому что это качается). Во всяком случае, можно сделать обходной путь в этом сценарии, используя статические свойства.

var _counter; 

class Sample extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { counter: 1 }; 
    _counter = 1; 
    } 

    updateCounter() { 
    var newCounter = this.state.counter + 1 

    this.setState({ counter: newCounter }); 
    _counter = newCounter; 
    } 

    static get counter() { return _counter; } 
} 

class Utility { 
    constructor(componentInstance) { 
    this.internalNum = Sample.counter; 
    } 
}