Site icon Khoa Phạm BK Blog

Những câu hỏi phỏng vấn React thường gặp

anyway

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ự 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:

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:

componentDidMount() {
  fetchApi(); //thực hiện call api
}
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:

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:

<h1 style={{color: "blue"}}>Hello world! </h1>
//content.css
.content {
  color: blue;
}
//content.js
import styles from './content.css';
<h1 className={styles.content}>Hello world!</h1>
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/

Exit mobile version