Как прослушивать изменения состояния в react.js?

Что эквивалентно функции angular $ watch в React.js?

Я хочу прослушивать изменения состояния и вызывать такую ​​функцию, как getSearchResults ().

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

Я не использовал Angular, но, читая ссылку выше, кажется, что вы пытаетесь кодировать что-то, что вам не нужно обрабатывать. Вы вносите изменения в состояние в иерархии компонентов React (через this.setState ()), и React заставляет ваш компонент повторно визуализироваться (фактически «прослушивая» изменения). Если вы хотите «слушать» другой компонент в вашей иерархии, у вас есть два варианта:

1. Передайте обработчики вниз (через реквизиты) от общего родителя и попросите их обновить состояние родителя, в результате чего иерархия ниже родителя будет повторно отрисована.
2. В качестве альтернативы, чтобы избежать резкого увеличения количества обработчиков, каскадно спускающихся по иерархии, вы должны взглянуть на шаблон потока , который перемещает ваше состояние в хранилища данных и позволяет компонентам отслеживать их изменения. Плагин Fluxxor очень полезен для управления этим.

Следующие методы жизненного цикла будут вызываться при изменении состояния. Вы можете использовать предоставленные аргументы и текущее состояние, чтобы определить, изменилось ли что-то значимое.

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

Я думаю, вам следует использовать ниже Жизненный цикл компонента, как если бы у вас есть свойство ввода, которое при обновлении должно запускать обновление вашего компонента, тогда это лучшее место для этого, поскольку оно будет вызываться перед рендерингом, вы даже можете обновить состояние компонента, чтобы оно было отражается на представлении.

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

Начиная с React 16.8 в 2019 году с хуками useState и useEffect , следующее теперь эквивалентно (в простых случаях):

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

В 2020 году вы можете прослушивать изменения состояния с помощью хука useEffect следующим образом

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

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