Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu những cách sử dụng Function As Props và useEffect trong React Javascript nha!
Trước khi đi vào bài này thì bạn phải học xong bài Sử Dụng Props Và Reuse Component Trong React đã nha.
Tóm Tắt
Sử Dụng Function As Props
Trong phần này chúng ta sẽ đi vào tạo một hàm để xoá bài viết trong blog. Ở đây mình sẽ giải thích một chút là tại sao chúng ta phải sử dụng props (truyền phương thức từ component cha sang component con) mà không phải viết trực tiếp vào BlogList.js.
Như bạn thấy ở hình ảnh trên thì Home.js (Component Cha) là nơi lưu trữ dữ liệu các bài viết do đó chúng ta phải bắt buộc truyền tham số function đến component BlogList.js để xử lý. Bước đầu tiên chúng ta sẽ tạo một button trong BlogList.js với chức năng khi người dùng nhấn vào sẽ kích hoạt hành động delete bài viết nhé.
Ở đoạn mã trên thì chúng ta sử dụng cách truyền hàm vào component con thông qua :
{blogs, title, deleteArticle} Và sử dụng sự kiện onClick để kêu hàm deleteArticle mỗi khi người dùng nhấn vào button này nhé. Do id của mỗi bài viết là duy nhất nên mình sẽ xoá bài viết dựa trên id này nhé.
Bước tiếp theo là chúng ta sẽ tạo hàm deleteArticle trong component cha và truyền vào component con thông qua video dưới đây nha.
Như video trên thì đầu tiên mình sẽ truyền tham số hàm từ component cha sang component bằng cách:
<BlogList blogs={blogs} title="All Article" deleteArticle={deleteArticle}/> Sau đó chúng ta sẽ sử dụng hàm filter để lọc ra phần tử theo id khi người dùng nhấn vào nút xoá của bài viết đó. Tiếp theo là mình sử dụng setBlogs để đưa mảng Array mới vào để hiển thị danh sách bài viết.
Sử Dụng useEffect Hook
useEffect được phát triển trong phiên bản react 16.8 giúp bạn có thể thực thi các câu lệnh hay chức năng nào đó trong mỗi lần render. Để giúp bạn hiểu rõ hơn thì mình sẽ đi vào ví dụ cụ thể nha. Đầu tiên chúng ta sẽ đi vào import nó trong file Home.js.
Bước tiếp theo chúng ta sẽ gọi useEffect thông qua đoạn mã sau:
Và kết quả bạn xem video dưới đây nhé!
Như bạn thấy là đầu tiên khi chạy ứng dụng thì useEffect đã được tụ động thực thi và nó sẽ tiếp tục thực thi khi State thay đổi và render lại.
Sử Dụng useEffect Dependencies
Như video ở trên thì hàm trong useEffect sẽ được tự động thực thi khi render react đầu tiên hay các State thay đổi. Trong phần này mình sẽ hướng dẫn bạn cách chỉ chạy useEffect trong render lần đầu tiên và sẽ không thực thi khi State thay đổi.
Bước tiếp theo chúng ta sẽ thực thi hàm useEffect dựa trên sự thay đổi của một State nào đó trong ứng dụng.
Đầu tiên mình sẽ đi vào tạo một State mới với giá trị là name nhé!
Tiếp theo chúng ta sẽ tạo một button để thay đổi giá trị State của name thông qua đoạn code sau:
Phần cuối cùng chúng ta sẽ thiết lập thực thi useEffect mỗi khi State name thay đổi thông qua đoạn mã sau:
Kết quả cuối cùng bạn xem video dưới đây nhé!
Như bạn thấy ở video trên thì lần đầu tiên thực thi hàm trong useEffect là khi render lại trang. Lần tiếp theo khi chúng ta xoá các bài viết thì State blogs thay đổi nhưng lệnh sẽ không thực thi. Chỉ khi chúng ta nhấn vào button để thay đổi nội dung name(State name thay đổi) thì hàm trong useEffect mới thực thi được lần nữa.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức về Function As Props và useEffect trong React. Nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
