仅当 React 属性更改时如何调用函数？答案

【问题标题】：How do I call a function only when a React property changes?仅当 React 属性更改时如何调用函数？
【发布时间】：2019-02-08 14:49:43
【问题描述】：

我希望每次在 React 中使用withTracker 跟踪的 Meteor 订阅发生更改时显示一个模式对话框（例如 alert()）。

我曾尝试使用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);

【问题讨论】：

标签： reactjs meteor meteor-react meteor-tracker

【解决方案1】：

之前没有使用过 Meteor，但是如果你想响应状态/属性的变化，那么componentDidUpdate() 是它的生命周期方法。例如

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

【讨论】：

【解决方案2】：

如果您打算使用Tracker.autorun，那么最好的调用位置是componentDidMount，因为它只在组件被mounted 之后调用一次。您只需要调用一次跟踪器函数，因为跟踪器函数将在它依赖的反应数据源时重新运行changes。在跟踪器函数中，您将根据bar 的值调用maybeShowAlert，如下所示，

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

【讨论】：