React là thư viện front-end được rất nhiều công ty sử dụng hiện nay, nhu cầu tuyển dụng cho vị trí này cũng rất lớn. Nếu bạn đang chuẩn bị tham gia vào những cuộc phỏng vấn cho vị trí lập trình viên React thì bài viết này là dành cho bạn. Đây là tổng hợp những câu hỏi phỏng vấn React thường gặp nhất từ cơ bản đến nâng cao sẽ giúp bạn tự tin hơn cho cuộc phỏng vấn sắp tới của mình.
React là gì? Những tính năng chính của React.
React là một thư viện mã nguồn mở viết bằng ngôn ngữ JavaScript (JS), được Facebook phát triển từ hơn 10 năm nay. Nó được xây dựng bằng cách tiếp cận theo hướng dựa trên thành phần (component-based) giúp có thể dễ dàng tái sử dụng lại các phần UI/UX trên các màn hình khác nhau. React thích hợp cho việc tạo ra các ứng dụng một trang (Single Page App) dành cho cả web và thiết bị di động, vì thế hiện nay có rất nhiều các công ty lựa chọn React làm thư viện để phát triển các ứng dụng của mình.
Các tính năng chính của React bao gồm:
- Sử dụng DOM ảo (VirtualDOM) để quản lý sự thay đổi và cập nhật trạng thái của các đối tượng trên DOM thật. VirtualDOM sẽ xác nhận những thành phần cần phải cập nhật và thực hiện việc render lại thành phần đó trên DOM thật thay vì cập nhật lại tất cả cùng một lúc, từ đó giúp hiệu năng của các ứng dụng React trở nên tốt hơn.
- Component-Based: với React thì tất cả đều được tạo nên từ components (thành phần). Một trang web phức tạp như Facebook cũng được tạo nên từ hàng nghìn components độc lập, dễ dàng tái sử dụng hay chỉnh sửa mà không ảnh hưởng đến các thành phần khác.
- Liên kết dữ liệu một chiều: khi thiết kế ứng dụng React, các component con sẽ được lồng trong component cha, dữ liệu sẽ được truyền từ cha xuống con theo một chiều nhanh chóng và thống nhất
Sự khác nhau giữa ReactJs và React Native.
React Native được team phát triển Facebook ra mắt 2 năm sau khi ra mắt ReactJs, nó được dùng để phát triển các ứng dụng dành cho mobile (không phải chạy trên nền web). React Native và ReactJs có chung nguyên lý phát triển, ngôn ngữ sử dụng, các đặc trưng của React vì thế nên có thể dễ dàng học và sử dụng cả hai nền tảng này cùng lúc.
Điểm khác nhau ở đây là trong khi React Native là một framework hoàn chỉnh có thể giao tiếp với native API để build ra các ứng dụng chạy trên nền tảng di động như Android hay iOS; thì ReactJs vốn dĩ chỉ là một thư viện UI dành cho web, nó cần thêm một số các thư viện khác giúp cho việc build, setup môi trường thì mới có thể tạo ra được một ứng dụng hoàn chỉnh. Một điểm khác nhau nữa trong cách viết code đó là việc React Native không sử dụng HTML vì nó không phải viết để chạy trên web như ReactJs, thay vào đó nó cung cấp cho các lập trình viên các component hoạt động tương tự (hầu hết là được biến đổi từ các phần tử tương đương trong HTML).
Phân biệt khái niệm Component và Element trong React
Khái niệm React Element dùng để chỉ những gì được hiển thị lên màn hình như một nút bấm (button), một ô nhập liệu (input) hay cả một modal đăng nhập. Một Element có thể chứa nhiều elements khác, giống như trên modal đăng nhập thì có thể chứa ô input nhập usernam và password cùng với cả button thực hiện đăng nhập. Trong source code, để tạo ra được React Element thì chúng ta sẽ sử dụng một function hoặc class để render ra nó, và phần function hay class đó được gọi là React Component.
React cung cấp function tạo ra Element như sau:
const Button = ({ onLogin }) =>
React.createElement("div", { id: "login-btn", onClick: onLogin }, "Login");
Trong đoạn code trên Button là một React Component và sẽ thực hiện việc render ra màn hình một Element là thẻ div với các thuộc tính như id hay onClick được truyền vào.
Lifecycle của component trong React
Lifecycle (vòng đời) của một component trong React có 3 giai đoạn:
- Mounting: giai đoạn khởi tạo – khi component đã sẵn sàng để gắn kết trong DOM của trình duyệt để hiển thị lên cho người dùng.
- Updating: giai đoạn component được cập nhật – để cập nhật component thì chúng ta có thể truyền props mới đến component hoặc set lại local state bên trong component đó. Sau khi component render lại thì cây DOM vị trí chứa component cũng sẽ được hiển thị với các giá trị mới để người dùng nhìn thấy.
- Unmounting: giai đoạn component bị ngắt kết nối, bỏ ra khỏi cây DOM của trình duyệt. Đây cũng là giai đoạn cuối trong vòng đời của component. Từ lúc này component sẽ không thể được truy cập hay tác động nữa trừ khi nó được mouting và bắt đầu mộ lifecycle mới.
Với class component, React cung cấp cho chúng ta các lifecycle method như componentDidMount, componentDidUpdate, componentWillReceiveProps, componentWillUnMount để quản lý các sự kiện xảy ra ở từng giai đoạn trong vòng đời của nó. Còn trong functional component, React cung cấp Hook useEffect cho việc xử lý này. Ví dụ bài toán muốn call API lấy dữ liệu về khi vào màn hình, chúng ta có thể xử lý như sau:
- Với class component:
componentDidMount() {
fetchApi(); //thực hiện call api
}- Với functional component:
useEffect(() => {
fetchApi(); //thực hiện call api
}, []);Higher-Order Components là gì?
Higher-Order Component (HOC) là một kỹ thuật nâng cao trong React được sử dụng cho mục đích tái sử dụng logic của Component. HOC bản chất là một function nhận tham số đầu vào gồm 1 Component và các logic được tái sử dụng để tạo ra được một Component mới. HOCs là 1 pattern rất quan trọng giúp React trở nên hữu ích hơn rất nhiều khi ngoài việc tái sử dụng phần UI, giờ chúng ta có thể tái sử dụng được cả phần logic code.
HOCs rất phổ biến trong các thư viện bên thứ ba hay được sử dụng cùng với React như Redux – một thư viện giúp quản lý các global state trong ứng dụng.
Redux là gì? Tại sao phải sử dụng Redux trong ứng dụng React
Redux là 1 công cụ giúp quản lý các biến global state trong ứng dụng React hay các thư viện JavaScript nào khác. Khi ứng dụng của chúng ta trở nên lớn hơn với hàng trăm hay hàng nghìn components thì việc chia sẻ dữ liệu giữa các Components với nhau cũng trở nên phức tạp hơn. Redux tạo ra 1 store lưu trữ dữ liệu của ứng dụng vào một nơi duy nhất, sau đó bằng cách connect đến store thì Component của chúng ta có thể lấy ra để sử dụng hoặc cập nhật để thay đổi giá trị biến.
3 thành phần cơ bản trong Redux gồm:
- Store: Nơi giữ các biến trạng thái của ứng dụng, với mô hình Redux thì sẽ chỉ tồn tại một store duy nhất
- Actions: các sự kiện được gửi đến để cập nhật dữ liệu các biến trong store của Redux
- Reducers: là các function để lấy ra giá trị (trạng thái) của các biến trong store
React Hook là gì? Bạn đã từng viết custom Hook nào chưa?
Hooks là những function cho phép bạn sử dụng các biến state và các hàm liên quan đến lifecycle ở trong các functional Components. Hooks giúp giảm lượng code thừa khi phải triển khai lại các logic có thể dùng chung ở nhiều components khác nhau mà cần liên quan đến local state. React cung cấp sẵn cho chúng ta một số các hook hữu ích: useState, useEffect, useContext, useMemo, ….
Chúng ta cũng có thể tự viết những custom Hook riêng cho mình như ví dụ dưới đây: useWindowSize là 1 hook có tác dụng lấy kích thước của khung trình duyệt web hiện tại.
import { useState, useEffect } from "react";
export const useWindowSize = () => {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
const handler = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
};
window.addEventListener("resize", handler);
return () => {
window.removeEventListener("resize", handler);
};
}, []);
return windowSize;
};Có những cách nào để styling trong React
Có vài cách để thiết lâp CSS cho các component trong React như sau:
- Inline Styling: khai báo trực tiếp CSS vào thuộc tính style trong code JS
<h1 style={{color: "blue"}}>Hello world! </h1>- CSS module: tạo file .css riêng và import vào component
//content.css
.content {
color: blue;
}
//content.js
import styles from './content.css';
<h1 className={styles.content}>Hello world!</h1>- Sử dụng thư viện styled-components tạo ra 1 component mới kèm css
const Content = styled.h1({
color: blue,
});Tổng kết
Trên đây là tổng hợp của mình về một số câu hỏi hay gặp nhất khi các bạn tham gia phỏng vấn cho vị trí lập trình viên React. Hy vọng bài viết đã giúp các bạn có thể tư tin hơn và đạt được kết quả tốt nhất cho đợt tuyển dụng sắp tới. Hẹn gặp lại các bạn trong các bài viết tiếp theo của mình.
Bài viết đăng trên blog TopDev
https://topdev.vn/blog/nhung-cau-hoi-phong-van-react-thuong-gap/
Bình luận