Ch&agrave;o mừng bạn đến với Kh&oacute;a học ReactJS từ cơ bản đến n&acirc;ng cao tại TEK4VN!
Kh&oacute;a học n&agrave;y sẽ trang bị cho bạn mọi kiến thức cần biết để l&agrave;m việc với React.
C&aacute;c b&agrave;i học được thiết kế để cung cấp những th&ocirc;ng tin ngắn gọn m&agrave; bạn sẽ &aacute;p dụng trực tiếp trong c&aacute;c b&agrave;i tập.
Bạn sẽ học c&aacute;ch x&acirc;y dựng giao diện cho website thương mại điện tử sử dụng cổng thanh to&aacute;n Stripe.
Bạn sẽ học tất cả c&aacute;c kh&aacute;i niệm quan trọng. Ch&uacute;ng ta sẽ bắt đầu với một số b&agrave;i &ocirc;n tập nhanh về JavaScript, sau đ&oacute; l&agrave; những kh&aacute;i niệm cơ bản của React, tiếp theo sẽ đi s&acirc;u v&agrave;o c&aacute;c kh&aacute;i niệm React n&acirc;ng cao
Trước khi bắt đầu kh&oacute;a học, h&atilde;y đảm bảo bạn đ&atilde; nắm chắc kiến thức về:
<ul>
<li style="text-align: justify;" aria-level="1"><a href="https://tek4.vn/khoa-hoc/lap-trinh-giao-dien-voi-html-css" target="_blank" rel="noopener">HTML/CSS</a></li>
<li style="text-align: justify;" aria-level="1"><a href="https://tek4.vn/khoa-hoc/lap-trinh-javascript-co-ban-den-nang-cao" target="_blank" rel="noopener">JavaScript</a> (Kh&oacute;a JavaScript TEK4VN đang trong qu&aacute; tr&igrave;nh ho&agrave;n thiện...)</li>
</ul>

ReactJS từ cơ bản đến nâng cao

Trong chương trước, ch&uacute;ng ta đ&atilde; thấy c&aacute;ch chạy một hiệu ứng kh&ocirc;ng y&ecirc;u cầu dọn dẹp.
Trong chương n&agrave;y, ch&uacute;ng ta sẽ kh&aacute;m ph&aacute; những hiệu ứng y&ecirc;u cầu dọn dẹp.
<h2>Dọn dẹp l&agrave; g&igrave;?</h2>
Một số phương thức trong JavaScript y&ecirc;u cầu việc dọn dẹp. H&atilde;y c&ugrave;ng t&igrave;m hiểu l&yacute; do tại sao.
Khi bạn tạo một bộ đếm thời gian bằng c&aacute;ch sử dụng <code>setTimeout</code>, bạn đang tr&igrave; ho&atilde;n việc chạy một đoạn code trong tương lai, v&iacute; dụ:
<pre class="language-js" data-content="setTimeout(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22This%20will%20run%20in%201%20second%22)%3B%0A%7D%2C%201_000)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>setTimeout(() =&gt; {
 console.log("This will run in 1 second");
}, 1_000);</code></pre>
Nếu đoạn code n&agrave;y được đ&oacute;ng g&oacute;i trong một h&agrave;m v&agrave; h&agrave;m đ&oacute; c&oacute; thể được gọi nhiều lần, bạn c&oacute; thể gặp phải t&igrave;nh trạng r&ograve; rỉ bộ nhớ. Điều n&agrave;y c&oacute; nghĩa l&agrave; bạn đang tăng dần bộ nhớ của ứng dụng v&igrave; bạn li&ecirc;n tục l&ecirc;n lịch cho một bộ đếm thời gian mới mỗi khi h&agrave;m được gọi.
Một v&iacute; dụ cụ thể hơn l&agrave; khi bạn chạy code n&agrave;y b&ecirc;n trong một component React, v&iacute; dụ:
<pre class="language-js" data-content="import%20%7BuseEffect%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setTimeout(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22This%20will%20run%20in%201%20second%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%201_000)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Ch1%3EApp%3C%2Fh1%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useEffect} from "react";

function App() {
 useEffect(() =&gt; {
 setTimeout(() =&gt; {
 console.log("This will run in 1 second");
 }, 1_000);
 });

 return &lt;h1&gt;App&lt;/h1&gt;;
}</code></pre>
Mỗi khi component <code>App</code> được hiển thị lại, n&oacute; sẽ l&ecirc;n lịch cho việc tạo một bộ đếm thời gian mới m&agrave; kh&ocirc;ng dọn dẹp bộ đếm thời gian trước đ&oacute;.
Đ&acirc;y l&agrave; một v&iacute; dụ về hiệu ứng y&ecirc;u cầu dọn dẹp để tr&aacute;nh r&ograve; rỉ bộ nhớ.
V&iacute; dụ n&agrave;y chỉ hiển thị một <code>setTimeout</code> nhưng h&atilde;y nghĩ đến trường hợp m&agrave; bạn đang thiết lập một kết nối tới API tr&ograve; chuyện bằng c&aacute;ch sử dụng WebSockets m&agrave; kh&ocirc;ng đ&oacute;ng kết nối trước đ&oacute;. Đ&oacute; l&agrave; một v&iacute; dụ kh&aacute;c về r&ograve; rỉ bộ nhớ v&agrave; cũng l&agrave; một v&iacute; dụ về hiệu ứng y&ecirc;u cầu dọn dẹp.
<h2>C&aacute;ch dọn dẹp hiệu ứng&nbsp;</h2>
Để dọn dẹp một hiệu ứng, bạn phải trả về một h&agrave;m (dọn dẹp) từ b&ecirc;n trong cuộc gọi <code>useEffect</code>. Ch&uacute;ng ta sẽ bắt đầu với v&iacute; dụ đơn giản nhất:
<pre class="language-js" data-content="import%20%7BuseEffect%2C%20useState%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0const%20%5Bcounter%2C%20setCounter%5D%20%3D%20useState(0)%3B%0A%0A%C2%A0%C2%A0useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22effect%20running%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22effect%20cleaning%20up%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%7D)%0A%0A%C2%A0%C2%A0return%20(%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Ch2%3E%7Bcounter%7D%3C%2Fh2%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cbutton%20onClick%3D%7B()%20%3D%3E%20setCounter(prevCounter%20%3D%3E%20prevCounter%20%2B%201)%7D%3EAdd%3C%2Fbutton%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E%0A%C2%A0%C2%A0)%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useEffect, useState} from "react";

function App() {
 const [counter, setCounter] = useState(0);

 useEffect(() =&gt; {
 console.log("effect running");
 return () =&gt; {
 console.log("effect cleaning up");
 }
 })

 return (
 &lt;&gt;
 &lt;h2&gt;{counter}&lt;/h2&gt;
 &lt;button onClick={() =&gt; setCounter(prevCounter =&gt; prevCounter + 1)}&gt;Add&lt;/button&gt;
 &lt;/&gt;
 );
}</code></pre>
V&agrave;o lần đầu ti&ecirc;n component được hiển thị, ch&uacute;ng ta chỉ thấy console.log: <code>"effect running"</code>.
Sau đ&oacute;, mỗi khi component được hiển thị lại v&igrave; trạng th&aacute;i của n&oacute; thay đổi (khi ta nhấp v&agrave;o n&uacute;t), n&oacute; bắt đầu bằng c&aacute;ch dọn dẹp component (ch&uacute;ng ta thấy <code>"effect cleaning up"</code>) v&agrave; sau đ&oacute; l&agrave; <code>"effect running"</code>.
Kết luận l&agrave; <code>return () =&gt; { console.log("effect running"); }</code> sẽ chạy mỗi khi component bị x&oacute;a (c&ograve;n gọi l&agrave; hủy gắn kết).
Lưu &yacute; rằng component được gỡ bỏ v&agrave; sau đ&oacute; được ch&egrave;n lại v&igrave; n&oacute; đang được hiển thị lại do c&oacute; thay đổi trạng th&aacute;i.
Trong b&agrave;i học tiếp theo, ch&uacute;ng ta sẽ xem c&aacute;ch sử dụng kiến thức đ&oacute; để dọn dẹp bộ đếm thời gian.
<h2>Chế độ nghi&ecirc;m ngặt (Strict mode)</h2>
Khi chạy đoạn code tr&ecirc;n trong chế độ nghi&ecirc;m ngặt tr&ecirc;n m&ocirc;i trường ph&aacute;t triển, bạn sẽ thấy th&ocirc;ng b&aacute;o sau tr&ecirc;n bảng điều khiển:
<pre class="language-js" data-content="effect%20running%0Aeffect%20cleaning%20up%0Aeffect%20running" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>effect running
effect cleaning up
effect running</code></pre>
Điều n&agrave;y l&agrave; do React đang th&ecirc;m component v&agrave;o DOM, x&oacute;a n&oacute;, sau đ&oacute; th&ecirc;m lại. Điều n&agrave;y nghe c&oacute; vẻ m&acirc;u thuẫn, nhưng n&oacute; gi&uacute;p bạn ph&aacute;t hiện c&aacute;c lỗi r&ograve; rỉ bộ nhớ. Nếu bạn qu&ecirc;n dọn dẹp hiệu ứng, bạn sẽ thấy một số h&agrave;nh vi bất thường trong ứng dụng (chỉ khi chạy ở chế độ nghi&ecirc;m ngặt tr&ecirc;n m&aacute;y cục bộ).
H&agrave;nh vi n&agrave;y cho ph&eacute;p giải thuật reconciliation của React dừng qu&aacute; tr&igrave;nh hiển thị ngay giữa chừng m&agrave; kh&ocirc;ng l&agrave;m hỏng giao diện người d&ugrave;ng. Điều n&agrave;y l&agrave; nền tảng để triển khai c&aacute;c t&iacute;nh năng xử l&yacute; đồng thời trong React 18 (một trong số đ&oacute; vẫn đang được ph&aacute;t triển).
Khi bạn chạy code trong m&ocirc;i trường sản xuất (sử dụng React sản xuất), c&aacute;c hiệu ứng chỉ chạy một lần v&agrave; bạn sẽ kh&ocirc;ng gặp phải h&agrave;nh vi n&agrave;y. V&igrave; vậy, đ&acirc;y chỉ l&agrave; một h&agrave;nh vi cục bộ nhằm gi&uacute;p bạn t&igrave;m ra c&aacute;c lỗi. Tiếp theo ch&uacute;ng ta sẽ l&agrave;m một b&agrave;i tập trực quan để hiểu r&otilde; hơn về điều n&agrave;y.
<h2>T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400;" aria-level="1">Một số phương thức JavaScript y&ecirc;u cầu dọn dẹp để tr&aacute;nh r&ograve; rỉ bộ nhớ (v&iacute; dụ: <code>setTimeout</code>, <code>setInterval</code>).</li>
<li style="font-weight: 400;" aria-level="1">Để dọn dẹp một hiệu ứng, bạn phải trả về một h&agrave;m từ b&ecirc;n trong cuộc gọi <code>useEffect</code>.</li>
<li style="font-weight: 400;" aria-level="1">React sẽ gọi h&agrave;m đ&oacute; mỗi khi component được k&iacute;ch hoạt lại hoặc bị x&oacute;a khỏi DOM.</li>
<li style="font-weight: 400;" aria-level="1">Nếu bạn qu&ecirc;n dọn dẹp hiệu ứng, bạn sẽ thấy một số h&agrave;nh vi bất thường trong ứng dụng (chỉ khi chạy ở chế độ nghi&ecirc;m ngặt tr&ecirc;n m&aacute;y cục bộ).</li>
</ul>

Hiệu ứng yêu cầu dọn dẹp