Як слухати зміни стану в react.js?

Який еквівалент кутової функції $ 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 Hooks, тепер є рівнозначним (у простих випадках):

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