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

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

在2020年，你可以用useEffect钩子监听状态的变化，如下所示

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

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

我没有使用过Angular，但是阅读上面的链接，你似乎在尝试编写一些你不需要处理的东西。你在React组件层次结构中对状态进行更改（通过这个.setState（）），React将导致你的组件被重新呈现（有效地“监听"更改）。如果你想”监听"层次结构中的另一个组件，那么你有两个选择：
1.从公共父级向下传递处理程序（通过属性），并让它们更新父级的状态，从而重新呈现父级下面的层次结构。
1.或者，为了避免处理程序在层次结构中的级联爆炸，您应该考虑flux pattern，它将您的状态移动到数据存储中，并允许组件监视它们的变化。Fluxxor plugin对于管理这一点非常有用。

自2019年React 16.8推出useState和useEffect Hooks以来，以下内容现在是等效的（在简单情况下）：
Angular JS：

$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)} />

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

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

如果您使用类似const [ name，setName ] = useState（' '）的钩子，您可以尝试以下操作：

useEffect(() => {
      console.log('Listening: ', name);
    }, [name]);

如上所述，使用useState和useEffect是绝对正确的方法。但是，如果getSearchResults函数返回订阅，那么useEffect应该返回一个负责取消订阅的函数。从useEffect返回的函数将在每次更改依赖项（上例中的名称）之前和组件销毁时运行

有一段时间没见了，但供以后参考：可以使用shouldComponentUpdate（）方法。
属性或状态的更改可能会导致更新。重新呈现组件时，将按以下顺序调用这些方法：

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

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

我使用这段代码来查看依赖项中的哪一个发生了变化。在许多情况下，这比纯useEffect要好。

// useWatch.js
import { useEffect, useMemo, useRef } from 'react';

export function useWatchStateChange(callback, dependencies) {
    const initialRefVal = useMemo(() => dependencies.map(() => null), []);
    const refs = useRef(initialRefVal);
    useEffect(() => {
        for(let [index, dep] of dependencies.entries()) {
            dep = typeof(dep) === 'object' ? JSON.stringify(dep) : dep;
            const ref = refs.current[index];
            if(ref !== dep) {
                callback(index, ref, dep);
                refs.current[index] = dep;
            }
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, dependencies);
}

在我的React组件中

// App.js
import { useWatchStateChange } from 'useWatch';
...
useWatchStateChange((depIndex, prevVal, currentVal) => {
  if(depIndex !== 1) { return } // only focus on dep2 changes
  doSomething("dep2 now changes", dep1+dep2+dep3);
}, [ dep1, dep2, dep3 ]);