useEffect là gì? Hướng dẫn triển khai useEffect trong React

Vòng đời là một phần rất quan trọng của một thành phần. Tuy nhiên, một thành phần chức năng thông thường không thể hoạt động với Life Cycles và useEffect Hooks được sinh ra để làm điều này. Vậy, useEffect là gì? Tại sao chúng ta nên sử dụng useEffect? Bài viết này sẽ giải đáp những thắc mắc này cho bạn!

Tìm hiểu thêm về useEffect trong React

Nếu bạn thực sự cần làm việc với useEffect, bài viết này sẽ có thể hỗ trợ bạn một phần nào đó trong việc học. Tuy nhiên, nếu bạn chưa từng tiếp xúc với useEffect hay React bao giờ, bạn sẽ “tốn công” lắm mới hiểu hết được những gì thuthuatkiemtien.com chia sẻ dưới đây!

Để làm quen với việc sử dụngEffect và Hooks nói chung, bạn sẽ cần dành nhiều thời gian và công sức để tìm hiểu. Bài viết chỉ giải đáp một phần và không thể bao quát toàn bộ nội dung của useEffect nói riêng hay Hooks nói chung.

Móc là gì?

Móc là một tính năng mới được công bố và bổ sung kể từ phiên bản React 16.8. Với Hooks, bạn có thể sử dụng trạng thái và nhiều tính năng khác của React mà không cần phải viết lớp truyền thống.

Và useEffect là một trong những Hooks đã được công bố.

Một số thông báo của nhà phát triển React về Hooks và tương lai:

• Nếu bạn vẫn thích sử dụng lớp học, bạn có thể tiếp tục sử dụng nó.
• Hooks không thay đổi bất cứ điều gì trong ứng dụng của bạn
• Hooks tương thích 100% với các phiên bản ứng dụng cũ

Bạn có thể tìm hiểu thêm về Hooks trong tài liệu React chính thức.

UseEffect là gì?

Trước đây, nếu bạn sử dụng các thành phần lớp trong việc viết mã React, thì bây giờ bạn có thể sử dụng useEffect để quản lý vòng đời của thành phần trong các thành phần chức năng thay thế cho Vòng đời:

• componentDidMount
• componentDidUpdate
• componentWillUnmount

useEffect sẽ giúp bạn xử lý logic vòng đời của thành phần và được gọi khi thành phần thay đổi. Ngoài ra, chúng ta sẽ có useState sẽ sử dụng trạng thái trong các thành phần chức năng.

Triển khai useEffect trong React

Tìm nạp dữ liệu, đặt đăng ký hoặc thay đổi các phần tử DOM trong React đều là những ví dụ về "hiệu ứng" tốt. phản ứng phụ hoặc ngắn gọn hơn các hiệu ứng.

Có hai loại tác dụng phụ chính:

• Hiệu ứng mà không cần dọn dẹp
• Các hiệu ứng cần được dọn dẹp

Để hiểu thêm về useEffect cũng như 2 tác dụng phụ của useEffect, chúng ta cùng tìm hiểu thêm trong phần triển khai test useEffect trong React nhé!

useEffect không cần Dọn dẹp

Đôi khi, chúng tôi muốn chạy một số mã bổ sung sau khi React đã cập nhật DOM. Yêu cầu mạng - yêu cầu mạng, đột biến DOM thủ công - thay đổi DOM theo cách thủ công và yêu cầu đăng nhập sẽ là những ví dụ tốt để sử dụng Hiệu quả mà không cần Dọn dẹp.

Mã ví dụ UseEffect mà không có Dọn dẹp

import React,  useState, useEffect  from 'react';
function Example() 
const [count, setCount] = useState(0);
useEffect(() => 
document.title = `Bạn bấm vào tôi $count lần`;
);
return (

You clicked count times


);

Phân tích ví dụ

Như bạn có thể thấy, khi bạn sử dụng Hooks, bạn cho React biết thành phần của bạn cần làm gì sau khi kết xuất. React sẽ ghi nhớ điều đó và ghi nhớ hàm bạn đã truyền và gọi lại chúng sau khi cập nhật DOM.

Bằng cách này, bạn có thể đặt lại tiêu đề của tài liệu chuyển đổi theo các nhấp chuột của mình. Ngoài ra, bạn có thể thực hiện tìm nạp hoặc gọi một số APU cần thiết khác.

Có thể bạn đang hỏi một câu hỏi:

Tại sao lại gọi useEffect bên trong một thành phần?

Sử dụng Hiệu ứng bên trong một thành phần giúp nó có thể tương tác với bộ đếm hoặc bất kỳ phần mềm hỗ trợ nào ngay từ khi có hiệu ứng. Bạn cũng sẽ không cần một API đặc biệt để đọc nó vì chức năng này đã có sẵn.

Hooks sẽ “nắm lấy” JavaScript và “tránh” các API dành riêng cho React mà JavaScript có các giải pháp tích hợp sẵn.

Một câu hỏi tiếp theo sẽ được hỏi: UseEffect có tiếp tục chạy sau mỗi lần kết xuất không?

Đúng! useEffect sẽ tiếp tục chạy sau mỗi lần hiển thị theo mặc định và ngay cả sau lần hiển thị đầu tiên và mỗi lần cập nhật. Tuy nhiên, bạn vẫn có thể tùy chỉnh cài đặt mặc định này.

Khi bạn làm quen với các lớp, bạn sẽ nghĩ rằng chúng đang "gắn kết" hoặc "cập nhật", bạn có thể nghĩ đơn giản là chúng xuất hiện. các hiệu ứng sau mỗi lần kết xuất. React sẽ đảm bảo rằng DOM được cập nhật vào thời điểm các hiệu ứng xảy ra.

sử dụngEffect cần Dọn dẹp

Trong trường hợp bạn muốn đặt số lượng đăng ký từ nguồn bên ngoài. Tại thời điểm này, bạn sẽ cần phải dọn dẹp - dọn dẹp để tránh bộ nhớ bị rò rỉ ra ngoài!

Mã mẫu theo lớp

Trong lớp React, để thiết lập đăng ký, bạn sẽ sử dụng componentDidMount và làm sạch với componentWillUnmount.

Ví dụ, nếu bạn muốn hiển thị trạng thái trực tuyến của bạn bè, chúng tôi sẽ có mô-đun ChatAPI làm điều này và mã sử dụng lớp sẽ giống như sau:

class TrangThaiBanBe extends React.Component 
constructor(props) 
super(props);
this.state =  isOnline: null ;
this.handleThayDoiTrangThai = this.handleThayDoiTrangThai.bind(this);

componentDidMount() 
ChatAPI.subscribeToTrangThaiBanBe(
this.props.friend.id,
this.handleThayDoiTrangThai
);

componentWillUnmount() 
ChatAPI.unsubscribeFromTrangThaiBanBe(
this.props.friend.id,
this.handleThayDoiTrangThai
);

handleThayDoiTrangThai(status) 
this.setState(
isOnline: status.isOnline
);

render() 
if (this.state.isOnline === null) 
return ’Đang chạy á...';

return this.state.isOnline ? 'Online' : 'Offline';

Trong ví dụ này, chúng ta có thể thấy componentDidMount và componentWillUnmount sẽ cần phải phản chiếu lẫn nhau. Điều này có nghĩa là bạn sẽ cần phải tách logic thành 2, nhưng mặt khác, cả hai đều chỉ liên quan đến 1 hiệu ứng.

Mã mẫu sử dụng Hooks

import React,  useState, useEffect  from 'react';
function TrangThaiBanBe(props) 
const [isOnline, setIsOnline] = useState(null);
useEffect(() => 
function handleThayDoiTrangThai(status) 
setIsOnline(status.isOnline);

ChatAPI.subscribeToTrangThaiBanBe(props.friend.id, handleThayDoiTrangThai);
// Specify how to clean up after this effect:
return function cleanup() 
ChatAPI.unsubscribeFromTrangThaiBanBe(props.friend.id, handleThayDoiTrangThai);
;
);
if (isOnline === null) 
return 'Đang chạy á...';

return isOnline ? 'Online' : 'Offline';

Phân tích ví dụ

Như bạn thấy, với useEffect thuthuatkiemtien.com không cần phải tách 2 phần riêng biệt ra để thực hiện hiệu ứng dọn dẹp. React sẽ tự động chạy cho đến khi nó được dọn dẹp.

Có lẽ, bạn sẽ đặt câu hỏi: Tại sao chúng ta nhận được một hàm từ các hiệu ứng?

Câu trả lời là bởi vì đây là một cơ chế dọn dẹp tùy chọn cho hiệu ứng. Mỗi hiệu ứng sẽ có thể trả về một chức năng hiệu ứng dọn dẹp.

Đến đây, chúng ta đã trải qua một “hành trình” không ngắn cũng không dài nhưng có thể giúp bạn hiểu useEffect là gì, cũng như cách triển khai useEffect trong thực tế. thuthuatkiemtien.com hy vọng những kiến ​​thức này có thể hỗ trợ bạn trong sự nghiệp lập trình với React.

Bài viết có tham khảo nội dung từ: React Docs, React FAQs, TopDev, FreeTuts, W3Schools, v.v.

Câu hỏi thường gặp về sử dụng

Các lớp sẽ bị xóa khỏi React?

Tôi có thể tìm hiểu thêm về useEffect ở đâu?

Nếu bạn thấy bài viết thực sự khó hiểu, xin chúc mừng, bạn sẽ tiếp tục đến với tài liệu đầy đủ (có thể khó hiểu hơn) về useEffect trong React tại React DOCS. Tại đây, bạn sẽ được đội ngũ phát triển React hướng dẫn tận tình cách sử dụng useEffect. Tuy nhiên, nếu bạn không có kiến ​​thức chuyên môn vững vàng và vốn từ vựng tiếng Anh chuyên ngành kha khá thì bạn sẽ rất khó để tiếp thu những kiến ​​thức này.

Phiên bản React nào có thể sử dụng Hooks?

Để sử dụng Hooks, tất cả các gói React bạn sử dụng sẽ phải là phiên bản 16.8.0 trở lên. Nếu bạn không cập nhật, Hooks sẽ không khả dụng.

Tôi nên sử dụng Hooks, lớp hay cả hai?

Khi bạn đã sẵn sàng cho sự thay đổi, bạn có thể thử làm quen và viết với Hooks trong các thành phần của mình. Bạn cũng nên nhắc nhở "những người cùng hội cùng thuyền" không nên viết lại các lớp hiện có trong Hooks, và bạn nên khuyến khích họ sử dụng Hooks vì Hooks cũng khá dễ làm quen.

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

• Trụ sở chính: L17-11, Lầu 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, P. Bến Nghé, Q.1, TP.
  VPĐD: 42 Trần Phú, P.4, Q.5, TP.HCM
• Điện thoại: 0364 333 333
  Tổng đài miễn phí: 1800 6734
• Email: sales@tino.org
• Trang web: www.tino.org

Xem thêm nhiều bài viết về : Kiến Thức Cơ Bản

Nguồn: useEffect là gì? Hướng dẫn triển khai useEffect trong React