Reat.js'de durum değişiklikleri nasıl dinlenir?

React.js'de açısalın $ watch işlevi eşdeğeri nedir?

Durum değişikliklerini dinlemek ve getSearchResults () gibi bir işlevi çağırmak istiyorum.

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

Angular'ı kullanmadım, ancak yukarıdaki bağlantıyı okuduğunuzda, ele almanız gerekmeyen bir şeyi kodlamaya çalıştığınız anlaşılıyor. React bileşen hiyerarşisinde durum değişiklikleri yaparsınız (this.setState () aracılığıyla) ve React bileşeninizin yeniden oluşturulmasına neden olur (değişiklikleri etkili bir şekilde 'dinler'). Hiyerarşinizdeki başka bir bileşenden 'dinlemek' istiyorsanız, iki seçeneğiniz vardır:

1. İşleyicileri ortak bir üst öğeden aşağı (sahne aracıyla) aktarın ve üst öğenin durumunu güncellemelerini sağlayarak üst öğenin altındaki hiyerarşinin yeniden oluşturulmasına neden olun.
2. Alternatif olarak, hiyerarşide basamaklı işleyicilerin patlamasını önlemek için , durumunuzu veri depolarına taşıyan ve bileşenlerin değişiklikleri izlemek için izlemesine izin veren akı modeline bakmalısınız . Fluxxor eklentisi bu yönetmek için çok yararlıdır.

Durum değiştiğinde aşağıdaki yaşam döngüsü yöntemleri çağrılır. Anlamlı bir şeyin değişip değişmediğini belirlemek için sağlanan bağımsız değişkenleri ve geçerli durumu kullanabilirsiniz.

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

Güncellemede bileşen güncellemenizi tetiklemesi gereken bir girdi özelliğiniz varmış gibi Bileşen Yaşam Döngüsü altında kullanmanız gerektiğini düşünüyorum. görünümde yansıtıyordu.

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

2019'da useState ve useEffect Hooks ile React 16.8 olduğundan , aşağıdakiler artık eşdeğerdir (basit durumlarda):

angularjs:

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

<input ng-model="name" />

Tepki:

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

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

UseState with useEffect uygulamasını yukarıda açıklandığı gibi kullanmak kesinlikle doğru yoldur. Ancak getSearchResults işlevi abonelik döndürürse useEffect, aboneliği iptal etmekten sorumlu bir işlev döndürmelidir. UseEffect işlevinden döndürülen işlev, bağımlılıktaki her değişiklikten önce (yukarıdaki durumda ad) ve bileşen yok etme durumunda çalışır

Bir süre oldu, ancak ileride başvurmak için: shouldComponentUpdate () yöntemi kullanılabilir.

Güncelleme, sahne veya durum değişikliklerinden kaynaklanabilir. Bir bileşen yeniden oluşturulduğunda bu yöntemler aşağıdaki sırayla çağrılır:

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

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