REACTJS CĂN BẢN
REACTJS NÂNG CAO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Giới thiệu Hooks trong React JS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Hook trong React, và giới thiệu các hooks hay được sử dụng trong quá trình làm việc với React.

Khi làm việc với các React Component chúng ta cần phải thao tác rất nhiều với state, props hay life cycle. Và kể từ phiên bản 16.8 trở đi React cung cấp một chức năng mới đó là React Hooks, chức năng này cho phép thay thế việc sử dụng state thông thường bằng các khái niệm mới như useState, useEffect..

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Việc sử dụng React Hooks cho phép sử dụng state, hay các tính năng khác của React mà không cần phải viết một class component dài dòng.

1. React Hooks là gì?

react hook jpg

Chúng ta có thể hiểu React Hooks là một chức năng được xây dựng trong React cho phép chúng ta có thể sử dụng state và life cycle bên trong một functional components. Hooks đem lại một vài lợi ích khi làm việc như :

  • Cải thiện hiệu suất làm việc bằng cách có thể tái sử dụng code.
  • Các thành phần được trình bày khoa học hơn.
  • Sử dụng một cách linh hoạt trong component tree.

React Hooks đem lại cho functional components các tính năng cần thiết của component, nó có thể thay thế gần như hoàn toàn việc sử dụng class components. Ở đây mình có ví dụ để chứng minh điều đó.

Giả sử khi mình muốn xây dựng một component cho phép random các số nguyên từ 1 - 100. Khi chúng ta viết bằng class component thông thường sử dụng state thì các đoạn mã khá dài dòng:

import React, { Component } from 'react';

export default class RandomNumberComponent extends Component {
  constructor(props) {
    super(props)
    //Khởi tạo state
    this.state = {
      number: 0
    }
    this.randomNumber = this.randomNumber.bind(this)
  }
  randomNumber = () => {
    const number = Math.round(Math.random() * 100)
    //Cập  nhật state mới
    this.setState({
      number
    })
  }
  render() {
    return (
      <div style = {{padding: '10%'}}> 
        <b>{this.state.number}</b> <hr /> 
        <button onClick={this.randomNumber}>Random</button>  
      </div>
    );
  }
}

Nhưng khi chúng ta sử dụng React Hooks (cụ thể ở ví dụ bên dưới là sử dụng hook useState) sẽ nhanh hơn rất nhiều.

import React, { useState } from "react";

export default function RandomNumberComponent(props) {
  const [number, setNumber] = useState(0)

  return (
    <div style={{ padding: "10%" }}>
      <b>{number}</b> <hr />
      <button onClick={() => {
        setNumber(Math.round(Math.random() * 100))
      }}>Random</button>
    </div>
  );
}

Hai cách viết trên đều có một chức năng giống nhau nhưng khi chúng ta sử dụng React Hooks sẽ giúp giảm các đoạn mã và tài nguyên.

2. Hooks trong React JS cơ bản

Chúng ta có 10 hooks được xây dựng trong phiên bản React từ 16.8 trở đi. Nhưng trong bài này mình sẽ chỉ ra các hooks cơ bản hay được sử dụng bao gồm:

  • useState()
  • useEffect()
  • useContext()
  • useReducer()

Ở đây có 4 hooks cơ bản hay được sử dụng, bây giờ chúng ta sẽ đi tìm hiểu cơ bản nhất về các hooks này. Mình sẽ giới thiệu chi tiết cũng như ví dụ về từng hooks ở các bài viết tiếp theo.

useState()

Việc sử dụng useState() cho phép chúng ta có thể làm việc với state bên trong functional component mà không cần chuyển nó về class component. Ở ví dụ bên trên mình cũng đã sử dụng useState() để cập nhật state. Chúng ta có thể sử dụng nó bằng cú pháp:

const [tenSate, hamCapNhatState] = useState(giaTriBanDauCuaState);

Đây làm một hooks được sử dụng hầu như trong tất cả các funcitonal component.

useEffect()

useEffect() là function nắm bắt tất cả các sự thay đổi của code. Trong một function component, việc sử dụng life cycle không React hỗ trợ, bởi vậy rất khó để debug, cũng như nắm bắt được quá trình khởi chạy của component.

useEffect() sinh ra để làm điều này, nó được khởi chạy khi giá trị của một biến nào đó thay đổi, hay component đã được render ra,...useEffect() có thể thay thế hòan toàn các life cycle trong class component. Chúng ta có thể sử dụng nó bằng cú pháp :

useEffect(functionDuocKhoiChay, arrayChuaCacGiaTriThayDoi)

useContext()

useContext() cho phép nhận về giá trị của context mỗi khi nó thay đổi. Bạn có thể tham khảo bài viết về React Context để hiểu rõ hơn.

 const giaTriCuaContext = useContext(TenContext);

useReducer()

Hook useReducer được sử dụng để xử lý các state phức tạp và việc chia sẻ state giữa các component. Ở đây chúng ta có cú pháp.

const [state, dispatch] = useReducer(reducer, initialArg, init);

Tất cả các hooks mà được giới thiệu ở trên, sẽ được giới thiệu chi tiết và ví dụ cụ thể ở loạt bài viết tiếp theo.

Trên đây chúng ta đã cùng nhau đi tìm hiểu về React Hooks trong ReactJS. Đây là kiến thức rất cơ bản về nó nhưng cũng hết sức quan trọng trong quá trình làm việc với ReactJS sau này. Mong rằng bài viết sẽ giúp ích cho bạn.

Cùng chuyên mục:

Xây dựng Hook trong React JS (React Custom Hook)

Xây dựng Hook trong React JS (React Custom Hook)

React Hooks là một tính năng mới trong React 16.8. Cho phép sử dụng state…

Tạo ứng dụng ghi chú với ReactJS và Redux

Tạo ứng dụng ghi chú với ReactJS và Redux

Trong bài viết này mình sẽ hướng dẫn xây dựng một ứng dụng ghi chú…

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cho bạn nào chưa bíết thì Heroku mà môt nền tảng đám mây hỗ trợ…

Tích hợp Redux vào ReactJS

Tích hợp Redux vào ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách tích…

Tạo máy tính đơn giản bằng ReactJS

Tạo máy tính đơn giản bằng ReactJS

Trong bài này ta sẽ xây dựng một ứng dụng máy tính đơn giản bằng…

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Redux trong…

useContext trong React Hook

useContext trong React Hook

Trong bài viết này chúng ta sẽ cùnuseContextg nhau đi tìm hiểu về useContext trong…

React Router cơ bản

React Router cơ bản

Có thể khẳng định rằng những trang SPA (single page application) hiện đang rất phổ…

useEffect trong React Hooks

useEffect trong React Hooks

Trong bài viết này chúng ta sẽ đi tìm hiểu về useEffect trong React Hooks.…

Tìm hiểu React Hook useState

Tìm hiểu React Hook useState

React Hooks bao gồm rất 10 hooks khác nhau, trong phạm vi bài viết này…

Higher-Order Components trong ReactJS

Higher-Order Components trong ReactJS

Tìm hiểu về Fragments trong ReactJS

Tìm hiểu về Fragments trong ReactJS

Tìm hiểu về Render Props trong ReactJS

Tìm hiểu về Render Props trong ReactJS

Tìm hiểu về Context trong ReactJS

Tìm hiểu về Context trong ReactJS

Tìm hiểu về Refs trong ReactJS

Tìm hiểu về Refs trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về refs trong…

Kỹ thuật Lifting State Up trong ReactJS

Kỹ thuật Lifting State Up trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về kỹ thuật…

Tìm hiểu về List và Keys trong ReactJS

Tìm hiểu về List và Keys trong ReactJS

Trong bài viết này chúng ta sẽ cùng hau đi tìm hiểu về lists và…

Render với điều kiện trong ReactJS

Render với điều kiện trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách để…

Handling Events (xử lý sự kiện) trong ReactJS

Handling Events (xử lý sự kiện) trong ReactJS

Xử lý Form trong ReactJS

Xử lý Form trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về các thao…

Top