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

Ch&uacute;ng ta đ&atilde; sử dụng <code>useEffect</code> kh&aacute; nhiều nhưng chưa thực sự t&igrave;m hiểu về ảnh hưởng của n&oacute; đến hiệu suất.
Hiệu ứng m&agrave; bạn l&ecirc;n lịch với <code>useEffect</code> sẽ chạy sau khi component được hiển thị tr&ecirc;n DOM, đ&acirc;y l&agrave; một quyết định thiết kế của nh&oacute;m React v&igrave; l&yacute; do hiệu suất. Trong b&agrave;i học n&agrave;y, ch&uacute;ng ta sẽ t&igrave;m hiểu l&yacute; do tại sao.
<h2 style="text-align: justify;">V&iacute; dụ về localStorage</h2>
<code>localStorage</code> (hoặc <code>window.localStorage</code>) l&agrave; một API của tr&igrave;nh duyệt cho ph&eacute;p ch&uacute;ng ta lưu trữ dữ liệu dưới dạng c&aacute;c cặp kh&oacute;a v&agrave; gi&aacute; trị.
Vấn đề với <code>localStorage</code> l&agrave; n&oacute; l&agrave; một API đồng bộ, tức l&agrave;:
<pre class="language-js" data-content="console.log(%22A%22)%3B%0AlocalStorage.setItem(%22key%22%2C%20%22value%22)%3B%0Aconsole.log(%22B%22)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>console.log("A");
localStorage.setItem("key", "value");
console.log("B");</code></pre>
Trong đoạn code tr&ecirc;n, ch&uacute;ng ta sẽ thấy <code>console.log("A")</code> được in ra trước, sau đ&oacute;, nếu <code>localStorage.setItem()</code> mất 200 mili gi&acirc;y để ho&agrave;n th&agrave;nh th&igrave; <code>console.log("B")</code> sẽ phải đợi <code>localStorage.setItem()</code> ho&agrave;n th&agrave;nh trước khi n&oacute; được gọi.
H&agrave;nh vi n&agrave;y kh&ocirc;ng tốt v&igrave; n&oacute; c&oacute; thể l&agrave;m chậm ứng dụng ngay lập tức.
Nếu bạn chỉ cần lưu trữ một v&agrave;i mục th&igrave; việc sử dụng <code>localStorage</code> l&agrave; chấp nhận được, nhưng n&oacute;i chung, bạn kh&ocirc;ng n&ecirc;n sử dụng qu&aacute; thường xuy&ecirc;n do n&oacute; sẽ l&agrave;m chậm đ&aacute;ng kể hiệu suất của ứng dụng.
<h2 style="text-align: justify;">localStorage trong component</h2>
Giả sử bạn muốn gọi <code>localStorage</code> trong một component React; bạn n&ecirc;n l&agrave;m điều đ&oacute; b&ecirc;n trong <code>useEffect</code> v&igrave; hai l&yacute; do sau:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Đ&oacute; l&agrave; hiệu ứng phụ (n&oacute; thay đổi c&aacute;i g&igrave; đ&oacute; b&ecirc;n ngo&agrave;i component React)</li>
<li style="font-weight: 400;" aria-level="1">Hiệu suất của ứng dụng (được minh họa b&ecirc;n dưới).</li>
</ol>
Để minh họa l&yacute; do tại sao việc sử dụng <code>localStorage</code> c&oacute; thể l&agrave;m chậm hiệu suất, <a href="https://tek4.vn/">Tek4</a> đ&atilde; tạo một mảng đối tượng lớn trong <code>data.js</code>, sau đ&oacute; ch&uacute;ng ta sẽ th&ecirc;m v&agrave; lưu mảng n&agrave;y v&agrave;o <code>localStorage</code> trong một component React. Chương tr&igrave;nh như sau:
<pre class="language-js" data-content="import%20%7BuseState%7D%20from%20%22react%22%3B%0Aimport%20data%20from%20%22.%2Fdata.js%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Brandom%2C%20setRandom%5D%20%3D%20useState(Math.random())%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20THIS%20IS%20BAD%20FOR%20PERFORMANCE%0A%C2%A0%C2%A0%C2%A0%C2%A0localStorage.setItem(%22data%22%2C%20JSON.stringify(data))%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Ch1%3E%7Brandom%7D%3C%2Fh1%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cbutton%3ERe-render%3C%2Fbutton%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useState} from "react";
import data from "./data.js";

function App() {
 const [random, setRandom] = useState(Math.random());

 // THIS IS BAD FOR PERFORMANCE
 localStorage.setItem("data", JSON.stringify(data));

 return &lt;&gt;
 &lt;h1&gt;{random}&lt;/h1&gt;
 &lt;button&gt;Re-render&lt;/button&gt;
 &lt;/&gt;
}</code></pre>
Vấn đề với đoạn code tr&ecirc;n l&agrave; nếu <code>localStorage.setItem()</code> mất 200ms để ho&agrave;n th&agrave;nh, điều n&agrave;y sẽ l&agrave;m chậm việc hiển thị cập nhật c&aacute;c tr&ecirc;n m&agrave;n h&igrave;nh của người d&ugrave;ng, dẫn đến hiệu suất kh&ocirc;ng tốt.
Để minh họa r&otilde; hơn ảnh hưởng của việc sử dụng <code>localStorage</code> đối với hiệu suất, ch&uacute;ng ta sẽ tăng số lượng l&ecirc;n th&agrave;nh 200 cuộc gọi <code>localStorage.setItem()</code> v&agrave; <code>localStorage.getItem()</code>.
Sau đ&oacute;, ta tạo một phi&ecirc;n bản tối ưu h&oacute;a bằng c&aacute;ch đặt 200 cuộc gọi <code>localStorage</code> b&ecirc;n trong một <code>useEffect</code> như sau:
<pre class="language-js" data-content="import%20%7BuseState%2C%20useEffect%7D%20from%20%22react%22%3B%0Aimport%20data%20from%20%22.%2Fdata.js%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Brandom%2C%20setRandom%5D%20%3D%20useState(Math.random())%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20this%20is%20BETTER%20for%20performance%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%A0localStorage.setItem(%22data%22%2C%20JSON.stringify(data))%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Ch1%3E%7Brandom%7D%3C%2Fh1%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cbutton%3ERe-render%3C%2Fbutton%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useState, useEffect} from "react";
import data from "./data.js";

function App() {
 const [random, setRandom] = useState(Math.random());

 // this is BETTER for performance
 useEffect(() =&gt; {
 localStorage.setItem("data", JSON.stringify(data));
 });

 return &lt;&gt;
 &lt;h1&gt;{random}&lt;/h1&gt;
 &lt;button&gt;Re-render&lt;/button&gt;
 &lt;/&gt;
}</code></pre>
Bằng c&aacute;ch đ&oacute;ng g&oacute;i c&aacute;c cuộc gọi <code>localStorage</code> bằng <code>useEffect</code>, ch&uacute;ng ta cho ph&eacute;p component được hiển thị tr&ecirc;n m&agrave;n h&igrave;nh trước v&agrave; thực hiện c&aacute;c cuộc gọi <code>localStorage</code> sau khi component đ&atilde; được hiển thị.
Dưới đ&acirc;y l&agrave; phi&ecirc;n bản tăng cường (bạn thường gặp vấn đề li&ecirc;n quan đến hiệu suất khi c&oacute; một số lượng lớn component, v&igrave; vậy ch&uacute;ng ta c&oacute; thể m&ocirc; phỏng t&igrave;nh huống đ&oacute; bằng c&aacute;ch tăng số lượng cuộc gọi <code>localStorage</code>).
Lưu &yacute; rằng <code>useEffect</code> kh&ocirc;ng phải l&agrave; một giải ph&aacute;p tuyệt đối ho&agrave;n hảo; nếu code b&ecirc;n trong <code>useEffect</code> thực sự chạy chậm th&igrave; hiệu suất vẫn c&oacute; thể bị ảnh hưởng.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Hiệu ứng m&agrave; bạn l&ecirc;n lịch với <code>useEffect</code> sẽ chạy sau khi component được hiển thị tr&ecirc;n DOM.</li>
</ul>
&nbsp;
B&acirc;y giờ ch&uacute;ng ta đ&atilde; biết rằng <code>localStorage</code> chỉ n&ecirc;n được sử dụng cho việc đọc/ghi dữ liệu c&oacute; k&iacute;ch thước nhỏ v&agrave; n&oacute; n&ecirc;n được đ&oacute;ng g&oacute;i bằng <code>useEffect</code>, trong 2 chương tiếp theo, ch&uacute;ng ta sẽ t&igrave;m hiểu c&aacute;ch lưu trữ dữ liệu trạng th&aacute;i v&agrave;o <code>localStorage</code> v&agrave; c&aacute;ch kh&ocirc;i phục dữ liệu từ <code>localStorage</code>!

Hiệu suất của Effect