Làm thế nào để lắng nghe những thay đổi trạng thái trong Reac.js?

Hàm $ watch của angular tương đương trong React.js là gì?

Tôi muốn lắng nghe các thay đổi trạng thái và gọi một hàm như getSearchResults ().

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

Tôi chưa sử dụng Angular, nhưng đọc liên kết ở trên, có vẻ như bạn đang cố mã hóa thứ gì đó mà bạn không cần phải xử lý. Bạn thay đổi trạng thái trong hệ thống phân cấp thành phần React của bạn (thông qua this.setState ()) và React sẽ khiến thành phần của bạn được kết xuất lại (hiệu quả là 'lắng nghe' để thay đổi). Nếu bạn muốn 'lắng nghe' từ một thành phần khác trong hệ thống phân cấp của mình thì bạn có hai tùy chọn:

1. Truyền trình xử lý xuống (thông qua đạo cụ) từ cha mẹ chung và yêu cầu họ cập nhật trạng thái của cha mẹ, khiến cấu trúc phân cấp bên dưới cha mẹ được hiển thị lại.
2. Ngoài ra, để tránh sự bùng nổ của các trình xử lý xếp tầng xuống, bạn nên xem mô hình thông lượng , chuyển trạng thái của bạn vào các kho lưu trữ dữ liệu và cho phép các thành phần theo dõi chúng để thay đổi. Các Plugin Fluxxor là rất hữu ích cho việc quản lý này.

Các phương thức vòng đời sau đây sẽ được gọi khi trạng thái thay đổi. Bạn có thể sử dụng các đối số được cung cấp và trạng thái hiện tại để xác định xem điều gì đó có ý nghĩa thay đổi.

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

Tôi nghĩ bạn nên sử dụng bên dưới Vòng đời thành phần vì nếu bạn có thuộc tính đầu vào cần cập nhật để kích hoạt cập nhật thành phần thì đây là nơi tốt nhất để thực hiện vì nó sẽ được gọi trước khi kết xuất bạn thậm chí có thể cập nhật trạng thái thành phần phản ánh trên quan điểm.

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

Kể từ React 16.8 năm 2019 với useState và useEffect Hook, giờ đây là tương đương (trong trường hợp đơn giản):

AngularJS:

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

<input ng-model="name" />

Phản ứng:

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

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

Sử dụng useState với useEffect như mô tả ở trên là cách hoàn toàn chính xác. Nhưng nếu hàm getSearchResults trả về đăng ký thì useEffect sẽ trả về một hàm sẽ chịu trách nhiệm hủy đăng ký. Hàm được trả về từ useEffect sẽ chạy trước mỗi thay đổi thành phụ thuộc (tên trong trường hợp trên) và hủy thành phần

Đã được một thời gian nhưng để tham khảo trong tương lai: phương thức nênComponentUpdate () có thể được sử dụng.

Một bản cập nhật có thể được gây ra bởi những thay đổi về đạo cụ hoặc trạng thái. Các phương thức này được gọi theo thứ tự sau khi một thành phần đang được kết xuất lại:

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

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