Como ouvir alterações de estado no react.js?

Qual é a função $ watch do angular equivalente no React.js?

Quero ouvir alterações de estado e chamar uma função como getSearchResults ().

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

Eu não usei o Angular, mas ao ler o link acima, parece que você está tentando codificar algo que não precisa manipular. Você faz alterações no estado da hierarquia do componente React (via this.setState ()) e o React fará com que seu componente seja renderizado novamente (efetivamente 'ouvindo' as alterações). Se você deseja 'ouvir' de outro componente em sua hierarquia, você tem duas opções:

1. Passe os manipuladores (via adereços) de um pai comum e faça com que atualizem o estado do pai, fazendo com que a hierarquia abaixo do pai seja renderizada novamente.
2. Como alternativa, para evitar uma explosão de manipuladores em cascata na hierarquia, observe o padrão de fluxo , que move seu estado para armazenamentos de dados e permite que os componentes os observem quanto a alterações. O plugin Fluxxor é muito útil para gerenciar isso.

Os seguintes métodos de ciclo de vida serão chamados quando o estado for alterado. Você pode usar os argumentos fornecidos e o estado atual para determinar se algo significativo foi alterado.

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

Eu acho que você deveria usar abaixo o Component Lifecycle como se você tivesse uma propriedade de entrada que, na atualização, precisa acionar a atualização do componente, então este é o melhor lugar para fazer isso, pois será chamado antes de renderizar, você pode até atualizar o estado do componente para ser refletido na vista.

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

Desde o React 16.8 em 2019, com useState e useEffect Hooks, os itens a seguir são equivalentes (em casos simples):

AngularJS:

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

<input ng-model="name" />

Reagir:

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

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

Usar useState com useEffect, conforme descrito acima, é uma maneira absolutamente correta. Mas se a função getSearchResults retornar assinatura, useEffect deverá retornar uma função que será responsável por cancelar a assinatura. A função retornada de useEffect será executada antes de cada alteração na dependência (nome no caso acima) e na destruição do componente

Já faz um tempo, mas para referência futura: o método shouldComponentUpdate () pode ser usado.

Uma atualização pode ser causada por alterações nos adereços ou no estado. Esses métodos são chamados na seguinte ordem quando um componente está sendo renderizado novamente:

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

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