GALAXY TECH
Chuyên gia Công nghệ
Thứ bảy, 12/05/2018 | 00:00 GMT+7

Giới thiệu nhanh về các thành phần thứ tự cao hơn của React

Khi bạn truyền một thành phần cho một hàm và nó trả về một thành phần mới, nó được gọi là thành phần bậc cao hơn (HOC). Nếu điều đó nghe có vẻ đơn giản, nó là! Và mã của bạn sẽ đơn giản hơn để sử dụng chúng.

Trong suốt bài đăng này, bạn sẽ thấy cách trừu tượng hóa thành phần bậc cao sẽ cho phép tác phẩm của bạn dễ đọc hơn, có thể tái sử dụng và có thể tổng hợp được.

Một số điều khoản

Trước khi tiếp tục, ta hãy xác định xem ta đang tạo một version cấp cao hơn là gì. Mặc dù bạn có thể thấy các định nghĩa này được sử dụng thay thế cho nhau, nhưng điều quan trọng là phải nhận thức được sự khác biệt của chúng:

  • Node : một phần tử HTML đã được gắn trên DOM. Trình duyệt của bạn đang hiển thị nó và JavaScript có thể điều khiển nó.
  • Instance : một version thời gian chạy của một lớp thành phần. Chúng được biểu diễn dưới dạng các đối tượng JavaScript trong bộ nhớ.
  • Phần tử : một chút đánh dấu mô tả một nút hoặc một thể hiện sẽ có. Trong React, chúng được chuyển sang các đối tượng JavaScript, đến lượt chúng trở thành các thể hiện trong thời gian chạy.
  • Thành phần : một sự trừu tượng trên một phần tử. Chúng có thể mang một số trạng thái bên trong và chúng có thể hoạt động khác nhau tùy thuộc vào các đạo cụ mà chúng nhận được. Khi được yêu cầu kết xuất, các thành phần sẽ trả về các phần tử.
  • Thành phần thứ tự cao hơn (HOC) : trừu tượng hóa trên một thành phần. Khi được cung cấp một thành phần (và có lẽ một số tham số khác), chúng trả về một thành phần mới.

Lặn trong

Giả sử ta sắp bắt đầu công việc trên trang user của ứng dụng. Ta biết đối tượng User của bạn trông như thế nào, nhưng ta vẫn chưa quyết định loại ủy quyền mà ta muốn sử dụng. Làm thế nào ta có thể tránh một số đau lòng sau này khi ta xác định đúng con đường để đi? Làm thế nào để ta dự đoán khả năng thay đổi ý định của bạn trong ba tháng khi trang đã hoàn thành?

Ta có thể bắt đầu với một hàm HOC đơn giản có tên withUser . Ta muốn hàm này bao quanh bất kỳ thành phần nào mà ta chuyển cho nó và cung cấp đối tượng User của ta làm chỗ dựa.

const withUser = WrappedComponent => {
  class WithUser extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        user: sessionStorage.getItem("user")
      };
    }
    render() {
      return <^>{...this.props} />;
    }
  }

  return WithUser;
};<^>

Giải thích:

  • Hàm của ta , withUser , lấy bất kỳ thành phần nào làm đối số.
  • Bên trong, ta tạo một lớp WithUser Component đọc đối tượng User từ sessionStorage và thêm nó vào trạng thái.
  • Hàm kết xuất trả về WrappedComponent dưới dạng phần tử mới với trạng thái hỗ trợ user .
  • Ta chuyển this.props bên ngoài vào WrappedComponent bên trong.

Ngoài ra, nếu trạng thái là không cần thiết, bạn nên sử dụng HOC chức năng:

const withUser = WrappedComponent => {
  const user = sessionStorage.getItem("user");
  return props => ;
};

Đưa HOC vào sử dụng

Khi ta muốn truy cập đối tượng User trên trang của bạn , ta có thể gọi withUser để bao bọc thành phần của trang:

const UserPage = props => (
  <div class="user-container">
    <p>My name is {props.user}!</p>
  </div>
);

export default withUser(UserPage);

Và điều đó làm được! withUser của ta nhận một thành phần làm đối số và trả về một thành phần có thứ tự cao hơn. Ba tháng kể từ bây giờ, nếu ta quyết định thay đổi mọi thứ, ta chỉ phải chỉnh sửa HOC của bạn .

Trong thế giới hoang dã

Nếu bạn không quen thuộc với HOC trước đây, bạn có thể đã gặp phải chúng mà không nhận ra! Một số ví dụ đáng chú ý:

  • connect(mapStateToProps, mapDispatchToProps)(UserPage) -redux : connect(mapStateToProps, mapDispatchToProps)(UserPage)
  • withRouter(UserPage) -router : withRouter(UserPage)
  • material-ui : withStyles(styles)(UserPage)

Tặng kem

Chức năng compose từ redux cho phép nhiều HOC được soạn thành một. Ví dụ:

import { compose } from 'redux';
// ... other imports

export default compose(
  withStyles(styles),
  withRouter,
  withUser
)(UserPage);

Trong trường hợp này, phong cách của ta , router, và sử dụng tất cả sẽ được truyền cho ta UserPage thành phần.

Tags:

Các tin liên quan