React Hooks – Có gì hấp dẫn?

0

React hooks 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 sang sử dụng React.Component và các class. 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 là giúp các bạn có ít kinh nghiệm với Javascript dễ tiếp cận với React hơn.

>>Mời bạn: Series tự học Javascript trong 10 tiếng

Để các bạn học React dễ dàng hơn, bài viết này chúng ta sẽ cùng tìm hiểu React Hook cặn kẽ nhé.

React Hooks là gì?

Dưới đây là video giới thiệu React Hooks của nhà phát hành.

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ư:

React Hooks cho phép bạn sử dụng các tính năng của React mà không cần các Class

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.

Khi nào nên sử dụng hook? 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 các hooks trong React Hooks.

Tìm hiểu 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). Biến này gọi là count nhưng ta có thể đổi tên nói thành bất kỳ tên nào cũng được. ví dụ gọi là 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, và chúng ta 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.

Tìm hiểu 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…
Effects chạy sau mỗi lần render, kể cả lần chạy render đầu tiên.

Chúng ta sẽ bổ sung đoạn code ở phía trên bài viết với effect hook. Chúng ta 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.

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”). và 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.

Lợi ích của việc sử dụng 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à thêm một giải pháp mới để 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 mấy code minh họa trong 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 mới có hỗ trợ Hooks vẫn có thể 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 code 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:

Nguồn tham khảo:reactjs.org, scotch.io, ehkoo.com

Dịch vụ phát triển ứng dụng mobile giá rẻ - chất lượng

Bình luận. Cùng nhau thảo luận nhé!

avatar
  Theo dõi bình luận  
Thông báo