React hook là tính năng mới, hứa hẹn rất nhiều thú vị được giới thiệu trong bản React 16.8. Với React hooks, bạn sẽ có trong tay nhiều cộng cụ hơn để phát triển ứng dụng web của mình.
Nếu bạn muốn sử dụng state hoặc các hàm liên quan đến lifecycle, thông thường bạn sẽ phải sử dụng React.Component. Với Hook thì khác, bạn hoàn toàn có thể sử dụng chúng trong các function component.
Điều này sẽ khiến các components gọn nhẹ hơn, giảm lượng code thừa thãi. Đặc biệt, các bạn có ít kinh nghiệm với Javascript sẽ dễ tiếp cận với React hơn.
💦 Mời bạn: Series tự học Javascript trong 10 tiếng
Bài viết này chúng ta sẽ cùng tìm hiểu React Hook là gì? Cách sử dụng Hook cặn kẽ nhé.
Nội dung chính của bài viết
Hook là gì?
Hook hay còn gọi là React Hooks là khái niệm được nhà phát hành React giới thiệu từ 6/2019. Dưới đây là video giới thiệu React Hooks.
Nói một cách ngắn gọn và đơn giản thì React Hooks là một ý tưởng, là cách để thêm các tính năng của React.Component vào functional components. Các tính năng đó có thể kể như:
- State
- Lifecycle component.
React hook ra đời không phải là để xóa bỏ các class. Mà Hook đơn giản là thêm một giải pháp để lập trình viên có nhiều cách viết code hơn.
Nếu bạn đang tạo một function component, rồi chợt nhận ra bạn cần thêm state vào chúng. Nếu trước đây bạn cần phải chuyển nó thành một class. Bây giờ bạn có thể sử dụng hook bên trong function component đã sẵn có.
Function component là gì?
Trong phần định nghĩa trên, chúng ta có nhắc tới function component đúng không? Nhưng bạn đã biết function component là gì chưa? Để các bạn có thể dễ theo dõi nội dung bài viết này, mình sẽ nhắc lại khái niệm function component.
Function component là các component không có liên kết với React component. Chúng đơn thuần chỉ chứa các function javascript.
const MyComponent = ({ name, quote }) => {
const myFunction = (name, quote) => {
return ${name} commands ${quote}
}
return (
<p>{ myFunction(name, quote) }</p>
)
}
Tuy nhiên, vì cách này không có hàm khởi tạo constructor, cũng không extend từ một React component nên nó không thể sử dụng được những hàm của React, cũng không có state luôn (do đó, nó mới có tên khác là stateless component). Và đây là mảnh đất cho React Hook dụng võ.
Phần tiếp theo, chúng ta sẽ cùng nhau tìm hiểu một số hooks trong React Hooks.
State Hook
Giả sử, chúng ta có một component như sau:
import React, { Component } from 'react';
class JustAnotherCounter extends Component {
state = {
count: 0
};
setCount = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.setCount}>Count Up To The Moon</button>
</div>
);
}
}
Với React Hooks, bạn hoàn toàn có thể chuyển thành function component như sau:
import React, { useState } from 'react';
function JustAnotherCounter() {
const [count, setCount] = useState(0);
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>Count Up To The Moon</button>
</div>
);
}
Nhìn vào đoạn code trên, với người ít kinh nghiệm Javascript sẽ cảm thấy “dễ thở” hơn rất nhiều.
Hàm useState() để làm gì?
Bạn có thấy lạ lẫm với cú pháp hàm useState() không?
useState dùng để khai báo một “state variable” (biến state). Bạn đặt tên biến này là count. Tuy nhiên, bạn có thể đổi tên nói thành bất kỳ tên nào cũng được, ví dụ banana. Đây là cách để “lưu giữ” các giá trị giữa các lần gọi hàm.
useState tương tự như cách bạn sử dụng this.state trong class.
useState có thể hiểu là cách destructuring một array (từ chuyên ngành gọi là array destructuring). Với Object cũng có khái niệm tương tự: Object destructuring.
Chúng ta thử so sánh giữa object destructuring vs array destructuring, xem tại sao array destructuring lại hữu ích hơn nhé. Việc thực hiện Object destructuring yêu cầu viết code nhiều hơn để lấy một biến và đổi tên nó.
Object Destructuring
// object destructuring. lots of writing!
const users = { admin: 'chris', user: 'nick' };
// grab the admin and user but rename them to SuperAdmin and SuperUser
const { admin: SuperAdmin, user: SuperUser } = users;
Array Destructuring
// array destructuring const users = ['chris', 'nick']; // grab in order and rename at the same time const [SuperAdmin, SuperUser] = users;
Với array destructuring thì nhìn có vẻ đơn giản hơn, bạn chỉ cần quan tâm tới thứ tự của các phần tử thôi.
useState cung cấp cho chúng ta 2 biến. Tât nhiên, bạn có thể đổi tên chúng tùy ý. Chỉ cần:
- Biến đầu tiên là value. Tương tự:
state - Biến thứ 2 là hàm để update giá trị value ở trên. Tương tự:
setState
Hàm useState nhận tham số gì?
Tham số duy nhất được truyền vào hook useState() là state ban đầu. Không giống như khai báo với Class, state không cần thiết phải là object mà có thể là số hoặc chuỗi.
Với ví dụ trên, ta chỉ cần biết người dùng click bao nhiêu lần, vì vậy ta truyền vào giá trị khởi tạo là 0. Nếu ta muốn lưu hai giá trị khác nhau, ta sẽ gọi useState() hai lần.
Effect Hook
Effect Hook cho phép thực hiện side effect bên trong các function component. Side-effects có thể là những thứ sau trong ứng dụng:
- Lấy dữ liệu – fetching data
- Thay đổi DOM.
- Cài đặt một subscription
- .v.v…
useEffect sẽ tương đương với các hàm componentDidMount(), componentDidUpdate() và componentWillUnMount() trong lifecycle của Component
Thực hành một chút nhé!
Tạo thêm tính năng mới: thay đổi giá trị title mỗi khi người dùng click chuột. Để làm điều này,chúng ta bổ sung effect hook vào đoạn code ở phía trên bài viết.
import React, { useState, useEffect } from 'react';
function JustAnotherCounter () {
const [count, setCount] = useState(0);
// Tương tự như componentDidMount và componentDidUpdate:
useEffect(() => {
// Cập nhập document title sử dụng browser API
document.title = You clicked ${count} times;
});
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>Count Up To The Moon</button>
</div>
);
}
useEffect đã làm gì?
Bằng cách sử dụng Hook này, chúng ta thông báo với React rằng: component này cần phải làm một việc gì đó sau khi render.
React sẽ lưu hàm bạn truyền vào (gọi là “effect”). Sau đó gọi lại hàm này sau khi DOM đã update.
Trong ví dụ effect ở đoạn code trên, chúng ta đã đổi title. Ngoài ra, chúng ta cũng có thể fetch data hoặc gọi các API khác.
Ưu điểm của React Hooks
Như chính nhà phát hành React tuyên bố, Hook không phải là giải pháp thay thế hoàn toàn Class. Hook chỉ là một giải pháp bổ sung để mọi người có nhiều lựa chọn hơn thôi.
Khi có nhiều lựa chọn, bạn sẽ “cân đo đong điếm” xem cái nào hơn. Dưới đây là một số lợi ích nếu bạn sử dụng Hooks.
Code ngắn gọn hơn
Ngay trong code minh họa của bài viết này, bạn thấy ngay là cách viết code sử dụng Hook ngắn gọn hơn rất nhiều so với Class.
Theo như chuyên gia Ryan: 90% code trở nên sạch sẽ hơn. Ứng dụng sau khi build cũng gọn nhẹ hơn hẳn.
Tính tương thích ngược
Việc sử dụng Hook hay không, hoàn toàn là do sở thích, yêu cầu dự án… Nếu không thích, bạn vẫn có thể sử dụng cách viết component kiểu Class. Bản thân nhà phát triển React cũng tuyên bố là không có phương án loại bỏ hoàn toàn Class.
Ngoài ra các dự án cũ khi được cập nhật lên phiên bản React nhất vẫn hoạt động bình thường. Hook chỉ bổ sung thêm, chứ không loại bỏ code cũ.
Tạm kết
Qua bài viết này, mình hi vọng các bạn có cái nhìn rõ nét hơn về Hook. Mội giải pháp nhằm đơn giản hóa việc viết ứng dụng với React.
Một trong những ưu điểm giúp Vue thành công và vươn lên mạnh mẽ đó chính là tinh đơn giản. Có lẽ các nhà phát triển React cũng nhận ra được điều đó. Hook chính là câu trả lời đầu tiên.
Cảm nhận của các bạn về Hook như thế nào? Bạn thích cách viết component kiểu function hay class hơn? Cho mình và mọi người biết ở phần bình luận nhé.
💦 Đọc thêm về ReactJS:
- Hướng dẫn học ReactJS trong 5 phút dành cho người mới
- Tài liệu học ReactJS tiếng việt – 2020
- Form validation Reactjs dễ dàng với Formik
Nguồn tham khảo:reactjs.org, scotch.io, ehkoo.com
Bình luận. Cùng nhau thảo luận nhé!