Câu hỏi phỏng vấn ReactJs

Hôm nay không viết về code nữa mà mình sẽ tổng hợp những câu hỏi kỹ thuật thường gặp khi phỏng vấn về React.

Một số khái niệm về React.

React là gì?

React là một thư viện front-end được Facebook phát triển từ năm 2011. React được open-source từ năm 2015, và bây giờ là một trong những thư viện được cộng đồng sử dụng nhiều nhất. React giúp người dùng viết những component từ đơn giản đến phức tạp và có khả năng tái sử dụng cao (reusable UI components).

React hoạt động như thế nào? Virtual-DOM hoạt động như thế nào?

React tạo virtual DOM. Khi state thay đổi trong component, đầu tiên react sẽ chạy thuật toán “diffing”, so sánh những thay đổi trong virtual DOM. Bước thứ hai, react sẽ cập nhật những thay đổi đó lên DOM.
HTML DOM luôn luôn theo cấu trúc cây, càng lúc sẽ trở nên càng lớn theo ứng dụng. Ngày nay, ta sử dụng ngày cảng phổ biến dynamic web app (Single Page Application – SPAs), ta càng tác động nhiều hơn vào cây HTML DOM. Đó chính là một trong những tác nhân gây ra giảm performance và là nỗi đau của lập trình viên 😦
Virtual DOM đơn giản là một javascript object, nó copy tất cả từ cây DOM thực, có thể coi nó là một abstraction của HTML DOM. Tất nhiên nó không phải được tạo ra bởi React, React chỉ sử dụng nó. ReactElements tồn tại trên virtual DOM, nó là node cơ bản nhất. Khi chúng ra định nghĩa elements thì ReactElement được render trên cây DOM thực.
Bất cứ khi nào ReactComponent thay đổi state, thuật toán so sánh của React sẽ chạy và nhận diện những thay đổi đó. Sau đó cập nhật những thay đổi đó lên DOM. Do đó, nó sẽ nhanh hơn so với việc cập nhật lại toàn bộ cây DOM.

JSX là gì?

JSX là cách viết tắt của Javascript XML. React sử dụng JSX để viết ReactComponent. Nó sử dụng như javascript nhưng viết với cú pháp của HTML. Nó giúp file HTML trở nên dễ hiểu hơn. Người dùng có thể bỏ tất cả expression của javascript vào giữa cặp ngoặc nhọn {}.
Sau khi biên dịch thì JSX expression sẽ trở thành Javascript object bình thường (chú ý là trình duyệt không thể đọc trực tiếp được JSX). Điều này có nghĩa là ta có thể sử dụng các lệnh rẽ nhánh (if...else...), vòng lặp (for), gán giá trị cho biến, nhận nó như là một tham số hoặc nó cũng có thể là kết quả trả về của một function. React không bắt buộc phải dùng JSX, nhưng nó được recommend sử dụng để viết ứng dụng React.

Ví dụ sử Component sử dụng JSX và sử dụng javascript thông thường

ReactDom là gì? Điểm khác biệt giữa ReactReactDom ?

Từ v0.14 trở về trước, ReactDom là một function của React, nhưng sau đó đã được tách ra làm hai thư viện riêng biệt.
ReactDom làm một công việc duy nhất là gắn React vào real DOM.

React Component

Điểm khác biệt giữa Class Component và Function Component

Trước khi giới thiệu Hooks trong React, Function Components được gọi là Stateless Components. Sau khi giới thiệu Hooks, functional components cũng đã có những tính năng gần tương tự như class components và được sử dụng chủ yếu. Mặc dù vậy, việc hiểu được 2 loại component này cũng rất quan trọng.
Dưới đây là những khác biệt chính:
1. Khai báo:
Class components: được khai báo bằng ES6 class.
Function components: được khai báo bằng javascript function, có thể khai báo bằng function key word hoặc arrow function
2. Props:
Class components: được sử dụng thông qua từ khoá this.props
Function components: được khai báo như param của function và có thể sử dụng trực tiếp trong component.
3. State:
Class components: sử dụng thông qua từ khoá this.state và dùng function this.setState() để cập nhật giá trị của State. Ta không thể sử dụng React Hooks trong class components.
Function components: sử dụng React Hooks để quản lý state, dùng useState Hook để setState bên trong component. useState trả về một array gồm có 2 phần tử, phần tử đầu tiên là giá trị hiện tại của state, phần tử thứ hai là function dùng để cập nhật giá trị của state.

(to be continue ….)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s