Những khái niệm cơ bản nhất về React

Đô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.

1. 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)

https://reactjs.org/

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:

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.

https://reactjs.org/docs/create-a-new-react-app.html