Как вызвать функцию только при изменении свойства React?

Question

Я хочу показать модальное диалоговое окно (например, alert()) каждый раз, когда подписка Meteor отслеживается в React с withTracker, изменения.

Я пытался использовать Tracker.autorun отслеживать изменения, но не может определить, где в коде их разместить. Это не похоже на работу в Component конструктор и работает каждый раз, если помещен в render(),

Вот как выглядит мой код:

class Foo extends Component {
    render() {
        return (
            <h1>Example Header</h1>
            { this.maybeShowAlert() }
        );
    }

    maybeShowAlert() {
       // ONLY if bar has been updated
       alert('bar has changed');
    }
}

export default withTracker(() => {

    Meteor.subscribe('bar')

    return {
        bar: Bar.findOne({})
    };
})(Foo);

Answer 1

Раньше не пользовался Meteor, но если вы хотите что-то сделать в ответ на изменения состояния / поддержки, тогда componentDidUpdate() метод жизненного цикла для него. Например

componentDidUpdate(prevProps) {
    if (this.props.bar !== prevProps.bar {
        // bar prop has changed
        alert("bar changed);
    }
}

Answer 2

Если вы собираетесь использовать Tracker.autorunтогда лучшее место для звонка это в componentDidMountпотому что он вызывается только один раз после монтирования компонента. Вам нужно вызывать функцию трекера только один раз, так как функция трекера будет перезапускаться всякий раз, когда изменяются реактивные источники данных, от которых она зависит. В трекере есть функция, куда вы будете звонить maybeShowAlert в зависимости от стоимости bar вот так,

componentDidMount() {
    Tracker.autorun(() => {
        let bar = this.props.bar;
        if (bar) {
            this.maybeShowAlert();
        }
    }
}