Admin

12/09/2023

Share

React hook là tính năng mới, có nhiều điều thú vị được giới thiệu trong phiên bản React 16.8. Với React hooks, bạn sẽ có 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ì thông thường bạn sẽ phải sử dụng React.Component. Nhưng với Hook, bạn hoàn toàn có thể sử dụng chúng trong các function component.

Việc này sẽ làm cho các thành phần trở nên nhẹ nhàng hơn, giảm bớt việc viết code thừa. Đặc biệt, những người mới làm quen với Javascript sẽ dễ dàng tiếp cận với React hơn.

💦 Mời bạn: Chuỗi học tự Javascript trong 10 giờ.

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 chi tiết nhé.

Nội dung chủ yếu của bài báo.

React Hooks, còn được gọi là Hook, là một khái niệm được giới thiệu bởi nhà phát triển React vào tháng 6 năm 2019. Dưới đây là một video giới thiệu về React Hooks.

React Hooks là một cách để thêm các tính năng của React.Component vào các thành phần chức năng. Các tính năng này bao gồm:

React Hooks giúp bạn tận dụng các chức năng của React mà không cần sử dụng Class.

React Hook không ra đời để loại bỏ các class, mà nó chỉ đơn giản là cung cấp thêm một giải pháp cho lập trình viên để có nhiều cách viết code hơn.

Khi nào nên dùng móc?

Nếu bạn đang tạo một component theo hàm, và đột nhiên nhận ra rằng bạn cần thêm trạng thái vào đó. Trước đây, bạn phải chuyển nó thành một class. Nhưng bây giờ, bạn có thể sử dụng hook bên trong component theo hàm đã có sẵn.

Khái niệm Function component là gì?

Trong phần định nghĩa trên, chúng ta đã đề cập đến function component phải không? Tuy nhiên, bạn đã hiểu rõ về khái niệm function component chưa? Để giúp các bạn dễ dàng theo dõi nội dung bài viết này, tôi sẽ lặp lại khái niệm về function component.

Component chức năng là các component không có liên kết với React component. Chúng chỉ đơn giản chứa các hàm javascript.

const MyComponent = ({ name, quote }) => {
  const myFunction = (name, quote) => {
    return `${name} commands ${quote}`
  }
  return (
    
{ HàmCủaTôi(tên, câuTríchDẫn) }.
  )
}

Tuy nhiên, vì cách này không có constructor và không extend từ một React component, nên nó không thể sử dụng các hàm của React và không có state (do đó, nó được gọi là stateless component). Đây là lúc React Hook trở nên hữu ích.

Tiếp theo, chúng ta sẽ cùng nhau khám phá một số mắc kết trong React Hooks.

State. Hook

Giả sử, ta có một thành phần như sau:.

import React, { Component } from 'react';
class JustAnotherCounter extends Component {
  state = {
    count: 0
  };
  setCount = () => {
    this.setState.({ count: this.state.count + 1 });
  };
  render() {
    return (
        
{this.state.count}
        Count Up To The Moon
    );
  }
}

Bằng cách sử dụng React Hooks, bạn có thể dễ dàng chuyển thành một thành phần hàm như sau:.

import React, { useState. } from 'react';
function JustAnotherCounter() {
  const [count, setCount] = useState.(0);
  return (
      
{count}
       setCount(count + 1)}>Count Up To The Moon
  );
}

Nhìn vào đoạn code trên, với người mới làm quen Javascript sẽ cảm thấy “thoải mái” 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.

So sánh giữa object destructuring và array destructuring để hiểu tại sao array destructuring lại hữu ích hơn. Khi sử dụng object destructuring, ta cần viết nhiều code hơn để lấy và đổi tên một biế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;

Array destructuring giúp làm cho việc này trở nên đơn giản hơn, chỉ cần quan tâm đến thứ tự của các phần tử.

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:

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.

Hook tác động

Hook Effect cho phép thực hiện các tác động phụ bên trong các thành phần hàm. Các tác động phụ có thể bao gồm các yếu tố sau trong ứng dụng:

UseEffect tương đương với các hàm componentDidMount(), componentDidUpdate() và componentWillUnMount() trong vòng đời của Component.

Hiệu ứng chạy sau mỗi lần hiển thị, bao gồm cả lần hiển thị đầu tiên.

Hãy thực hành một chút nhé!

Thêm tính năng mới: khi người dùng click chuột, giá trị title sẽ được thay đổi. Để làm điều này, chúng ta sử dụng effect hook để bổ sung 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 (
      
{count}
       setCount(count + 1)}>Count Up To The Moon
  );
}

UseEffect đã thực hiện những gì?

Bằng việc sử dụng Hook này, chúng ta thông báo cho React biết rằng: sau khi render, component này cần thực hiện một công việc nào đó.

React sẽ lưu hàm mà bạn truyền vào (được gọi là “effect”). Sau đó, hàm này sẽ được gọi lại sau khi DOM đã được cập nhật.

Trong ví dụ về đoạn mã trên, chúng ta đã thay đổi tiêu đề. Bên cạnh đó, chúng ta cũng có thể lấy dữ liệu hoặc gọi các API khác.

Lợi ích của React Hooks

Theo tuyên bố của nhà phát hành React, Hook không được xem là thay thế hoàn toàn cho Class. Hook chỉ đơn giản là một giải pháp bổ sung để tăng thêm sự lựa chọn cho mọi người.

Khi đối diện với nhiều sự lựa chọn, bạn cần thận trọng đánh giá và chọn ra lựa chọn tốt nhất. Dưới đây là một số lợi ích mà việc sử dụng Hooks mang lại.

Code rút gọn hơn

Trong ví dụ code của bài viết này, bạn sẽ thấy rằng 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 đối xứng

Việc sử dụng Hook hay không hoàn toàn phụ thuộc vào sở thích và yêu cầu của dự án. Nếu không thích, bạn vẫn có thể sử dụng cách viết component theo kiểu Class. Nhà phát triển React cũng đã tuyên bố không loại bỏ hoàn toàn Class.

Các dự án cũ vẫn hoạt động bình thường khi được cập nhật lên phiên bản React mới nhất. Hook chỉ bổ sung thêm code, không loại bỏ code cũ.

Tổng kết tạm thời

Qua bài viết này, mình mong các bạn sẽ có cái nhìn sáng tạo hơn về Hook, một giải pháp để dễ dàng viết ứng dụng với React.