Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Tìm hiểu về HOC trong React: Một số Ví dụ

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called A Gentle Introduction to Higher Order Components in React.
A Gentle Introduction to Higher-Order Components in React

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Đây là phần thứ hai của loạt bài về Higher-Order Component (HOC). Hôm nay, tôi sẽ trình bày các pattern higher-order component hữu ích khác nhau và dễ cài đặt. Với HOC, bạn có thể trừu tượng hoá code dư thừa thành một lớp có thứ tự cao hơn. Tuy nhiên, tương tự như bất kỳ pattern nào khác, sẽ mất một thời gian để làm quen với HOC. Hướng dẫn này sẽ giúp bạn thu hẹp khoảng cách đó.

Yêu cầu trước tiên

Tôi khuyên bạn nên tìm hiểu phần đầu tiên của loạt bài nếu bạn vẫn chưa. Trong phần đầu tiên, chúng ta đã nói về những cú pháp cơ bản của HOC và mọi thứ bạn cần để làm quen với higher-order component.

Trong bài hướng dẫn này, chúng ta sẽ xây dựng dựa trên các khái niệm mà chúng ta đã đề cập đến trong phần một. Tôi đã tạo ra một số mẫu HOC hữu ích và bạn có thể kết hợp những ý tưởng này vào dự án của mình. Các đoạn code được cung cấp trong mỗi phần, và một bản demo của tất cả các HOC thực tế được thảo luận trong hướng dẫn này được cung cấp ở phần cuối của hướng dẫn.

Bạn cũng có thể fork mã nguồn từ repo GitHub của tôi.

Higher-Order Component trong thực tế

Vì HOC tạo mới một container component trừu tượng, đây là danh sách những thứ mà bạn thường có thể làm với chúng:

  • Bao một phần tử hoặc component xung quanh một component.
  • Trường tượng hoá State
  • Điều khiển props, ví dụ, thêm props mới và sửa đổi hoặc loại bỏ props hiện có.
  • Xác thực Props.
  • Sử dụng ref để truy cập các phương thức của instance.

Hãy nói về những điều này từng cái một.

HOC đóng vai trò là một Wrapper Component

Nếu bạn còn nhớ, ví dụ sau cùng trong bài hướng dẫn trước đó của tôi minh hoạ cách một HOC bao bao một InputComponent cùng với những component và các phần tử khác. Điều này có ích đối với việc styling và để sử dụng lại logic khi có thể. Ví dụ, bạn có thể sử dụng kỹ thuật này để tạo ra một loader indicator có thể tái sử dụng hoặc một hiệu ứng chuyển tiếp sẽ được kích hoạt bởi những sự kiện nhất định.

Loanding Indicator HOC

Ví dụ đầu tiên là một loading indicator được xây dựng bằng HOC. Nó kiểm tra xem một prop cụ thể có rỗng hay không và loading indicator được hiển thị cho đến khi dữ liệu được trả về.

LoadIndicator/LoadIndicatorHOC.jsx

LoadIndicator/LoadIndicatorDemo.jsx

Đây cũng là lần đầu chúng ta sử dụng tham số thứ hai dưới dạng input cho HOC. Tham số thứ hai tôi đặt tên la 'loadingProp', được sử dụng ở đây để nói với HOC rằng nó cần kiểm tra xem prop cụ thể đó có hiện hữu hay không. Trong ví dụ, hàm isEmpty kiểm tra xem loadingProp có rỗng hay không và một indicator được hiển thị cho đến khi props được cập nhật.

Bạn có hai lựa chọn để truyền dữ liệu xuống HOC, dưới dạng một prop (cách thường làm) hoặc dưới dạng một tham số cho HOC.

Đây là cách tôi lựa chọn một trong hai. Nếu dữ liệu không có phạm vi nào vượt quá phạm vi của HOC và nếu dữ liệu là tĩnh thì truyền chúng dưới dạng tham số. Nếu props có liên quan đến HOC và đồng thời wrap component thì truyền chúng dưới dạng props. Tôi sẽ khái quát thêm về vấn đề này trong bài viết thứ ba của tôi.

Trừu trượng hoá State và Điều khiển Prop

Trừu tượng hoá state có nghĩa là khái quát hoá state thành một higher-order component. Tất cả state management của WrappedComponent sẽ được xử lý bởi higher-order component. HOC thêm state mới và sau đó state được truyền xuống dưới dạng props đến WrappedComponent.

Higher-Order Generic Container

Nếu bạn để ý, ví dụ loader ở trên có một component tạo ra một yêu cầu GET bằng fetch API. Sau khi truy vấn dữ liệu, nó được lưu trong state. Tạo một yêu cầu API khi một component mount là một kịch bản phổ biến và chúng ta có thể tạo ra một HOC hoàn toàn phù hợp với vai trò này

GenericContainer/GenericContainerHOC.jsx

GenericContainer/GenericContainerDemo.jsx

State đã được khái quát hoá và giá trị của state đang được truyền xuống dưới dạng props. Chúng ta cũng đã tạo ra component có thể cấu hình được.

Nó nhận một đối tượng cấu hình dưới dạng một input cho biết thêm thông tin về API URL, phương thức và tên của state key nơi mà kết quả được lưu trữ. Logic được sử dụng componentWillMount() minh hoạ việc sử dụng một tên key động với this.setState.

Higher-Order Form

Đây là một ví dụ khác sử dụng trừu tượng hoá state để tạo ra một HOC form component.

CustomForm/CustomFormDemo.jsx

CustomForm/CustomFormHOC.jsx

Ví dụ này minh hoạ cách trừu tượng state có thể được sử dụng cùng với một component trình bày để làm cho việc tạo form được dễ dàng hơn. Ở đây, state là một component trình bày và là một input cho HOC. State ban đầu của form và tên của state cũng được truyền vào dưới dạng các tham số.

Tuy nhiên, lưu ý rằng nếu có nhiều props cùng tên, việc sắp xếp thứ tự là quan trọng và prop được định nghĩa sau cùng sẽ luôn luôn chiến thắng. Trong trường hợp này, nếu một component khác đẩy một prop được đặt tên là contact hoặc contactList thì sẽ dẫn đến xung đột tên. Vì thế bạn nên đặt namespace cho các props HOC của bạn để chúng không xung đột với các props hiện có hoặc sắp xếp thứ thự chúng theo cách mà props có thứ tự ưu tiên cao nhất được định nghĩa đầu tiên. Vấn đề này sẽ được khái quát sâu hơn trong bài viết thứ ba.

Điều khiển Prop bằng HOC

Điều khiển prop liên quan đến việc thêm props mới, thay đổi props hiện có hoặc bỏ chúng luôn. Trong ví dụ CustomForm ở trên, HOC truyền xuống một số props mới.

Tương tự, bạn có thể bỏ qua props luôn. Ví dụ ở dưới minh hoạ ngữ cảnh ngày.

Bạn cũng có thể xác thực hoặc lọc props bằng kỹ thuật này. Higher-order component quyết định khi nào một component con sẽ nhận props nào đó, hoặc chuyển người dùng đến một component khác nếu các điều kiện cụ thể không đúng.

Higher-Order Component để bảo vệ Route

Dưới đây là một ví dụ về bảo vệ route bằng cách bao component liên quan bằng một HOC component withAuth.

ProtectedRoutes/ProtectedRoutesHOC.jsx

ProtectedRoutes/ProtectedRoutesDemo.jsx

withAuth kiểm tra xem người dùng đã được xác thực hay chưa và nếu chưa, chuyển hướng người dùng đến /login. Chúng ta sử dụng withRouter là một thực thể của react-router. Thật thú vị, withRouter cũng là một HOC được sử dụng để truyền props match, location và history đã được cập nhật vào wrapped component mỗi lần nó kết xuất.

Ví dụ, nó đẩy đối tượng history dưới dạng props để từ đó chúng ta có thể truy xuất instance đó của đối tượng như sau:

Bạn có thể tìm hiểu thêm về withRouter trong tài liệu hướng dẫn react-router chính thức.

Truy xuất Instance thông qua Ref

React có một thuộc tính đặc biệt mà bạn có thể gắn vào một component hoặc một phần tử. Thuộc tính ref (ref có nghĩa là tham chiếu, viết tắt của reference) có thể là một callback gắn với một định nghĩa của component.

Callback được gọi sau khi component được mount và bạn có được một instance của component được tham chiếu dưới dạng tham số của callback. Nếu bạn không rõ cách ref hoạt động thì tài liệu hướng dẫn chính thức về Ref và DOM sẽ nói rõ hơn.

Trong HOC của chúng ta, lợi ích của việc sử dụng ref đó là bạn có thể có được một instance của WrappedComponent và gọi các phương thức của nó từ HOC. Điều này không phải là một phần của dataflow thông thường trong React bởi vì React thích giao tiếp thông qua props. Tuy nhiên, trong nhiều trường hợp bạn có thể thấy rằng cách làm này là có lợi. 

RefsDemo/RefsHOC.jsx

RefsDemo/RefsDemo.jsx

Thuộc tính callback ref lưu giữ một tham chiếu đến WrappedComponent.

this.instance có một tham chiếu đến WrappedComponent. Bây giờ bạn có thể gọi phương thức của instance để giao tiếp dữ liệu giữa các component. Tuy nhiên, hãy hạn chế sử dụng cách này và chỉ sử dụng khi cần thiết.

Demo cuối cùng

Tôi đã kết hợp tất cả các ví dụ trong bài này thành một demo duy nhất mà bạn có thể sử dụng ở bên dưới.

Tóm tắt

Đây là phần kết của bài hướng dẫn thứ hai về higher-order component. Hôm nay, chúng ta đã tìm hiều rất nhiều về các pattern HOC và các kỹ thuật và đi vào các ví dụ thực tế minh hoạ cách chúng ta có thể sử dụng chúng trong các dự án của chúng ta.

Trong bài phần thứ ba của loạt bài hướng dẫn, bạn sẽ học một số cách làm hay và phương pháp thay thế HOC mà bạn nên biết. Hãy nhớ đón theo dõi nhé. Hãy chia sẻ những cảm nghĩ của bạn trong phần bình luận bên dưới đây nhé.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.