Bagaimana cara mendengarkan perubahan keadaan di react.js?

Apa yang setara dengan fungsi $ watch sudut pada React.js?

Saya ingin mendengarkan perubahan status dan memanggil fungsi seperti getSearchResults ().

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

Saya belum pernah menggunakan Angular, tetapi membaca tautan di atas, sepertinya Anda mencoba kode untuk sesuatu yang tidak perlu Anda tangani. Anda membuat perubahan untuk menyatakan dalam hirarki komponen Bereaksi Anda (melalui this.setState ()) dan Bereaksi akan menyebabkan komponen Anda di-rendering ulang (secara efektif 'mendengarkan' untuk perubahan). Jika Anda ingin 'mendengarkan' dari komponen lain dalam hierarki Anda, maka Anda memiliki dua opsi:

1. Lewati penangan ke bawah (melalui alat peraga) dari orang tua biasa dan minta mereka memperbarui keadaan orang tua, menyebabkan hierarki di bawah orang tua dirender ulang.
2. Sebagai alternatif, untuk menghindari ledakan penangan yang menurunkan hierarki, Anda harus melihat pola fluks , yang memindahkan status Anda ke penyimpanan data dan memungkinkan komponen mengawasi perubahan. The Fluxxor Plugin ini sangat berguna untuk mengelola ini.

Metode siklus hidup berikut akan dipanggil ketika negara berubah. Anda dapat menggunakan argumen yang disediakan dan kondisi saat ini untuk menentukan apakah sesuatu yang bermakna berubah.

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

Saya pikir Anda harus menggunakan Siklus Hidup Komponen di bawah ini seolah-olah Anda memiliki properti input yang pada pembaruan perlu memicu pembaruan komponen Anda, maka ini adalah tempat terbaik untuk melakukannya karena akan dipanggil sebelum membuat Anda bahkan dapat melakukan pembaruan status komponen menjadi tercermin pada tampilan.

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

Sejak Bereaksi 16.8 pada 2019 dengan useState dan useEffect Hooks, berikut ini sekarang setara (dalam kasus sederhana):

AngularJS:

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

<input ng-model="name" />

Reaksi:

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

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

Menggunakan useState dengan useEffect seperti dijelaskan di atas adalah cara yang benar-benar tepat. Tetapi jika fungsi getSearchResults mengembalikan langganan maka useEffect akan mengembalikan fungsi yang akan bertanggung jawab untuk berhenti berlangganan. Fungsi yang dikembalikan dari useEffect akan berjalan sebelum setiap perubahan ke ketergantungan (nama dalam kasus di atas) dan pada perusakan komponen

Sudah lama tetapi untuk referensi di masa depan: metode shouldComponentUpdate () dapat digunakan.

Pembaruan dapat disebabkan oleh perubahan pada properti atau status. Metode-metode ini dipanggil dalam urutan berikut ketika komponen sedang dirender:

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

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