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.

test php

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.

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..

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

Bài viết này được đăng tại [free tuts .net]

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

Bài tập ReactJS: API Requests trong ReactJS

Bài tập ReactJS: API Requests trong ReactJS

Bài tập ReactJS: Conditional Rendering trong ReactJS

Bài tập ReactJS: Conditional Rendering trong ReactJS

Bài tập ReactJS: Lists và Keys trong ReactJS

Bài tập ReactJS: Lists và Keys trong ReactJS

Bài tập ReactJS: Forms và Controlled Components trong ReactJS

Bài tập ReactJS: Forms và Controlled Components trong ReactJS

Bài tập ReactJS: Handling Events trong ReactJS

Bài tập ReactJS: Handling Events trong ReactJS

Bài tập ReactJS: State và Lifecycle trong ReactJS

Bài tập ReactJS: State và Lifecycle trong ReactJS

Bài tập ReactJS: Components và Props trong ReactJS

Bài tập ReactJS: Components và Props trong ReactJS

Thiết kế và quản lý form đơn giản với thư viện Formik

Thiết kế và quản lý form đơn giản với thư viện Formik

React Microservices, xây dựng ứng dụng React mạnh mẽ

React Microservices, xây dựng ứng dụng React mạnh mẽ

Xây dựng ứng dụng CRUD với Redux Toolkit cực dễ dàng

Xây dựng ứng dụng CRUD với Redux Toolkit cực dễ dàng

Áp dụng Testing vào React cho ứng dụng của bạn như thế nào?

Áp dụng Testing vào React cho ứng dụng của bạn như thế nào?

Performance Optimization trong React Js, tăng hiệu suất cực ngon

Performance Optimization trong React Js, tăng hiệu suất cực ngon

React Hook là gì? Tại sao React Hook quan trọng trong dự án?

React Hook là gì? Tại sao React Hook quan trọng trong dự án?

Hiểu Route React nâng cao trong 10 phút bằng ví dụ

Hiểu Route React nâng cao trong 10 phút bằng ví dụ

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…

Top