UseEffect là gì? Chỉ dẫn triển khai useEffect trong React

Life Cycle là 1 phần siêu quan yếu trong part. Tuy nhiên, 1 useful part lại ko thể khiến việc sở hữu những Life Cycle 1 phương pháp thông thường và useEffect Hooks được sinh ra để thực hành việc này. Vây, useEffect là gì? Tại sao chúng ta lại nên dùng useEffect? Bài viết này sẽ giải đáp những thắc mắc trên giúp bạn!

Tìm hiểu về useEffect trong React

Ví dụ bạn thực sự cần khiến việc sở hữu useEffect, bài viết này sẽ có thể tương trợ bạn 1 phần trong việc tìm hiểu. Tuy nhiên, trường hợp bạn chưa từng tiếp xúc sở hữu useEffect hay React bao giờ, bạn sẽ “mất sức” khá nhiều để hiểu hết những gì mà Tino Group chia sẻ dưới đây!

Để khiến quen được sở hữu useEffect và Hooks nói chung, bạn sẽ cần nên tốn siêu nhiều thời kì và công sức để tìm hiểu. Bài viết chỉ giải đáp 1 phần và ko thể bao quát hết nội dung của useEffect nói riêng hay Hooks nói chung.

Hooks là gì?

Hooks là 1 tính năng new được công bố và thêm vào từ phiên bản React 16.8. Sở hữu Hooks, bạn có thể dùng state và siêu nhiều tính năng khác của React mà ko cần nên thực hành việc viết class như cổ điển.

Và useEffect chính là 1 Hook trong những Hooks được công bố.

1 vài công bố của nhà vươn lên là React về Hooks và tương lai:

  • Ví dụ bạn vẫn thích dùng class, bạn vẫn có thể tiếp tục dùng.
  • Hooks ko khiến thay thế đổi bất cứ điều gì trong ứng dụng của bạn
  • Hooks tương thích 100% sở hữu những phiên bản ứng dụng cũ
Xem Thêm  Điểm danh prime 5 phần mềm quét mã vạch miễn chi phí phải chăng nhất 2023

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

useEffect là gì?

Trước đây, trường hợp dùng class part trong viết code React thì giờ đây, bạn có thể dùng useEffect để quản lý vòng đời part trong useful part thay thế thế cho Life Cycle:

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount

useEffect sẽ giúp bạn xử lý những logic trong vòng đời của part và được gọi lúc part có sự thay thế đổi. Bên cạnh ra, chúng ta sẽ có useState sẽ dùng state trong useful parts.

Triển khai useEffect trong React

Tìm nạp dữ liệu, thiết lập đăng ký hay thay thế đổi những thành phần DOM trong React đều là những dí dụ về “tác dụng” hay aspect impact hoặc ngắn gọn hơn là impact.

Có 2 loại aspect impact chính là:

  • Results ko cần Cleanup
  • Results cần nên Cleanup

Để hiểu hơn về useEffect cũng như 2 aspect impact của useEffect, chúng ta sẽ tìm hiểu rõ hơn trên phần triển khai thử nghiệm useEffect trong React nhé!

useEffect ko cần Cleanup

Đôi lúc, chúng ta muốn chạy 1 số mã bổ sung sau khoản thời gian React đã cập nhật DOM. Community request – mạng bắc buộc, handbook DOM mutations – đột biến DOM theo phương pháp thủ công và bắc buộc đăng nhập sẽ là những dí dụ điển hình cho useEffect ko cần Cleanup.

Code dí dụ useEffect ko cần Cleanup

import React, { useState, useEffect } from ‘react’; operate Instance() { const [count, setCount] = useState(0); useEffect(() => { doc.title = `Bạn bấm vào tôi ${rely} lần`; }); return ( <div> <p>You clicked {rely} occasions</p> <button onClick={() => setCount(rely + 1)}> Click on me </button> </div> ); }

Phân tách dí dụ

Như bạn có thể thấy, lúc dùng Hook, đồng nghĩa bạn nói sở hữu React rằng part của bạn cần nên khiến gì sau khoản thời gian render. React sẽ ghi nhớ điều đấy và ghi nhớ chức năng bạn đã truyền đi và gọi chúng lại lần nữa sau khoản thời gian cập nhật DOM.

Xem Thêm  Combo là gì? Bí kíp nâng cao doanh số bán hàng bằng Combo Advertising and marketing

Bằng phương pháp này, bạn có thể đặt lại tiêu đề của tài liệu chuyển đổi theo số lần nhấp của bạn. Bên cạnh ra, bạn còn có thể thực hành việc tìm nạp dữ liệu hay gọi 1 số APU buộc phải} khác.

Kiên cố bạn đang đặt ra 1 câu hỏi là:

Tại sao lại gọi useEffect bên trong 1 part?

Đặt useEffect bên trong 1 part sẽ giúp ta có thể tương tác sở hữu biến đếm hoặc bất kỳ 1 prop nào ngay từ impact. Bạn cũng sẽ ko cần 1 API đặc biệt để đọc trường hợp này vì chức năng này đã có sẵn.

Hook sẽ “nắm lấy” JavaScript và “hạn chế” những API dành riêng cho React mà JavaScript có sẵn những giải pháp xử lý.

1 câu hỏi tiếp theo sẽ được đặt ra là: Liệu useEffect có tiếp tục chạy sau từng lần render hay ko?

Có! useEffect vẫn sẽ tiếp tục chạy sau từng lần render theo mặc định và ngay cả sau lần hiển thị trước tiên lẫn từng lần cập nhật. Tuy nhiên, bạn vẫn có thể tùy thuộc} chỉnh được thiết lập mặc định này.

Lúc quen khiến việc sở hữu class, bạn sẽ nghĩ chúng đang “mounting” hay “updating”, bạn có thể nghĩ đơn giản là chúng xuất hiện results sau từng lần render. React sẽ đảm bảo rằng DOM đã cập nhật ngay thời điểm những impact diễn ra.

useEffect cần nên Cleanup

Trong trường hợp bạn muốn thiết lập số lượng đăng ký từ 1 nguồn bên bên cạnh. Lúc này, bạn sẽ cần nên dọn dẹp – cleanup để hạn chế việc rò rỉ bộ nhớ ra bên cạnh!

Code dí dụ bằng class

Trong class React, để thiết lập đăng ký, bạn sẽ dùng componentDidMount và dọn dẹp bằng componentWillUnmount.

Thí dụ: bạn muốn hiển thị trạng thái on-line của bạn bè, chúng ta sẽ có module ChatAPI khiến việc này và code bằng class sẽ như sau:

Xem Thêm  Những chi tiết “then chốt” lúc nghiên cứu đối thủ cực nhọc} trong advertising and marketing

class TrangThaiBanBe extends React.Part { constructor(props) { tremendous(props); this.state = { isOnline: null }; this.handleThayDoiTrangThai = this.handleThayDoiTrangThai.bind(this); } componentDidMount() { ChatAPI.subscribeToTrangThaiBanBe( this.props.buddy.id, this.handleThayDoiTrangThai ); } componentWillUnmount() { ChatAPI.unsubscribeFromTrangThaiBanBe( this.props.buddy.id, this.handleThayDoiTrangThai ); } handleThayDoiTrangThai(standing) { this.setState({ isOnline: standing.isOnline }); } render() { if (this.state.isOnline === null) { return ’Đang chạy á…’; } return this.state.isOnline ? ‘On-line’ : ‘Offline’; } }

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

Code dí dụ bằng Hooks

import React, { useState, useEffect } from ‘react’; operate TrangThaiBanBe(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { operate handleThayDoiTrangThai(standing) { setIsOnline(standing.isOnline); } ChatAPI.subscribeToTrangThaiBanBe(props.buddy.id, handleThayDoiTrangThai); // Specify how lớn clear up after this impact: return operate cleanup() { ChatAPI.unsubscribeFromTrangThaiBanBe(props.buddy.id, handleThayDoiTrangThai); }; }); if (isOnline === null) { return ‘Đang chạy á…’; } return isOnline ? ‘On-line’ : ‘Offline’; }

Phân tách dí dụ

Như người trải nghiệm có thể thấy, sở hữu useEffect Tino Group ko cần nên tách ra 2 phần biệt lập để thực hành cleanup impact. React sẽ tự động động chạy tới lúc nào dọn dẹp new thôi.

Có lẽ, bạn sẽ đặt ra câu hỏi: Tại sao chúng ta lại nhận được 1 operate từ impact?

Câu trả lời do đây là 1 cơ chế tùy thuộc} chọn dọn dẹp impact. Từng impact sẽ có thể trả về 1 operate cleanup impact đấy.

Tới đây, chúng ta đã trải qua 1 “hành trình” tuy ko ngắn cũng ko dài, nhưng có thể giúp bạn hiểu được useEffect là gì, cũng như phương pháp triển khai useEffect trong thực tế ra sao. Tino Group hello vọng rằng những tri thức này có thể tương trợ bạn trong sự nghiệp lập trình sở hữu React.

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

Những câu hỏi thường gặp về useEffect

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

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Middle, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333Tổng đài miễn phí tổn: 1800 6734
  • E mail: gross [email protected]
  • Web site: www.tino.org