Giới thiệu về React Hooks (tóm tắt từ doc)
1. Giới thiệu về Hooks Hooks được giới thiệu trong bản React 16.8. Nó cho phép dev sử dụng state và các tính năng khác của React...
1. Giới thiệu về Hooks
Hooks được giới thiệu trong bản React 16.8. Nó cho phép dev sử dụng state và các tính năng khác của React mà không cần sử dụng class.
Với class component:
Với Hook:
=> nhìn dễ hiểu hơn phải không nào.
Function useState sẽ được trình bày ở sau, đây chỉ là ví dụ đưa ra để so sánh tạm thời.
2. Hooks xuất hiện mà không làm phá vỡ cấu trúc của các dự án React trước đó
+ Việc sử dụng Hooks hay class là do dev quyết định. Bạn có thể thử Hooks để tạo component mới trong dự án mà bạn đang dùng class mà không cần thêm xóa sửa gì. Hooks và class hoàn toàn có thể dùng để viết các components khác nhau trong cùng 1 dự án.
+ Hooks không tạo lên bất kì breaking changes ( sự thay đổi làm phá bỏ đi những thứ đã có ) nào.
+ Hooks được release từ bản v16.8.0. Vì vậy bạn phải chắc chắn update React, ReactDOM ... lên phiên bản thích hợp để sử dụng.
3. React không hề có dự định nào về việc xóa bỏ classes.
4. Hooks là tính năng mới tuy nhiên nó hoạt động trên kiến thức mà bạn đã biết về class. Hooks cung cấp một cách tiếp cận dễ dàng hơn về props, state, context, refs, lifecycle.
5. Động lực
Khó để tái sử dụng logic giữa các state của các component
React không cung cấp cho ta cách để thêm các hành vi có thể tái sử dụng vào một component (ví dụ kết nốt vào 1 store). Các pattern được dùng là render props hay higher order components để giải quyết vấn đề này. Tuy nhiên cách này làm cho code của chúng ta trở lên cồng kềnh hơn, bởi việc tạo lên các "wrapper hell" cho components.
Với Hooks, bạn có thể tách stateful logic ra một component khác, vì vậy nó sẽ không bị phụ thuộc và có thể dễ dàng tái sử dụng. "Hooks allow you to reuse stateful login without changing your component hierarchy". Chúng ta sẽ thảo luận nhiều hơn về nó trong phần custom hook.
Với các components phức tạp khiến code của bạn khó hiểu
Với class, để fetching data, cần dùng đến componentDidMount (mounting), componentDidUpdate (updating), componentWillUnmount (unmounting). Quá nhiều thứ cần viết cho việc lấy dữ liệu về từ api.
Classes gây ra sự nhầm lẫn với cả con người lẫn máy tính
Link bài gốc: https://reactjs.org/docs/hooks-intro.html
Bài tiếp theo mình sẽ dịch vào ngày mai!
Khoa học - Công nghệ
/khoa-hoc-cong-nghe
Bài viết nổi bật khác
- Hot nhất
- Mới nhất