react.jsで状態変化をリッスンする方法は？

React.jsで同等のAngularの$ watch関数は何ですか？

状態の変化をリッスンし、getSearchResults（）のような関数を呼び出したいです。

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

私はAngularを使用していませんが、上記のリンクを読んでいると、処理する必要のない何かをコーディングしようとしているようです。（this.setState（）を介して）Reactコンポーネント階層の状態を変更すると、Reactによってコンポーネントが再レンダリングされます（変更を効果的に「聞く」）。階層内の別のコンポーネントから「リッスン」する場合は、2つのオプションがあります。

1. 共通の親から（propsを介して）ハンドラーを渡し、それらに親の状態を更新させると、親の下の階層が再レンダリングされます。
2. または、階層の下位にあるハンドラーの爆発を避けるために、状態をデータストアに移動し、コンポーネントが変更を監視できるようにするフラックスパターンを確認する必要があります。Fluxxorプラグインは、これを管理するために非常に便利です。

状態が変化すると、次のライフサイクルメソッドが呼び出されます。提供された引数と現在の状態を使用して、意味のある何かが変更されたかどうかを判断できます。

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

更新時にコンポーネントの更新をトリガーする必要がある入力プロパティがある場合、コンポーネントのライフサイクルの下を使用する必要があると思います。レンダリングの前に呼び出され、コンポーネントの状態を更新して、ビューに反映されます。

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

で2019年16.8に反応するので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)} />

上記のようにuseEffectでuseStateを使用するのは完全に正しい方法です。ただし、getSearchResults関数がサブスクリプションを返す場合、useEffectはサブスクリプションの登録解除を担当する関数を返す必要があります。useEffectから返された関数は、依存関係（上記の場合は名前）が変更される前とコンポーネントが破棄される前に実行されます

しばらく経ちましたが、今後の参考のために、メソッドshouldComponentUpdate（）を使用できます。

更新は、小道具または状態の変更によって引き起こされる可能性があります。これらのメソッドは、コンポーネントが再レンダリングされるときに次の順序で呼び出されます。

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

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