- vừa được xem lúc

Sử dụng useEffect() trong ReactHooks

0 0 43

Người đăng: Huynh Chi Trung

Theo Viblo Asia

1. Giới thiệu

  • Hooks là một tính năng mới được thêm vào React 16.8. Nó cho phép bạn có thể sử dụng state và các chứ năng khác của React mà không cần khởi tạo Class, điều đó có nghĩa là có thể sử dụng state trong functional component.
  • Effect Hook cho phép thực hiện side effect bên trong các function component

Nếu mọi người chưa biết về hook thì nên đọc qua bài viết về cách sử dụng hook cũng như hàm useState tại trang chủ của reactjs. Bài viết này sẽ tìm hiểu cơ bản khái niệm cũng như cách sử dụng useEffect.

2. React hook và useEffect() là gì?

Khi tham khảo tài liệu trên ReactJS offical và tìm kiếm về useEffect, chúng ta sẽ có 1 típs như này:

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Điều đó có nghĩa là: mục đích useEffect để quản lý vòng đời của của một component và nó phục vụ chúng ta sử dụng trong function component thay vì các lifecycle như trước đây trong class component.

Lifecycle method trong class component thực sự rất quan trọng, đôi khi chúng ta muốn fetch dữ liệu từ API khi rendering 1 component, đôi khi chúng ta muốn thực hiện những action cụ thể khi component update,... 2 Methods được cho là quan trọng nhất chính là componentDidMountcomponentDidUpdate.

useState cho phép chúng ta sử dụng state trong functional components. useEffect cho phép chúng ta sử lý logic trong lifecycle methods. Từ cái tên useEffect chắc chúng ta cũng hiểu được hàm sẽ được gọi mỗi khi có gì đó ảnh hưởng đến components của bạn. Và thực sự nó giống với định nghĩa của componentDidMountcomponentDidUpdate.

3. Cách sử dụng useEffect() trong nhiều trường hợp

Hãy thử viết một vài đoạn code để tìm hiểu useEffect(). Chẳng hạn chúng ta muốn khai báo thuộc tính trong state của 1 object, và 2 thuộc tính đó là name và familyName. Initial state sẽ là "name" và "family" và sau khi rendering, component sẽ thay đổi.

First step: Khởi tạo states

import React, {useState} from 'react'; export const EffectDemo = () => { //State const [fullName, setFullName] = useState({name: 'name', familyName: 'family'}); const [title,setTitle] = useState('useEffect() in Hooks'); return( <div> <h1>Title: {title}</h1> <h3>Name: {fullName.name}</h3> <h3>Family Name: {fullName.familyName}</h3> </div> );
};

Second Step: khai báo useEffect()

import React, {useEffect, useState} from 'react'; export const EffectDemo = () => { //State const [fullName, setFullName] = useState({name: 'name', familyName: 'family'}); const [title,setTitle] = useState('useEffect() in Hooks'); //useEffect useEffect(() => { setFullName({name:'TrungHC',familyName: 'HCT'}); }); return( <div> <h1>Title: {title}</h1> <h3>Name: {fullName.name}</h3> <h3>Family Name: {fullName.familyName}</h3> </div> );
};

như mọi người đã thấy, đối số của useEffect() là một hàm xử lý khi có gì thay đổi components. Sau đây là kết quả:

Như vậy kết quả đã như chúng ta mong muốn ? Tuy nhiên check log đã, xem hàm useEffect này được gọi bao nhiêu lần

import React, {useEffect, useState} from 'react'; export const EffectDemo = () => { //State const [fullName, setFullName] = useState({name: 'name', familyName: 'family'}); const [title,setTitle] = useState('useEffect() in Hooks'); //useEffect useEffect(() => { console.log('useEffect has been called!'); setFullName({name:'TrungHC',familyName: 'HCT'}); }); return( <div> <h1>Title: {title}</h1> <h3>Name: {fullName.name}</h3> <h3>Family Name: {fullName.familyName}</h3> </div> );
};

Và đây là kết quả:

Như vậy đúng như những gì chúng ta hiểu, useEffect sẽ được gọi mỗi khi components thay đổi, tuy nhiên ở đây thì đó không phải là thứ mà chúng ta mong muốn, hiện tại useEffect đang là một method giống như hàm componentDidUpdate vậy. Để cho giống với componentDidUpdate thực sự thì chúng ta cũng có thể điều khiển hàm useEffect bằng câu lệnh điều kiện, nó chính là tham số thứ 2 của hàm useEffect(). Tham số thứ 2 của useEffect là một mảng, mảng này cho biết rõ chỉ gọi useEffect() khi giá trị phần tử trong mảng thay đổi. Chẳng hạn:

useEffect(() => { console.log('useEffect has been called!'); setFullName({ name: 'TrungHC', familyName: 'HCT' });
}, [fullName.name]);

Như vậy hàm useEffect() chỉ được gọi 2 lần: 1 lần khi render components, 1 lần khi set name thành "TrungHC".

Vậy nếu chúng ta muốn hàm useEffect() chỉ gọi 1 lần khi render components (tương đương với componentDidMount) thì như thế nào? Trong trường hợp này ta chỉ cần truyền tham số thứ 2 của useEffect() là 1 hàm rỗng []

useEffect(() => { console.log('useEffect has been called!'); setFullName({ name: 'TrungHC', familyName: 'HCT' });
}, []);

Với hàm này thì useEffect() sẽ giống hệt với componentDidMount

Và Lifecycle cuối cùng cũng hay sử dụng nữa là hàm componentWillUnmount, chúng ta cũng có thể sử dụng useEffect() định nghĩa hàm componentWillUnmount.

Như chúng ta đã biết thì componentWillUnmount sẽ chạy mỗi khi một component chuẩn bị remove khỏi tree DOM, cùng xét 1 ví dụ:

() => { useEffect(() => { const clickWindow = () => console.log('1') window.addEventListener('click', clickWindow) // return 1 function, sẽ được gọi ngay trước khi componentWillUnmount return () => { window.removeEventListener('click', clicked) } }, []) return <div>F12 check log của trình duyệt!</div>
}

Thực tế thì useEffect cho phép chúng ta return 1 function, function này sẽ thực thi trước khi mà component đó được Unmount.

4. Tổng kết

Như vậy với ReactHooks thì chúng ta gần như đã xử lý được state trong functional components, những method cơ bản trong lifecycle đã được giải quyết với useEffect(). Hy vọng qua bài viết này mọi người đã hiểu qua được cách sử dụng useEffect()

5. Tư liệu tham khảo

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 496

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 373

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 689

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 334

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 417

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 413