# React là gì ? Và nó hoạt động như thế nào ? - Cybersoft
React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI). Nó cho tốc độ phản hồi và tương tác với người dùng cực nhanh. Hãy cùng [Cybersoft.edu.vn](https://cybersoft.edu.vn/) tìm hiểu về kiến trúc dựa trên component cho đến Virtual DOM và JSX, giúp bạn hiểu rõ tại sao **React** lại trở thành công cụ không thể thiếu trong lập trình Frontend.

{%youtube 81sMYeZbK9I %}

#### MỤC LỤC

- [Giới thiệu](#Giới-thiệu)

## Giới thiệu
### Định nghĩa React
- Phát triển bởi Facebook, React đã nhanh chóng chiếm lấy trái tim của các nhà phát triển với khả năng cung cấp hiệu suất cao thông qua Virtual DOM (DOM ảo), tối ưu hóa quy trình cập nhật UI.
- Cấu trúc Component dễ dàng tái sử dụng, bảo trì và quản lý mã nguồn một cách hiệu quả.
- React kiểm soát việc render trên giao diện thông qua state và props.
- React là SPA (Single page application) không reload lại trang khi chuyển hướng , và nó sử dụng [One way binding](https://link-bai-viet) được hiểu là dữ liệu được truyền 1 chiều (khi làm việc với form thì mới sử dụng [Two way binding](https://link-bai-viet), kiểm soát data trên input qua setState).
- Lifecycle trong React gồm 3 phần chính: Mounting, Updating, Unmouting.
### Lịch sử và sự phát triển của React
- 2013: Facebook phát hành React, sử dụng Vitural DOM thay vì Real DOM truyền thống.
- 2015: Ra mắt [React Native](https://techx.edu.vn/lo-trinh/software-engineering-nguoi-lon/), mở rộng React sang phát triển ứng dụng di động.
- 2016: Giới thiệu React Fiber(React version 16.), cải tiến kiến trúc nội bộ cho hiệu suất tối ưu.
- 2018: Thêm Hooks vào React 16.8, cho phép sử dụng state và các tính năng React khác trong functional components.
- 2019-2020: Cải tiến với Concurrent Mode, cung cấp trải nghiệm người dùng mượt mà hơn cho các ứng dụng lớn.
- 2021: React 17 đã cải thiện việc sử dụng bộ nhớ của các ứng dụng React và sửa nhiều lỗi ở version 16 trở xuống.
- 2022: React 18 chính thức ra mắt với các cải tiến về hiệu suất, bao gồm Automatic Batching và các APIs mới cho Suspense-fallback.
- 2023: Cộng đồng và React team tiếp tục phát triển các tính năng, hướng đến tối ưu hóa, hiệu suất, và trải nghiệm phát triển tốt hơn.

> **Xem thêm:** Bạn có thể xem 2 bản demo nhanh sự khác nhau của React bản cũ và mới bằng cách click vào 2 link dưới
[React Fiber(React version 16. trở lên)](https://claudiopro.github.io/react-fiber-vs-stack-demo/fiber.html) với [React Stack(version 16. trở xuống)](https://claudiopro.github.io/react-fiber-vs-stack-demo/stack.html).

## Kiến trúc và cách hoạt động của React

### JSX (Javascript XML)

### Component trong React
Gồm 2 loại: Functional Components và Class Components.

**Functional Components(Stateless Components):**
- Là các hàm JavaScript đơn giản nhận vào props và trả về JSX. Đây là cách tiếp cận hiện đại và được ưa chuộng bởi sự ngắn gọn và dễ hiểu.
- Với sự ra đời của Hooks trong React 16.8, Functional Components giờ đây có thể sử dụng state và các tính năng khác của React mà trước đây chỉ có trong Class Components.

**Class Components(Statefull Components):**
- Trước khi Hooks ra đời, Class Components là cách duy nhất để sử dụng state và lifecycle methods trong React.
- Chúng là các class ES6 mở rộng từ React.Component và cung cấp nhiều tính năng cho việc quản lý state và render của component.
- Class Components cung cấp các phương thức như `componentDidMount`, `shouldComponentUpdate`, `componentDidUpdate`, `componentWillUpdate`, `componentWillUnmount` để thực hiện các tác vụ liên quan đến lifecycle của component.

### React Component, Elements và instances
**Components:**
- Có thể là Class Components hoặc Function Components mà bạn có thể sử dụng để tạo ra các đối tượng, mỗi đối tượng đại diện cho một phần nhỏ của UI.
- Components có thể bao gồm các components khác, cho phép bạn tạo ra các ứng dụng phức tạp từ các phần nhỏ đơn giản và tái sử dụng.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

**Elements**
- Là các đối tượng nhẹ mô tả những gì bạn muốn hiển thị trên màn hình. Bạn có thể coi chúng như là mô tả "bản vẽ" cho React để biết cần tạo hoặc cập nhật UI nào.
- Elements không có phương thức hay trạng thái riêng - chúng đơn thuần chỉ là các đối tượng mô tả UI.

const element = <Welcome name="Sara" />;

**Instances**
- Instance là khái niệm áp dụng cho Class Components. Khi một Class Component được render, React tạo một instance của class đó, quản lý trạng thái bên trong và lifecycle hooks.
- Tuy nhiên, với sự xuất hiện của Hooks, việc sử dụng Functional Components đã trở nên phổ biến hơn, và `instances` trong ngữ cảnh này thường không còn được áp dụng.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
// Instance của Welcome được tạo khi component này được mount
const userGreetingInstance = new Welcome({ name: 'Alice' });

:::success
1. Component là định nghĩa cho một phần UI.
2. Element là đối tượng mô tả UI được React sử dụng để render
3. Instance (Class Components) là đối tượng cụ thể mà React sử dụng để quản lý state và lifecycle.
:::

### Virtual DOM
- Virtual DOM (Document Object Model) là một phiên bản ảo của Real DOM, là một đối tượng JavaScript nhẹ nhàng mô phỏng cấu trúc DOM thật.
- Mỗi khi state, props thay đổi React sẽ tạo ra 1 VDOM mới, so sánh cây VDOM hiện tại và VDOM mới, dùng thuật toán diffing (diffing algorithms - trước version 16. là thuật toán stack-based sau bản 16. là fiber based )
- Quá trình so sánh bằng thuật toán này còn gọi là Reconciliation
- Sau khi tìm ra sự khác biệt react sẽ tiến hành cập nhật phần tử đó trên cây DOM thật sử dụng toán tử so sánh `===`
- Xác định những phần tử cụ thể của Real DOM cần phải được cập nhật, giảm thiểu số lượng các thao tác DOM tăng hiệu suất
> **Xem thêm:** Bạn có thể xem 2 bản demo nhanh sự khác nhau của React bản cũ và mới bằng cách click vào 2 link dưới
[React Fiber(React version 16. trở lên)](https://claudiopro.github.io/react-fiber-vs-stack-demo/fiber.html) với [React Stack(version 16. trở xuống)](https://claudiopro.github.io/react-fiber-vs-stack-demo/stack.html).
### Reconciliation
Dưới đây là 3 trường hợp ví dụ
**1. Attribute on tag**

<div className="text-white" style={{color:'red'}}>attribute</div>

// Cập nhật thêm, xóa, sửa attribute
<div className="text-dark" onClick={()=>alert(1)}>attribute</div>

:::success
Việc thêm, xóa, sửa các attribute, React sẽ không render lại JSX.
:::
**2. Recursing On Children(Tag nested)**

<div>
  <Counter />
</div>

// thay đổi thẻ `div` thành `span`
<span>
  <Counter />
</span>

:::success
Việc thay đổi thẻ bọc bên ngoài, React sẽ re-render toàn bộ children bên trong, bất kể các children bên trong không thay đổi.
:::
**3. Key**

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li> // dùng hàm array.unshift('Connecticut')
  <li>Duke</li>
  <li>Villanova</li>
</ul>

Khi ta thêm phần tử vào đầu mảng li như trên, React sẽ render lại toàn bộ các thẻ `li` bên dưới (dù chúng không hề thay đổi).
Đó là lí do ta phải thêm key như bên dưới để chúng không bị render lại dù ta thêm bất kỳ chỗ nào trong array.

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

:::success
React so sánh VDOM và RDOM bằng toán tử `===`. Và key là cái để phân biệt chúng, key phải là giá trị độc nhất.
:::
### Dữ liệu một chiều và hai chiều (One way data flow | two way data flow )
- Trong React, Dữ liệu một chiều (one-way data flow) đề cập đến việc dữ liệu trong ứng dụng được truyền từ components cha xuống components con thông qua props.
- Components con không thể trực tiếp sửa đổi props mà chúng nhận được. Thay đổi state đều phải diễn ra trong component cha, sau đó mới được truyền xuống dưới dạng props mới.
- Dữ liệu 2 chiều là khi làm việc với form, user nhập ký tự và trong component nhận giá trị và trả lại cho ô input thông qua state.

 const [value,setValue] = useState('');
    return <>
        <input 
            type='text'
            value={value}
            onChange={e=>setValue(e.target.value)}/>
    </>

### State management trong React
Chia làm 2 loại: Global state và local state.
#### Global state managemnt
- Client state: redux (useSelector,mapStateToProps,...), context(useContext,useReducer)
- Server state: React-query
#### Local state managemnt
- useState

## Ưu điểm của React
### React cho hiệu suất cao và trải nghiệm mượt mà
React sử dụng Virtual DOM để tối ưu hóa hiệu suất bằng cách giảm thiểu số lần cập nhật DOM thực tế, một trong những thao tác tốn kém hiệu suất nhất trong phát triển web.
Các cập nhật được thực hiện trước trên Virtual DOM, sau đó React sẽ sử dụng thuật toán diff để xác định các thay đổi cần thiết và chỉ áp dụng những thay đổi đó lên DOM thực, giúp tăng tốc độ render và mang lại trải nghiệm người dùng mượt mà hơn.
### React tái sử dụng code thông qua components
React khuyến khích việc phát triển dựa trên component, nơi mỗi phần của giao diện người dùng được tách ra thành các đơn vị độc lập, có thể tái sử dụng và kết hợp lại trong các ứng dụng khác nhau.
Điều này không chỉ giúp quản lý mã nguồn dễ dàng hơn mà còn tăng cường khả năng bảo trì và phát triển mở rộng.

### React cộng đồng lớn mạnh và nhiều thư viện phong phú
React có một cộng đồng lớn mạnh và năng động, với hàng nghìn nhà phát triển và công ty đóng góp vào mã nguồn, tạo ra các thư viện, công cụ và component để hỗ trợ phát triển.
Bạn có thể dễ dàng xem tutorial về các thư viện đi cùng React ở bất cứ mạng xã hội nào youtube, blog, video reels, facebook,...
## Nhược điểm của React
### CSR, SSR, SSG và ISR là gì ?
Để hiểu về nhược điểm của React ta cần biết về các loại cơ chế rendering
- CSR (client side rendering) server sẽ trả cục source HTML/CSS/JS về bên phía client, thiết bị bên client sẽ tải về sau đó chạy file JS rồi render ra giao diện cho người dùng.
- Giảm tải băng thông, nhẹ server.
- Chỉ tải thêm tài nguyên khi cần
- Không refresh page khi chuyển trang -> tăng UX
- Không SEO được
- SSR (server side rendering) bên phía server sẽ phụ trách render HTML và trả về giao diện, thân thiện SEO, nhưng khi chuyển trang sẽ load toàn bộ data
- Fetch api quá nhiều, tốn tài nguyên hơn.
- Refresh page khi chuyển trang -> giảm UX
- SEO tốt
- SSG (static side generation) là trang web tĩnh chỉ có HTML/CSS, không có call api đổ data vào web, thân thiện cho SEO.
- ISR (incremental static Regeneration) - render này chỉ có trong Next.js - cho phép chúng ta xác định các trang cụ thể cần cập nhật "định kỳ" mà không cần deploy lại trang web đó, nó sẽ kiểm tra nếu time validate sẽ render HTML trong cache hay render HTML mới.
- Nếu current_time - last_request_time < revalidate
- TRUE => Render HTML trong cahce
- FALSE => regenerate HTML

### React không hỗ trợ SEO
React.js là CSR, nên không thể SEO.
Có thể cấu hình React ở dạng dehydrated render tạo thêm 1 backend Node.js để cấu hình render ở phía server nhưng rất phức tạp và rườm rà.
Đa phần trước khi khởi tạo dự án leader sẽ quyết định chọn công nghệ gì để phù hợp, nếu dự án liên quan đến SEO marketing sản phẩm thường sẽ phải dùng `Next.JS` tech.

Web sử dụng `Next.js`: https://tiki.vn/, https://www.chotot.com/
### React là library, không phải framework
Cũng không hẳn là nhược điểm, nó chỉ đơn giản là không quá phù hợp đối với người mới vì họ phải tự tay set up khá nhiều thư viện khác vào `react-router-dom`, `react-redux`,... để biến React thành framework.
Framework là 1 cái khung đã có sẵn bạn chỉ cần tuân thủ theo docs mà code theo

## React Intermediate và Advancement
Khi bạn đã ngộ đạo được các thứ cơ bản phía trên, bạn cần phải tiếp tục học thêm nhiều thứ nâng cao dưới đây
- Framework: NextJS, Gatsby, Appollo
- UI Library: Ant Design, Chakra UI, Material UI, Radix shadcn, NextUI, material tailwind,....
- Form xử lý dữ liệu: React Hook Form, Formik
- Validate form: zod, yup.
- Testing, Validation: Jest, Cypress
- Documentation: Storybook
- Backend: Node.js (các framework như Express.js và Nest.js)
- ORM - object relationship mapping(typeORM, prismam) và ODM - object document mapping(mongoose)
- AWS, Micro Frontend(1 cục source tích hợp nhiều framework như angular + react + vuejs)
- Các mô hình

## Kết luận
Tóm lại, qua bài viết trên của mình đã giúp bạn đọc có lượng kiến thức rất cơ bản về React.
Bạn cần thực hành hàng ngàn giờ đồng hồ, kỷ luật mỗi ngày, mới có thể có đủ lượng kiến thức để đáp ứng nhu cầu của công việc.

---
**Tác giả soạn:**
Phạm Gia Huy | Front end dev | 2002

**Các công cụ đã sử dụng:**
**1. Check keyword**
moz.com
mangools.com
Keyword surfer extesion chrome
Keywordtool.io
**2. Kiểm tra đạo văn:**
https://www.duplichecker.com/vi