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

Nguồn bài viết: 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-la-gi

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-la-gi

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 (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

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!

useeffect-la-gi

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

Bản quyền thuộc: thuthuatkiemtien.com



from thuthuatkiemtien.com https://ift.tt/3x65PBc
via thuthuatkiemtien.com

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

3 Cách để kiếm tiền từ blog WordPress

Hình ảnh
Nguồn bài viết: 3 Cách để kiếm tiền từ blog WordPress 3 cách kiếm tiền từ blog WordPress. Không cần phải đề cập đến những lợi thế của việc có một blog. Mọi người đều viết blog có thể chỉ để trao đổi ý tưởng, chia sẻ kinh nghiệm hoặc phát huy khả năng sáng tạo của bản thân. Tuy nhiên, blog cũng có thể trở thành “bể rửa tiền”. Vấn đề là bạn có thể thực sự kiếm tiền theo cách này không? Tìm hiểu thêm: Rõ ràng, câu trả lời là có. Các blog khác nhau sử dụng các phương pháp kiếm tiền khác nhau và kết quả cũng khác nhau. Không phải những gì hoạt động tốt trên các blog lớn hơn sẽ hoạt động tốt cho tất cả các blog. Sau đây là những cách phổ biến nhất để kiếm tiền từ blog bằng nền tảng WordPress . Hi vọng bạn sẽ lựa chọn được cho mình một phương pháp phù hợp và hiệu quả. Các phương pháp kiếm tiền hiệu quả từ blog WordPress 1. Kiếm tiền với quảng cáo Quảng cáo Trả tiền dựa trên mỗi cú nhấp chuột ( PPC) và Trả cho mỗi lần xem ( PPV ). Chỉ cần chèn quảng cáo vào blog của bạn và hướ...
Đọc thêm

Google AdSense bỏ giới hạn số lượng quảng cáo trên mỗi trang

Hình ảnh
Nguồn bài viết: Google AdSense bỏ giới hạn số lượng quảng cáo trên mỗi trang Google AdSense loại bỏ giới hạn về số lượng quảng cáo trên mỗi trang. Một tin cực kỳ tốt cho những bạn đang kiếm tiền bằng Google Adsense trên blog / trang web của tôi: gần đây, Google đã cập nhật chính sách mới về vị trí đặt quảng cáo, do đó xóa bỏ giới hạn trước đây về số lượng quảng cáo được phép hiển thị trên mỗi trang. Điều này có nghĩa là bạn được phép đặt bao nhiêu quảng cáo trên mỗi trang hiển thị tùy thích. Miễn là họ tuân thủ các chính sách mới của Google . Thật tuyệt vời phải không? Tìm hiểu thêm: AdSense loại bỏ giới hạn về số lượng quảng cáo trên mỗi trang Nếu bạn nhớ, trước đây, khi truy cập trang Chính sách về vị trí đặt quảng cáo thuộc về Google Adsense , chúng ta sẽ thấy quy tắc như thế này. Tuy nhiên, khi cập nhật chính sách mới, Google hoàn toàn loại bỏ nó. Bạn sẽ không còn tìm thấy điều khoản này trong trang chính sách mới. Điều đó có nghĩa là bạn có thể đặt bao nhiêu quảng ...
Đọc thêm

Toàn tập danh sách liên kết đơn trong C++

Hình ảnh
Nguồn bài viết: Toàn tập danh sách liên kết đơn trong C++ “Danh sách liên kết đơn trong C ++” hay “Danh sách liên kết đơn” trong các ngôn ngữ lập trình khác là một trong những khái niệm cực kỳ quan trọng trong lập trình. Do đó, trong bài viết này, thuthuatkiemtien.com sẽ cùng các bạn tìm hiểu về danh sách liên kết đơn trong C ++ nhé! Tìm hiểu về danh sách liên kết đơn trong C ++ Danh sách liên kết đơn trong C ++ là gì? Danh sách liên kết Singly , tạm dịch là danh sách liên kết đơn lẻ, là một kiểu cấu trúc dữ liệu động – dữ liệu đệ quy, mỗi từ trong danh sách có một liên kết với từ theo sau. Mỗi phần tử còn được gọi là nút ( nút thắt) là một cấu trúc gồm 2 thành phần chính như sau: Dữ liệu: là nơi lưu trữ thông tin của nút đó. Con trỏ: là nơi lưu địa chỉ của phần tử đứng sau phần tử đó trong danh sách và phần tử cuối cùng sẽ có giá trị bằng vô giá trị. Các tính năng của danh sách liên kết đơn trong C ++ Liên kết của các phần tử trong một danh sách Trong thành phần của ...
Đọc thêm