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

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

Поскольку React 16.8 в 2019 году с 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)} />

Ответ 5

Это было какое-то время, но для дальнейшего использования: можно использовать метод shouldComponentUpdate().

Обновление может быть вызвано изменениями реквизита или состояния. Эти методы Вызываются в следующем порядке, когда компонент повторно вынесено:

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

ссылка: https://reactjs.org/docs/react-component.html