Tại sao sử dụng Hook lại là điều tốt nhất dành cho React

Trước khi có Hook, nếu chúng ta tổ chức thành phần theo các phương thức Lifecycle, bắt buộc chúng ta phải viết một đoạn code ở các vị trí khác nhau.

• Cách tạo bảng từ dữ liệu JSON trong React

React Hook là một frond-end framework được áp dụng khá phổ biến vì chúng dễ đọc và dễ sử dụng. Kể cả những doanh nghiệp nhỏ hay công ty khởi nghiệp vẫn có thể áp dụng nó. Nhưng các class (lớp) của nó có thể sẽ khó hiểu và khó sử dụng hơn. Hook cho phép bạn sử dụng các tính năng của React mà không cần đến các class phức tạp này.

1. Nguồn gốc của React Hook

Ban đầu React chủ yếu sử dụng thành phần class nên đôi khi sẽ gây vất vả cho người dùng, vì bạn phải chuyển đổi giữa các class và thành phần bậc cao hơn. Với React Hook, lập trình viên sẽ không cần chuyển đổi hay sử dụng các thành phần chức năng. Sử dụng Hook giúp React dễ dùng hơn, vì bạn sẽ được làm việc với các dòng code và triển khai chức năng đơn giản. Nhà phát triển cũng có thể triển khai trạng thái React và Lifecycle Method (phương thức vòng đời) mà không cần viết class.

Dưới đây là các ví dụ code để minh họa class React Hook và thành phần chức năng:

• Minh họa class React 

import React, { Component } from ‘react’

export default class Hello extends Component {

    render() {

        return(

            <div>

            Hello World!

            </div>

        )

    }

}

• Minh họa thành phần chức năng React

import React from ‘react’

export default function Hello() {

    return (

        <div>

            Hello World!

        </div>

    )

}

So sánh cả hai ví dụ trên thì thành phần chức năng có code đơn giản hơn khi thực hiện cùng một vai trò. Bạn không cần phải cung cấp không gian cho một class sau đó mới gọi một render() hàm. React Hook mang lại rất nhiều lợi ích cho người dùng, nhưng nó có một điểm nổi bật là làm cho React Lifecycle Method (phương thức vòng đời React) dễ sử dụng hơn.

Lưu ý: Bạn không thể thao tác React Hook trên các thành phần của class.

2. Sử dụng Hook có giúp cho Lifecycle (vòng đời) React dễ dàng hơn?

Các React Lifecycle Method khác nhau trong React bao gồm: Mounting, updating, and unmounting.

• Mounting sẽ chèn các phần tử vào DOM
• Updating sẽ update các phần tử trong DOM
• Unmounting sẽ xóa các phần tử khỏi DOM

React Lifecycle Method

Ban đầu, bạn chỉ có thể sử dụng React Lifecycle Method này với thành phần class. Các code sẽ phải thiết kế rất cẩn thận, vì chúng khó viết hơn khi sử dụng Hook để triển khai như thành phần chức năng.

Ví dụ: Nếu bạn cố gắng tìm nạp dữ liệu người dùng bằng cách sử dụng một componentDidMount() thành phần trong class như trong đoạn code dưới đây:

import React, { Component } from ‘react’

import Axios from ‘axios’

export default class Hello extends Component {

    constructor(props) {

        super(props);

        this.state = { name: “”};

    }

    componentDidMount() {

        Axios.get(‘/api/user/name’)

        .then(response => {

            this.setState({ name: response.data.name })

        })

    }

    render() {

        return (

            <div>

                My name is {this.state.name}

            </div>

        )

    }

}

Tiếp theo, bạn hãy so sánh nó trong việc thực hiện điều tương tự với một thành phần chức năng bằng cách sử dụng dấu useState và useEffect trong đoạn code dưới đây:

import React, { useEffect, useState } from ‘react’

import Axios from ‘axios’

export default function Hello() {

    const [Name, setName] = useState(“”)

    useEffect(() => {

        Axios.get(‘/api/user/name’)

        .then(response => {

            setName(response.data.name)

        })

    }, [])

    return (

        <div>

            My name is {Name}

        </div>

    )

}

Đoạn code trên thu thập dữ liệu người dùng bằng cách sử dụng Axios API và in nó trên DOM. Các useEffect và useState Hook tạo ra code ngắn gọn và hoạt động đơn giản hơn thành phần class. Khi sử dụng React Lifecycle Method trong thành phần phân cấp, các lệnh componentDidMount(), componentDidUpdate(), componentWillUnmount() được xử lý riêng nhưng phản hồi của chúng thường rất máy móc.

4. Một số React Hook và chức năng của chúng

Trước khi có Hook, nếu chúng ta tổ chức thành phần theo các phương thức Lifecycle, bắt buộc chúng ta phải viết một đoạn code ở các vị trí khác nhau. Để giải quyết vấn đề này, React đã sử dụng các hàm có code dễ hiểu và linh hoạt hơn. Vấn đề tiếp theo chúng ta cần giải quyết là làm thế nào để thay đổi trạng thái của thành phần chức năng. Điều này đưa chúng ta đến Hook đầu tiên là: useState

4.1 UseStateHook

useState là một trong những React Hook phổ biến nhất giúp bạn chuyển các trạng thái trong một thành phần chức năng. Hãy xem đoạn code dưới đây:

const loadingTuple = React.useState(true)

const loading = loadingTuple[0]

const setLoading = loadingTuple[1]

loading // true

setLoading(false)

loading // false

Trong đoạn code trên, useState lấy một đối số duy nhất là Giá trị ban đầu của trạng thái, nó trả về một mảng, một State và một hàm để cập nhật trạng thái đó. Bây giờ, bạn đã có thể cập nhật State thành phần chức năng của mình. 

Phần tiếp theo, chúng sẽ xem xét giải quyết vấn đề thực hiện các Lifecycle trong một thành phần chức năng, nó được gọi là useEffect.

4.2 UseEffectHook 

Các useEffect giúp thực hiện yếu tố phụ trong thành phần chức năng. Tức là bất kỳ chức năng nào bạn cần chạy sau khi cập nhật DOM, nó sẽ thay thế các công việc bằng cách chạy một hàm khi biến thay đổi. UseEffect có hai đối số: Một hàm và một mảng. Hàm xác định “hiệu ứng phụ” nào sẽ chạy và mảng cho biết các biến, đối tượng,… để theo dõi các thay đổi.

Các React Hook khác

• UseContext(): Hook này giúp xây dựng một context API (API ngữ cảnh), bản thân nó là sử dụng để chia sẻ dữ liệu mà không cần chuyển props
• UseRef(): Cho phép bạn tham chiếu trực tiếp đến DOM trong thành phần chức năng
• UseReducer(): Lưu giá trị trạng thái hiện tại, nó có nét tương đồng với Redux
• UseMemo(): Đây là một Hook được sử dụng để trả về một giá trị đã lưu, tức là hàm của bạn trả về một giá trị được lưu trong bộ nhớ cache
• UseCallback: Hook này được sử dụng để tối ưu hóa quá trình render. Nó có chức năng đảm bảo một hàm không hiển thị lại lần nữa

Chúng ta thấy bằng cách cung cấp code đơn giản, ngắn gọn, dễ tổng hợp và rất linh hoạt. Các React Hook hỗ trợ cho các thành phần chức năng dễ dàng hơn rất nhiều. 

Hy vọng các kiến thức trong bài viết này sẽ mang lại giá trị hữu ích cho bạn trong quá trình làm việc với React.

>>> Nếu bạn đang có nhu cầu học lập trình trực tuyến, tìm hiểu ngay tại đây:

>>> Xem thêm các chủ đề hữu ích:

• Tất cả những điều bạn cần biết về khóa học lập trình tại FUNiX FPT
• 5 Điểm đáng chú ý tại khóa học lập trình trực tuyến FPT – FUNiX
• Từ A-Z chương trình học FUNiX – Mô hình đào tạo lập trình trực tuyến số 1 Việt Nam
• Lý do phổ biến khiến học viên nước ngoài chọn FUNiX
• Lưu ý để học blockchain trực tuyến hiệu quả cao tại FUNiX
• Lý do nữ giới nên chọn FUNiX để học chuyển nghề IT
• FUNiX trở thành đối tác của Liên minh Blockchain Việt Nam
• 3 lý do bạn trẻ nên học blockchain trực tuyến ở FUNiX

Công Sơn

Nguồn tham khảo: https://stackoverflow.blog/2021/10/20/why-hooks-are-the-best-thing-to-happen-to-react/