Các component thứ tự cao hơn
Các component bậc cao hơn là các hàm JavaScript được sử dụng để thêm các chức năng bổ sung vào component hiện có. Các hàm này thuần túy , có nghĩa là chúng đang nhận dữ liệu và trả về các giá trị theo dữ liệu đó. Nếu dữ liệu thay đổi, các hàm bậc cao hơn sẽ được chạy lại với đầu vào dữ liệu khác nhau. Nếu chúng tôi muốn cập nhật component trả về của mình, chúng tôi không phải thay đổi HOC. Tất cả những gì chúng ta cần làm là thay đổi dữ liệu mà hàm của chúng ta đang sử dụng.
Component thứ tự cao hơn (HOC) đang bao quanh component "bình thường" và cung cấp đầu vào dữ liệu bổ sung. Nó thực sự là một hàm nhận một component và trả về một component khác bao bọc component ban đầu.
Chúng ta hãy xem một ví dụ đơn giản để dễ dàng hiểu cách hoạt động của khái niệm này. Các MyHOC là một hàm bậc cao mà chỉ được sử dụng để truyền dữ liệu đến myComponent . Hàm này lấy MyComponent , nâng cao nó với newData và trả về component nâng cao sẽ được hiển thị trên màn hình.
import React from 'react';
var newData = {
data: 'Data from HOC...',
}
var MyHOC = ComposedComponent => class extends React.Component {
componentDidMount() {
this.setState({
data: newData.data
});
}
render() {
return <ComposedComponent {...this.props} {...this.state} />;
}
};
class MyComponent extends React.Component {
render() {
return (
<div>
<h1>{this.props.data}</h1>
</div>
)
}
}
export default MyHOC(MyComponent);
Nếu chúng tôi chạy app, chúng tôi sẽ thấy rằng dữ liệu được chuyển đến MyComponent .
Lưu ý - Các component bậc cao hơn có thể được sử dụng cho các chức năng khác nhau. Các hàm thuần túy này là bản chất của lập trình hàm. Khi bạn đã quen với nó, bạn sẽ nhận thấy ứng dụng của mình đang trở nên dễ dàng hơn để bảo trì hoặc nâng cấp.
Bài viết nổi bật
Bài viết nổi bật