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

React.js中与angular的$ watch函数等效的函数是什么？

我想听状态变化并调用类似getSearchResults（）的函数。

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

我没有使用过Angular，但是阅读了上面的链接，看来您正在尝试为不需要处理的内容编写代码。您对React组件层次结构中的状态进行更改（通过this.setState（）），React将导致您的组件重新呈现（有效地“侦听”更改）。如果要从层次结构中的另一个组件“监听”，则有两个选择：

1. 将处理程序从公共父级传递下来（通过props），并让它们更新父级的状态，从而导致父级下面的层次结构被重新呈现。
2. 另外，为避免处理程序在层次结构中层叠泛滥，您应该查看流通模式，该模式将您的状态移动到数据存储中，并允许组件监视它们的更改。该Fluxxor插件是管理这个非常有用的。

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

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

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

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

从2019年使用useState和useEffect Hooks的React 16.8 开始，以下内容等效（在简单情况下）：

AngularJS：

$scope.name = 'misko'
$scope.$watch('name', getSearchResults)

<input ng-model="name" />

反应：

const [name, setName] = useState('misko')
useEffect(getSearchResults, [name])

<input value={name} onChange={e => setName(e.target.value)} />

如上所述，将useState与useEffect一起使用绝对是正确的方法。但是，如果getSearchResults函数返回预订，则useEffect应该返回一个负责取消预订的函数。从useEffect返回的函数将在每次更改依赖项（在上述情况下为名称）之前运行，并且在组件销毁之前运行

已经有一段时间了，但供以后参考：可以使用shouldComponentUpdate（）方法。

更新可能是由于道具或状态的更改引起的。重新渲染组件时，将按以下顺序调用这些方法：

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

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