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

Question

在React.js中，angular的$ watch函数等价是多少？

我想监听状态更改并调用类似getSearchResults（）的函数。

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

Answer 1

我没有使用过Angular，但是阅读上面的链接，似乎你正在尝试编写一些你不需要处理的东西。您在React组件层次结构中对状态进行了更改（通过this.setState（）），React将使您的组件重新呈现（有效地“监听”更改）。如果您想从层次结构中的另一个组件“监听”，那么您有两个选择：

1. 从普通父项传递处理程序（通过props）并让它们更新父项的状态，从而导致父项下面的层次结构被重新呈现。
2. 或者，为了避免层次结构中的处理程序爆炸，您应该查看flux pattern，它将您的状态移动到数据存储中，并允许组件监视它们的更改。 Fluxxor plugin对于管理这个非常有用。

Answer 2

当州改变时，将调用以下lifecycle methods。您可以使用提供的参数和当前状态来确定是否有意义的更改。

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

Answer 3

我认为你应该使用下面的组件生命周期，就好像你有一个输入属性，在更新时需要触发你的组件更新然后这是最好的地方，因为它将在渲染之前被调用你甚至可以更新组件状态是反映在视图上。

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

Answer 4

它已经有一段时间但是供将来参考：可以使用方法shouldComponentUpdate（）。

道具或州的更改可能导致更新。重新呈现组件时，将按以下顺序调用这些方法：

static getDerivedStateFromProps() 
shouldComponentUpdate() 
render()
getSnapshotBeforeUpdate() 
componentDidUpdate()

ref：https://reactjs.org/docs/react-component.html