Bộ câu hỏi phỏng vấn kỹ năng lập trình 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.

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
}

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.

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

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