ReactJS - Các thành phần thứ tự cao hơn

Các thành phần 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 thành phần hiện có. Các chức năng này làpure, có nghĩa là chúng đang nhận dữ liệu và trả về 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 thành phần 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.

Higher Order Component(HOC) đang bao quanh thành phần "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 thành phần và trả về một thành phần khác bao bọc thành phần 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ácMyHOC là một hàm bậc cao chỉ được sử dụng để chuyển dữ liệu đến MyComponent. Chức năng này cóMyComponent, nâng cao nó với newData và trả về thành phần 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 ứng dụng, chúng tôi sẽ thấy rằng dữ liệu được chuyển đến MyComponent.

Note- Các thành phần 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.