Tại sao cần tạo nhiều class
Qua bài viết này chúng ta sẽ cùng trả lời 2 câu hỏi bạn cần đặt ra khi tiếp cận một đồ chơi mới như React Hook
1. Tại sao nó lại tồn tại trên trái đất này? 2. Nó tồn tại trên trái đất này có lợi ích gì không? Lịch sửTháng 5, 2013Nếu bạn còn nhớ về cách viết một component trong React bằng Tháng giêng, 2015Tổ chức Ác ma thế giới công bố chuẩn EcmaScript 2015, còn gọi với tên thân thương ES6. class chính thức có mặt trong javascript. Đội ngũ phát triển của React lúc
đó kết luận, chúng ta không cần phát minh lại cái bánh xe (don’t reinvent the wheel), cứ xài theo chuẩn đã có. Thế là từ đó chúng ta khai báo component bằng Khi khai báo component bằng Ngày xưa khi dùng Nếu nhìn vào các bạn sẽ nói, ồ cái này chả to tác gì đâu, chỉ là phải viết thêm mấy dòng ấy mà. Cũng vì lầm đường lạc lối theo class Ác ma mà React bị ko biết bao nhiều lời phàn nàn từ những lập trình viên khắp mọi nơi. Hên sao, không lâu sau đó Class Field được thêm vào trong
Vấn đề tồn đọngVấn đề đã được giải quyết tương đối ổn thỏa? Tuy nhiên vẫn còn vấn đề khác React team cảm thấy chưa hài lòng lắm phiên bản hiện tại. Ý tưởng chính của React là để chúng ta có thể quản lý những ứng dụng phức tạp bằng cách chia ra thành từng component nhỏ rồi kết hợp (compose) lại với nhau. Đây là cách làm tạo ra thương hiệu sáng ngời của React. Cách tiếp cận theo kiểu component chả có vấn đề gì, cách hiện thực những component hiện tại đang có vấn đề. Logic trùng lặpTrước đây chúng ta thiết kế component dựa rất nhiều vào component lifecycle. Chúng ta đặt để logic vào trong các từng lifecycle này, thí dụ như chúng ta cần phải gọi cùng một hàm bên trong cả 2 phương thức lifecycle Để giải quyết vấn đề side effect (hàm Chia sẽ logicKhi nghĩ về sự kết hợp giữa các component trong React, chúng ta sẽ nghĩ về cách các đối tượng UI kết hợp với nhau. Trong thực tế, viết một ứng dụng không phải chỉ bao gồm tầng UI, rất nhiều trường hợp chúng ta cần tái sử dụng logic, kết hợp các logic lại với nhau. Trước đây React chưa hề có cách nào đáp ứng được nhu cầu này. Ví dụ nếu có một component khác, nó cũng cần xài biến state
Rồi giờ có bất kỳ component nào muốn dùng
Hồi xưa chúng ta hay làm vậy, hoặc là dùng Render Props để chia sẻ những logic dùng tới dùng lui. Tuy nhiên, đây là cách tiếp cận không dành cho dân nghiệp dư, vì không phải dễ mà hiểu được cách tụi HOC nó chạy, thứ 2 nếu bạn cho chục mẹ bồng một đứa con thì sẽ sinh ra chuyện
Vận động não để hiểu đoạn này chạy kết quả thể nào.
Tóm lại những vấn đề trước mặt cần giải quyết là gì
Giải quyếtTừ React 0.14 chúng ta có 2 cách tạo component, dùng class hoặc dùng function. Nếu cần state và các lifecycle thì dùng class, nếu chỉ nhận props rồi trả về UI thì dùng function. Đó là cách chúng ta được dạy. Bác CTO John Carmack nói, em xin lỗi sửa câu văn của bác chút
React team, chân lý đây rồi, chúng ta tìm cách biến function component đáp ứng được những gì class component làm được đi. Với function component, chúng ta chả cần quan tâm tới Và thế là các hook của React ra đời: Để sử dụng state, chúng ta dùng hook là Lifecycle thì có thể bạn sẽ buồn (hoặc vui) khi nghe tin này. Nếu bắt đầu sử dụng React hook, function component, dẹp hết những gì bạn đã từng biết về lifecycle của component đi, quên đi những việc cần làm ở giai đoạn này, giai đoạn kia của component. Bạn hay tiếp cận cách tư duy khác hoàn toàn Đồng bộ hóa Thử nghĩ những gì bạn làm ở một sự kiện của lifecycle, có thể là đổi state, fetch dữ liệu, cập nhập DOM, tất cả đều gom về một mục đích duy nhất Đồng bộ hóa. Những gì chúng ta cần đồng bộ thường là những thứ nằm ngoài React (gọi API, DOM, đại loại như thế) với những thứ bên trong React (state) hoặc ngược lại Khi tiếp cận theo hướng đồng bộ hóa thay vì lifecycle event, nó cho phép chúng ta gom các logic liên quan lại với nhau. Để làm việc đó React cho chúng ta một Hook gọi là Theo định nghĩa,
Đoạn code trên sẽ chạy lại bất cứ khi nào giá trị state Để gọi lại
Như vậy, chúng ta đã có thể nói lời chia tay mãi mãi với Còn lại với cuộc chiến chống Higher-Order Component và Render Props. Để dùng lại logic, chúng ta sẽ vẫn dùng Hook, nhưng không phải do React làm sẵn cho xơi, chúng ta phải tự viết những custom Hook Giờ chúng ta sẽ viết một custom hook
Điều ngon lành ở đây là tất cả những gì liên quan
đến Sử dụng custom hook này trên các component khác nhau
Thật không thể tin được bạn có thể khai báo và setState bên trong một function bình thường. Chúng ta đã có một React mạnh mẽ với các đặc tính sau
Không những giải quyết vấn đề đang có, như cách mà các bạn làm marketing cho React tuyên truyền: sử dụng Hook để có TopDev via Vuilaptrinh |