如何监听 react.js 中的状态变化？

Question

React.js 中 Angular 的 \( [watch](https://docs.angularjs.org/api/ng/type/\)rootScope.Scope#$watch) 函数等价物是什么？

我想监听状态变化并调用 getSearchResults() 之类的函数。

componentDidMount: function() {
    this.getSearchResults();
}

原文由 Eniz Gülek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我没有使用过 Angular，但是阅读上面的链接，您似乎正在尝试为不需要处理的东西编写代码。您在 React 组件层次结构中更改状态（通过 this.setState()），React 将导致您的组件重新渲染（有效地“监听”更改）。

如果您想从层次结构中的另一个组件“监听”，那么您有两个选择：

1. 从公共父级向下传递处理程序（通过道具）并让它们更新父级的状态，从而导致重新渲染父级下方的层次结构。

2. 或者，为了避免层级向下级联处理程序的爆炸式增长，您应该查看 Flux Pattern ，它将您的状态移动到数据存储中并允许组件观察它们的变化。 Fluxxor 插件 对于管理这个非常有用。

原文由 edoloughlin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

当状态改变时，将调用以下 生命周期方法。您可以使用提供的参数和当前状态来确定是否发生了有意义的更改。

 componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)

原文由 Derek Slager 发布，翻译遵循 CC BY-SA 3.0 许可协议