Đôi khi anh em lập trình code quá nhiều, join ngay vào project mà quên mất những khái niệm cơ bản nhất. Những khái niệm cơ bản như JSX, Components, Props, State, Fragment, … rất quen thuộc với mọi người nhưng đôi khi khó để định nghĩa hay trả lời 1 cách chính xác, nhất là trong những cuộc phỏng vấn xin việc. Bài viết này mình xin đưa ra những giải thích đơn giản mà vừa đủ về những gì cơ bản nhất của React.
- React là gì?
ReactJS là 1 thư viện JavaScript, mã nguồn mở phát triển bởi Facebook từ năm 2011 (tức là được hơn 10 năm rồi). Nguyên lý xây dựng của React là dựa trên components (component-based approach), có thể tái sử dụng, phù hợp với ứng dụng 1 trang (Single Page Application)
2. React Native
Tiện thể đá qua React Native, nó là 1 framework, tất nhiên cũng cùng cha là Facebook, sử dụng để phát triển ứng dụng di động Android, iOS, Web.
3. Single Page Application
SPA là ứng dụng web hoặc trang web tương tác với người dùng bằng cách tự động viết lại trang web hiện tại với dữ liệu mới từ máy chủ, thay vì phải tải lại toàn bộ trang (đấy là lí do tại sao gọi là 1 trang)
4. Các đặc trưng cơ bản của React
- JSX: JavaScript XML – cú phát mở rộng của JavaScript được React sử dụng
- Components: thành phần, với React thì tất cả được tạo nên từ components
- One-way Data Binding: truyền dữ liệu 1 chiều, từ component cha đến component con
- Virtual DOM: DOM ảo, 1 bản sao chép DOM thật được React tạo ra nhằm tối ưu việc re-render trang
Lưu ý là trình duyệt (Browsers) không hiểu được JSX, nên để React chạy được thì phải dựa vào trình biên dịch như Babel. Nếu các bạn tạo project bằng Create React App hay Next.js thì vốn dĩ nó cũng đóng gói sử dụng Babel và Webpack cho việc build rồi nhé.
https://reactjs.org/docs/introducing-jsx.html
5. Props và State
Props là Properties sử dụng để truyền dữ liệu từ component cha đến component con. Props hỗ trợ cả truyền biến và hàm và nó là read-only (chỉ đọc). State là 1 trạng thái, trong React nó là 1 cấu trúc chứa dữ liệu và có thể được cập nhật trong suốt vòng đời của component. State sẽ quyết định khi nào và cách thức mà component được re-render. 1 so sánh nhanh giữa Props và State như bảng dưới:
| Props | State |
| Read-Only (chỉ đọc) | Có thể thay đổi |
| Truyền dữ liệu từ component cha đến component con | Lưu thông tin của một component |
| Có thể thay đổi bởi component cha | Không thể thay đổi từ component cha |
| Không thể thay đổi trong các component con | Có thể thay đổi trong các component con |
| Hỗ trợ component trong việc tái sử dụng | Không hỗ trợ component trong việc tái sử dụng |
https://reactjs.org/docs/components-and-props.html
https://reactjs.org/docs/state-and-lifecycle.html
6. Stateless Component, Statefull Component, Pure Component
- Stateless Component không chứa và quản lý state
- Statefull Component có thể chứa và quản lý state
Trong lifecycle của 1 component, function shouldComponentUpdate được gọi khi 1 component nhận thấy có sự thay đổi tác động lên DOM và trả về giá trị true / false để component thực hiện cập nhật.
- Pure Component: hàm shouldComponentUpdate trả về giá trị mặc định là true
https://reactjs.org/docs/react-api.html#reactpurecomponent
7. High Order Component (HOC)
HOC là 1 kỹ thuật nâng cao trong React cho việc tái sử dụng logic component. Nó nhận đầu vào là 1 component và trả về 1 component mới. HOCs rất phổ biến trong các thư viện bên thứ 3 của React (third-party libraries) ví dụ như Redux.
https://reactjs.org/docs/higher-order-components.html
8. Fragment
Fragment là 1 pattern phổ biến của React giới thiệu từ version 16, nó cho phép bạn return nhiều element từ 1 component mà không làm sinh ra những DOM element không cần thiết.
https://reactjs.org/docs/fragments.html
9. Reconciliation
React sử dụng virtual DOM (mình giải thích ở trên), và để cập nhật DOM tree thì React sử dụng phương pháp duyệt cây theo chiều rộng (Breadth-First Algorithm) và sử dụng Diff Algorithm để quyết định xem sẽ cập nhật hay tái sử dụng 1 Node trên cây DOM.
https://reactjs.org/docs/reconciliation.html
10. Create React App (CRA)
CRA là 1 công cụ CLI cho phép bạn nhanh chóng tạo và chạy các ứng dụng React mà không cần bước cấu hình.