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

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

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

1. 从公共父级向下传递处理程序（通过props）并让它们更新父级的状态，从而导致父级下方的层次结构被重新渲染。
2. 或者，为了避免在层次结构中级联处理程序的爆炸式增长，您应该查看通量模式，它将您的状态移动到数据存储中，并允许组件观察它们的变化。该Fluxxor插件是管理这个非常有用的。

在 2020 年，您可以像这样使用 useEffect 钩子监听状态变化

export function MyComponent(props) {
    const [myState, setMystate] = useState('initialState')

    useEffect(() => {
        console.log(myState, '- Has changed')
    },[myState]) // <-- here put the parameter to listen
}

自 2019 年的 React 16.8 使用useState和useEffect Hooks以来，以下现在是等效的（在简单情况下）：

AngularJS：

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

<input ng-model="name" />

react：

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

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

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

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