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

Tìm hiểu các Thành phần Thứ tự Cao hơn là gì và chúng hữu ích như thế nào khi lập trình ứng dụng React

Bạn có thể quen với các Hàm thứ tự cao hơn trong JavaScript. Đó là những hàm chấp nhận hàm làm đối số và / hoặc hàm trả về.

Hai ví dụ về các chức năng đó làArray.map()hoặc làArray.filter().

Trong React, chúng tôi mở rộng khái niệm này cho các thành phần, và vì vậy chúng tôi cóThành phần thứ tự cao hơn (HOC)khi thành phần chấp nhận một thành phần làm đầu vào và trả về một thành phần làm đầu ra của nó.

Nói chung, các thành phần có thứ tự cao hơn cho phép bạn tạo mã có thể tổng hợp và tái sử dụng, đồng thời cũng được đóng gói nhiều hơn.

Chúng ta có thể sử dụng HOC để thêm các phương thức hoặc thuộc tính vào trạng thái của một thành phần, hoặcReduxcửa hàng chẳng hạn.

Bạn có thể muốn sử dụng Thành phần thứ tự cao hơn khi bạn muốn cải tiến một thành phần hiện có, hoạt động trên trạng thái hoặc đạo cụ hoặc đánh dấu được hiển thị của nó.

Có một quy ước về việc bổ sung trước Thành phần thứ tự cao hơn vớiwithstring (đó là một quy ước, vì vậy nó không bắt buộc), vì vậy nếu bạn cóButtonthành phần, đối tác HOC của nó sẽ được gọi làwithButton.

Hãy tạo một cái.

Ví dụ đơn giản nhất từng có về HOC là ví dụ trả về thành phần không thay đổi:

const withElement = Element => () => <Element />

Hãy làm cho điều này hữu ích hơn một chút và thêm một thuộc tính vào phần tử đó, ngoài tất cả các đạo cụ mà nó đã có, màu sắc:

const withColor = Element => props => <Element {...props} color="red" />

Chúng tôi sử dụng HOC này trong một JSX thành phần:

const Button = () => {
  return <button>test</button>
}
const ColoredButton = withColor(Button)

và cuối cùng chúng tôi có thể hiển thị thành phần WrappedButton trong JSX ứng dụng của chúng tôi:

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <ColoredButton />
    </div>
  )
}

Đây là một ví dụ rất đơn giản nhưng hy vọng bạn có thể nắm được ý chính của HOC trước khi áp dụng các khái niệm đó vào các tình huống phức tạp hơn.

Tải xuống miễn phí của tôiSổ tay React

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

Tìm hiểu các Thành phần Thứ tự Cao hơn là gì và chúng hữu ích như thế nào khi lập trình ứng dụng React

Các hướng dẫn về phản ứng khác: