Bagaimana cara mendengarkan perubahan keadaan di react.js?

143

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

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

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

javascript reactjs

— Eniz Gülek
sumber

37

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:

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.
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.

— edoloughlin
sumber

3

Tetapi bagaimana dengan ketika Anda perlu mengambil data jarak jauh yang menggunakan (bagian dari) status sebagai parameter url / a?

— RnMss

@RnMss - lihat redux dan reduksi ( redux.js.org/docs/basics/Reducers.html ) dan pilih kembali ( github.com/reactjs/reselect ).

— edoloughlin

320

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)

— Derek Slager
sumber

5

Sedang perlu memicu metode ketika properti di komponen lain diperbarui (naik satu melalui callback, turun satu melalui prop), dan menambahkan componentDidUpdatekomponen dengan prop adalah resep yang tepat. Terima kasih untuk ini.

— Keith DC

Saya pikir ini adalah cara terbaik untuk menjamin pemberitahuan perubahan negara, yang diminta OP. Tetapi perhatikan bahwa tidak satu pun dari metode ini akan menyala setelah perubahan negara jika Anda memveto pembaruan di shouldComponentUpdate.

— MidnightJava

28

componentWillUpdatesedang tidak digunakan lagi: reactjs.org/blog/2018/03/27/update-on-async-rendering.html

— Dmitry Minkovsky

1

componentDidUpdatetidak akan memecat saat menerima alat peraga baru, tidak harus hanya ketika negara berubah?

— andy mccullough

1

componentWillUpdatesudah ditinggalkan.

— sean

29

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
  });
}

— Hasain
sumber

6

componentWillReceiveProps telah ditinggalkan: reactjs.org/docs/…

— John Skoumbourdis

14

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)} />

— Aprillion
sumber

2

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

— Shivang Gupta
sumber

1

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

— Malvinka
sumber

Anda harus mengembalikan boolean dari shouldComponentUpdatesehingga mungkin tidak cocok untuk kasus penggunaan ini.

— sean