Hooks là gì

     

Trong React Conf 2018 diễn ra tuần vừa mới rồi ở bang Nevada, Mỹ, nhóm cải tiến và phát triển React đã trình làng React Hooks - được cho phép sử dụng state và số đông hiệu ứng lề (side effects) mà không cần thiết phải khai báo ES6 class. Ý tưởng này tiềm ẩn sẽ thay đổi khá nhiều diện mạo của React, khiến các components trở đề xuất gọn dịu hơn, bớt đáng kể con số code, đôi khi giúp React dễ dàng tiếp xúc hơn với các lập trình viên có ít tay nghề với JavaScript.

Bạn đang xem: Hooks là gì

Không bỏ lỡ cơ hội đi tắt đón đầu, giaynamdavinci.com mời chúng ta nhào lên “chuyến tàu hứng khởi” để xem React Hooks là gì nhé.

GHI CHÚ quan tiền TRỌNGHooks vẫn còn đấy đang ở tiến trình RFC, phải những hàm hay thủ tục trong bài viết này có tác dụng sẽ biến đổi trong tương lai. Tuy nhiên, phát minh chung của Hooks chắc chắn rằng vẫn được giữ lại lại.

Nếu không phù hợp đọc lâu năm dòng, bạn cũng có thể xem hai videos dưới đây:


Sophie Alpert và Dan Abramov trình làng về React Hooks

Ryan Florence mang đến biết: cần sử dụng Hooks sút được 90% con số code


Tại sao phải bao gồm Hooks?

*

Khó khăn khi chia sẻ logic giữa những components

Trong React, việc thực hiện higher-order components và render props tương đối phổ biến khi chúng ta cần chia sẻ logic giữa các components cùng với nhau. Chẳng hạn, để mang redux actions thành methods, ta có connect(), hoặc khi cần làm việc với location, history, v.v… các bạn sẽ dùng withRouter(), hay vừa mới đây nhất là dùng render props để sử dụng React Context. Cho tới một ngày như thế nào đó, bạn đụng phải “wrapper hell” như vậy này.

Here's something for ya. Lol. Pic.twitter.com/ZWWAxMFpbZ

— Grex ⚛️ (
AndrewGrexa) September 27, 2018

Lifecycles có chức năng tạo bẫy cho người mới

Một trong những quy tắc thông dụng khi mong mỏi lấy tài liệu bằng AJAX vào React là gởi request vào componentDidMount(). Khi props gắng đổi, họ sẽ sử dụng giá trị mới và hotline lại hàm gửi request, nhưng lần này lại là vào componentDidUpdate(). Sau đó, đưa sử vào componentDidMount() bạn gọi setInteval() thì bạn phải hotline đến clearInteval(id) bên phía trong lifecycle componentWillUnmount() còn nếu như không muốn áp dụng bị rò rỉ bộ nhớ. Việc phải nhớ công dụng của từng lifecycle hoàn toàn có thể gây trở ngại và sản xuất bẫy cho những người mới làm cho quen với React.

ES6 class thiệt ra không thân thiện lắm

Ai đã có lần viết JS nhưng không đặt câu hỏi “What this is this?“. Khắp cơ thể mới làm quen với JavaScript lẫn những lập trình viên kì cựu chắc ít nhiều lần bám chưởng Error: "this" is undefined. Rất hoàn toàn có thể bạn đã gặp đoạn code như vậy này khi new làm quen với React.

constructor(props) super(props) // Hai mẫu dưới là chiếc oát đờ hợi gì vợi (ノ ゜Д゜)ノ ︵ ┻━┻ this.handleEmailChange = this.handleEmailChange.bind(this) this.handlePasswordChange = this.handlePasswordChange.bind(this)Vấn đề trên hoàn toàn có thể được giải quyết bằng phương pháp dùng hàm mũi tên khi khai báo cách làm trong class, song sẽ có chút ko tự nhiên.

Bên cạnh đó, rất nặng nề để thực hiện việc “rung cây” hay sa thải code chết (dead code elimination) với những phương thức của class. Thuộc với các lifecycles, ứng dụng sau khi build với minify vẫn chiếm dung lượng đáng kể.

Xem thêm: Download Bài Thuyết Trình Tiếng Anh Bằng Powerpoint, Slide Thuyết Trình Tiếng Anh Đẹp

Vậy React Hooks là gì?

*

Hooks là hầu như hàm được cho phép bạn “kết nối” React state cùng lifecycle vào những components áp dụng hàm. Với Hooks chúng ta cũng có thể sử dụng state và lifecycles nhưng mà không buộc phải dùng ES6 class. Hãy xem lấy một ví dụ sau về hook useState.

import useState from 'react'function Counter() // Hàm useState() nhận vào một trong những tham số là giá trị ban đầu // của state, trả về một cặp cất giá trị // bây giờ của state, cùng handler để đổi khác state đó. Const = useState(0) return ( div> p>You clicked count timesp> button onClick=() => setCount(count + 1)>Click mebutton> div> )Để tiếp cận vào những lifecycles, bọn họ có useEffect. Hook này có công dụng tương tự như componentDidMount, componentDidUpdate, với componentWillUnmount, cơ mà được gom lại thành một hàm duy nhất.

import useState, useEffect from 'react'function Example() const = useState(0) // y như componentDidMount và componentDidUpdate useEffect(() => document.title = `You clicked $count times` ) return ( div> p>You clicked count timesp> button onClick=() => setCount(count + 1)>Click mebutton> div> )Effect hook hoàn toàn có thể trả về một hàm, và hàm này sẽ được gọi để triển khai các tác vụ dọn dẹp, tương tự như componentWillUnmount().

useEffect(() => const id = setInteval(() => setCount(count + 1), 100) // Trả về một hàm để xóa inteval return () => clearInteval(id))Trong và một component, chúng ta cũng có thể sử dụng từng nào useState và useEffect tùy ý. Cơ mà bắt buộc các hooks này cần được đặt ở phía bắt đầu hàm, và không phía bên trong if, switch, vòng lặp for, while, hay trong số hàm lồng nhau.

function Counter(props) // Như vầy là không được if (props.shouldCount) const = useState(0) Hooks thoạt nhìn có vẻ rất là ảo diệu. Làm vắt nào React biết được useState() được điện thoại tư vấn ở component nào để render lại, vì chúng ta có truyền vào thương hiệu hàm tuyệt gì đâu? mà lại theo lời của acemarke, sống phía bên dưới useState() chuyển động như this.setState() và React có cơ chế để theo dõi từng component nhằm rerender mang đến đúng.

React hỗ trợ một cơ số hooks bao gồm sẵn mà bạn có thể tham khảo ngơi nghỉ đây. Bên cạnh đó, chúng ta cũng có thể tự viết hook của riêng rẽ mình. Phần này dài dòng yêu cầu hẹn chúng ta ở bài viết sau.

Xem thêm: Tuyển Tài Xế Riêng Cho Nữ Tại Bình Dương Lương Cao, Ổn Định, Việc Làm Tài Xế Lái Xe Cho Nữ Tại Bình Dương

Lợi ích của Hooks

Ngoài việc giải quyết và xử lý các vấn đề ở trên thì React Hooks còn có những ưu điểm như:

Code gọn nhẹ hơn

So sánh giữa các components áp dụng class và components thực hiện hàm, con số code bắt buộc viết chênh lệch nhau tương đối nhiều. Nếu bạn đã xem đoạn phim của Ryan sinh sống trên, 90% code trở nên thật sạch hơn. Ứng dụng sau thời điểm build cũng gọn nhẹ hơn hẳn.

Let's also compare how well these minify: pic.twitter.com/2C8ndprQPx

— BOOlean