ReactjS Hook và những điều mà lập trình viên cần biết

Khái niệm Reactjs Hook là gì?

React Hooks cho phép lập trình viên sử dụng trạng thái và các tính năng khác của React mà không cần phải xác định một lớp JavaScript. 

Nó giống như việc có thể tận dụng lợi thế của Pure Component và phương pháp vòng đời state và phương thức thành phần Lifecycle. Điều này là do Hooks chỉ là các hàm JavaScript thông thường! Do đó mã sẽ trở nên sạch sẽ và ít rắc rối hơn.

Ví dụ về mã có sử dụng reactJs Hook và không sử dụng ReactJs Hook”

Mã có reactJs Hook:

import './App.css';

import React, { useState } from 'react';

const HooksExample = () => {

    const [counter, setCount] = useState(0);

    return (

        <div className="App">

            <header className="App-header">

                The button is pressed: { counter } times.

                <button

                    onClick={() => setCount(counter + 1)}

                    style={{ padding: '1em 2em', margin: 10 }}

                >

                    Click me!

                </button>

            </header>

        </div>

    )

}

export default HooksExample;

Mã không có reactJs Hook:

import './App.css';

import React, { Component } from 'react';

export class NoHooks extends Component {

    constructor(props) {

        super(props;

        this.state = {

            counter: 0

        }

    }

    render() {

        const { counter } = this.state;

        return (

            <div className="App">

                <header className="App-header">

                    The button is pressed: { counter } times.

                    <button

                        onClick={() => this.setState({ counter: counter + 1 }) }

                        style={{ padding: '1em 2em', margin: 10 }}

                    >

                        Click me!

                    </button>

                </header>

            </div>

        )

    }

}

export default NoHooks;

Ưu điểm của ReactJs Hook

Mã khi sử dụng Reactjs Hook sẽ ngắn gọn và tiết kiệm không gian hơn. Ngoài ra nó cũng sẽ dễ đọc hơn rất nhiều, đó là một lợi thế lớn của Hooks. Đối với những người mới bắt đầu làm quen với React, họ sẽ dễ dàng đọc khối mã đầu tiên hơn và dễ dàng xem chính xác những gì đang xảy ra. 

Một điều tuyệt vời khác về hook là bạn có thể tạo ra hook của riêng mình! Điều này có nghĩa là rất nhiều logic trạng thái mà chúng ta từng phải viết lại từ thành phần này sang thành phần khác, giờ đây chúng ta có thể trừu tượng hóa thành một hook tùy chỉnh - và sử dụng lại nó .

ReactJs Hook useState

useState, như tên mô tả, là một hook cho phép bạn sử dụng state trong hàm của mình. Chúng ta có thể định nghĩa nó như sau:

const [someState, updateState] = useState (InitialState)

Cụ thể hơn:

• someState: cho phép bạn truy cập biến trạng thái hiện tại, someState
• updateState: chức năng cho phép bạn cập nhật trạng thái - bất cứ thứ gì bạn truyền vào nó đều trở thành một someState mới
• InitialState: những gì bạn muốn một someState trở thành khi kết xuất ban đầu

Bây giờ chúng ta đã hiểu định dạng cơ bản của useState và cách gọi và sử dụng nó, hãy quay lại ví dụ trước.

Trong ví dụ này , counter là biến trạng thái, setCount là hàm cập nhật và 0 là trạng thái ban đầu. Chúng tôi sử dụng setCount(counter + 1) để tăng số lượng khi nhấn nút, làm cho bộ counter + 1 thành giá trị mới của bộ counter. Ngoài ra, nếu chúng tôi muốn sử dụng trạng thái trước đó để cập nhật trạng thái hiện tại, chúng tôi có thể chuyển ở trạng thái cũ thành setCount:

setCount(prevCount => prevCount + 1)

Đây là một ví dụ đơn giản không phản ánh những gì chúng ta thường sử dụng trong một ứng dụng thực tế. Nhưng chúng ta hãy xem xét thứ mà chúng ta có nhiều khả năng sử dụng hơn - một biểu mẫu đăng nhập đơn giản cho email và mật khẩu:

import './App.css';

import React, { useState } from 'react';

const LoginForm = () => {

    const [email, setEmail] = useState('');

    const [password, setPassword] = useState('');

    return (

        const { handleSubmit } = this.props;

        <div className="App">

            <header className="App-header">

                <form onSubmit={handleSubmit}>

                    <input value={ email } onChange={(e) => setEmail(e.target.value) } />

                    <input value={ password } onChange={(e) => setPassword(e.target.value) } />

                    <button type="submit">Submit</button>

                </form>

            </header>

        </div>

    )

}

export default LoginForm;

ReactJs Hook useEffect

useEffect là một hook khác xử lý componentDidUpdate, componentDidMount và componentWillUnmount tất cả trong một lệnh gọi. Ví dụ: nếu bạn cần tìm nạp dữ liệu, bạn có thể sử dụngEffect để làm như vậy, như hình dưới đây.

import React, { useState, useEffect } from 'react';

import axios from 'axios';

import './App.css';

const HooksExample = () => {

    const [data, setData] = useState();

    useEffect(() => {

        const fetchGithubData = async (name) => {

            const result = await axios(`https://api.github.com/users/${name}/events`)

            setData(result.data)

        }

        fetchGithubData('lsurasani')

    }, [data])

    return (

        <div className="App">

            <header className="App-header">

                {data && (

                    data.map(item => <p>{item.repo.name}</p>)

                )}

            </header>

        </div>

    )

}

export default HooksExample;

Nhìn vào useEffect ta sẽ thấy

• Đối số đầu tiên: Một hàm. Bên trong nó, chúng tôi tìm nạp dữ liệu của mình bằng cách sử dụng một hàm không đồng bộ và sau đó đặt data khi chúng tôi nhận được kết quả.
• Đối số thứ hai: Một mảng chứa data. Điều này xác định khi thành phần cập nhật. Như tôi đã đề cập trước đây, useEffect chạy khi componentDidMount, componentWillUnmount và componentDidUpdate thường chạy. Bên trong đối số đầu tiên, chúng tôi đã thiết lập một số trạng thái, theo truyền thống sẽ khiến componentDidUpdate chạy. Kết quả là useEffect sẽ chạy lại nếu chúng ta không có mảng này. Bây giờ, useEffect sẽ chạy trên componentDidMount, componentWillUnmount và nếu data được cập nhật, componentDidUpdate. Đối số này có thể trống— bạn có thể chọn chuyển vào một mảng trống. Trong trường hợp này, chỉ componentDidMount và componentWillUnmount sẽ kích hoạt. Tuy nhiên, bạn phải chỉ định đối số này nếu bạn đặt một số trạng thái bên trong nó.

Trên đây là một số thông tin về Hook trong ReactJs bạn có thể tham khảo thêm để ứng dụng vào các dự án sắp tới của mình! Bạn cũng có thể tìm hiểu thêm thông tin về ReactJs qua khóa học lập trình ReactJs và các khóa học lập trình khác của Viện công nghệ thông tin T3H.