Top những câu hỏi phỏng vấn React thường gặp - Phần 1

Top những câu hỏi phỏng vấn React thường gặp - Phần 1

thumbnail

Tổng hợp những câu hỏi phỏng vấn React quan trọng cùng Đáp án chi tiết cho developer. Bạn đang chuẩn bị cho buổi phỏng vấn React và muốn tự tin đối mặt với bất kỳ thử thách nào? Hãy không lo lắng nữa! Bài viết này sẽ giúp bạn tăng cường kiến thức và sẵn sàng đáp ứng mọi câu hỏi một cách xuất sắc.

Từ những kiến thức cơ bản đến những khái niệm nâng cao, bạn sẽ được hướng dẫn qua mỗi câu hỏi để hiểu rõ hơn về React và các khái niệm liên quan. Điều này sẽ giúp bạn tự tin giải thích, triển khai và giải quyết các vấn đề phức tạp liên quan đến React trong môi trường phỏng vấn.

Không chỉ đơn thuần là giải đáp câu hỏi, mỗi đáp án còn đi kèm với giải thích chi tiết và ví dụ minh họa để bạn hiểu rõ hơn cách áp dụng kiến thức vào thực tế. Bạn sẽ tiếp cận với các kiến thức thực tế và các tình huống phức tạp mà các nhà tuyển dụng thường gặp khi tuyển dụng các nhà phát triển React.

Vậy hãy cùng bắt đầu hành trình chuẩn bị cho buổi phỏng vấn React của bạn và nắm vững những kiến thức quan trọng nhất để thể hiện tốt nhất khả năng của mình. Đừng để câu hỏi phức tạp làm bạn lo lắng nữa, hãy trở thành một ứng viên xuất sắc và chinh phục cơ hội việc làm mơ ước của bạn!

Hãy bắt đầu với những câu hỏi đầu tiên nào!

1. React là gì?

React (còn gọi là React.js hoặc ReactJS) là một thư viện JavaScript giao diện người dùng mã nguồn mở được sử dụng để xây dựng các giao diện người dùng có thể kết hợp, đặc biệt là cho các single-page applications. Nó được sử dụng để xử lý view layer cho ứng dụng web và thiết bị di động dựa trên các components theo cách tiếp cận khai báo.

React được tạo ra bởi Jordan Walke, một kỹ sư phần mềm làm việc cho Facebook. React lần đầu tiên được triển khai trên News Feed của Facebook vào năm 2011 và trên Instagram vào năm 2012.

Tìm hiểu thêm về React tại đây.

2. Các tính năng chính của React là gì?

Các tính năng chính của React là:
  • Sử dụng cú pháp JSX, a syntax extension của JS cho phép các nhà phát triển viết HTML bằng mã JS của họ.
  • Nó sử dụng Virtual DOM thay vì Real DOM vì các thao tác Real DOM rất tốn kém.
  • Hỗ trợ server-side rendering, hữu ích cho Tối ưu hóa Công cụ Tìm kiếm (SEO).
  • Tuân theo luồng dữ liệu một chiều (one-way data) hoặc liên kết dữ liệu (data-binding).
  • Sử dụng các UI components có thể reusable/composable để phát triển view.

3. JSX là gì?

JSX là viết tắt của Javascript XML và nó là một syntax extentions cho ECMAScript. Về cơ bản, nó chỉ cung cấp syntactic sugar cho hàm React.createEleement(type, props, ...children), cho chúng ta có thể viết HTML bên trong code Javascript.

Trong ví dụ dưới đây, nội dung thẻ h1 được trả về dưới dạng Javascript function cho hàm render.

export default function App() {
  return (
      <h1 className="greeting">{"Hello, this is a JSX Code!"}</h1>
  );
}

Nếu bạn không sử dụng cú pháp JSX thì code Javascript tương ứng sẽ được viết như bên dưới:

import { createElement } from 'react';

export default function App() {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello, this is a JSX Code!'
  );
}

Note: JSX nghiêm ngặt hơn HTML.

4. Sự khác nhau giữa Element và Component?

Element là một đối tượng đơn giản mô tả những gì bạn muốn xuất hiện trên màn hình theo các DOM node hoặc các components. Các Element có thể chứa các phần tử khác trong props của chúng. Tạo một  React Element khá đơn giản. Khi một Element được tạo, nó không thể bị thay đổi.

Biểu diễn Javascript (Không có JSX) của React Element sẽ như sau:

const element = React.createElement("div", { id: "login-btn" }, "Login");

và element này có thể được tạo đơn giản hóa bằng JSX như sau:

<div id="login-btn">Login</div>

Function React.createElement() ở trên trả về một object như sau:

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

Cuối cùng, element này render lên DOM bằng các sử dụng ReactDOM.render().

Trong khi đó một thành phần có thể được khai báo theo nhiều cách khác nhau. Nó có thể là một class với phương thức render() hoặc nó có thể được định nghĩa như một function. Trong cả hai trường hợp, nó lấy props làm đầu vào và trả về cây JSX làm đầu ra:

const Button = ({ handleLogin }) => (
  <div id={"login-btn"} onClick={handleLogin}>
    Login
  </div>
);

Sau đó, được JSX dịch sang function tree React.createElement():

const Button = ({ handleLogin }) =>
  React.createElement(
    "div",
    { id: "login-btn", onClick: handleLogin },
    "Login"
  );

5. Làm thế nào để tạo Components trong React?

Components là các khối xây dựng để tạo User Interfaces (UI) trong React. Có 2 cách có thể tạo một component.

Function Components: Đây là cách đơn giản nhất để tạo một component. Đó là các function JavaScript thuần túy chấp nhận props object làm tham số đầu tiên và trả về các phần tử React để hiển thị đầu ra:

function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>;
}

Class Components: Bạn cũng có thể sử dụng class ES6 để định nghĩa một component. Function component ở trên có thể được viết như một class component:

class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>;
  }
}

6. State trong React là gì?

State của một component là một đối tượng chứa một số thông tin có thể thay đổi trong suốt thời gian tồn tại của component. Điểm quan trọng là bất cứ khi nào đối tượng state thay đổi, component sẽ hiển thị lại. Chúng tôi luôn khuyến nghị làm cho state của chúng ta đơn giản nhất có thể và giảm thiểu số lượng các stateful component.

state

Hãy lấy một ví dụ về component User với message state. Ở đây, hook useState đã được sử dụng để thêm trạng thái vào component User và nó trả về một mảng với trạng thái hiện tại và function cập nhật nó.

import React, { useState } from "react";

function User() {
  const [message, setMessage] = useState("Welcome to React world");

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

State tương tự như props, nhưng nó là riêng tư và được kiểm soát hoàn toàn bởi component, tức là không thể truy cập được đối với bất kỳ component nào khác cho đến khi component chủ sở hữu quyết định truyền nó.

7. Props là gì trong React?

Props là đầu vào cho các component. Chúng là các giá trị hoặc đối tượng đơn lẻ chứa một tập hợp các giá trị được truyền đến các component khi tạo tương tự như các thuộc tính thẻ HTML. Tại đây, dữ liệu được truyền từ component cha sang component con.

Mục đích chính của props trong React là cung cấp chức năng sau:
  • Truyền dữ liệu tùy chỉnh cho component của bạn.
  • Kích hoạt trạng thái thay đổi.
  • Sử dụng thông qua this.props.reactProp bên trong phương thức render() của component.

Ví dụ, hãy create một element với thuộc tính reactProp:

<Element reactProp={"1"} />

Sau đó, tên thuộc tính reactProp (hoặc bất kỳ tên nào bạn đặt) sẽ trở thành một thuộc tính được gắn vào object props gốc của React vốn đã tồn tại trên tất cả các component được tạo bằng thư viện React.

props.reactProp

Ví dụ, cách sử dụng các props trong function component trông giống như bên dưới:

import React from "react";
import ReactDOM from "react-dom";

const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.age}</p>
    </div>
  );
};

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent name="John" age="30" />
      <ChildComponent name="Mary" age="25" />
    </div>
  );
};

Các thuộc tính từ object props có thể được truy cập trực tiếp bằng cách sử dụng cú pháp destructuring trong ES6 (ECMAScript 2015). Component con ở trên có thể được đơn giản hóa như bên dưới:

  const ChildComponent = ({name, age}) => {
      return (
        <div>
          <p>{name}</p>
          <p>{age}</p>
        </div>
      );
    };

8. Sự khác nhau giữa state và props trong React?

Trong React, cả state props đều là các đối tượng JavaScript đơn giản và được sử dụng để quản lý dữ liệu của một component, nhưng chúng được sử dụng theo những cách khác nhau và có các đặc điểm khác nhau. State được quản lý bởi chính component đó và có thể được cập nhật bằng hàm setState(). Không giống như các props, state có thể được sửa đổi bởi component và được sử dụng để quản lý state bên trong của component. Các thay đổi trong state kích hoạt kết xuất lại component và các component con của nó. Props (viết tắt của "thuộc tính") được chuyển đến một component bởi component cha của nó và ở chế độ chỉ đọc, nghĩa là chính component đó không thể sửa đổi chúng. Props có thể được sử dụng để định cấu hình hành vi của một component và truyền dữ liệu giữa các component.

9. Tại sao chúng ta không nên cập nhật state trực tiếp?

Nếu bạn cố gắng cập nhật state trực tiếp thì nó sẽ không re-render lại component.

//Wrong
this.state.message = "Hello world";

Thai vào đó, hãy sử dụng phương thức setState(). Nó sẽ lên lịch trình để cập nhật lại state của component. Khi state thay đổi, component sẽ phản hồi bằng cách re-rendering.

//Correct
this.setState({ message: "Hello World" });

Lưu ý: Bạn có thể gán trực tiếp state object trong hàm tạo constructor() hoặc sử dụng cú pháp khai báo class field của Javascript mới nhất.
 

10. Sự khác nhau giữa HTML và React event handling?

Dưới đây là một số khác biệt chính giữa xử lý sự kiện HTML và React:

Trong HTML, tên event thường được đại diện bằng chữ thường theo một quy ước:

<button onclick="activateLasers()"></button>

Trong khi đó, React tuân theo quy ước cameCase:

<button onClick={activateLasers}>

Trong HTML, bạn có thể return false để ngăn chặn hành vi mặc định:

<a
  href="#"
  onclick='console.log("The link was clicked."); return false;'
/>

Trong khi React cần phải gọi đến preventDefault() rõ ràng:

function handleClick(event) {
  event.preventDefault();
  console.log("The link was clicked.");
}

Trong HTML, bạn cần phải gọi function bằng cách nối thêm (). Trong khi React không cần làm như vậy. (Ví dụ activateLasers ở trên).

11. Mục đích của callback function là đối số của setState()?

Callback function được gọi khi setState() kết thúc và component được re-rendered. Vì setState() hoạt động không đồng bộ bên callback function được sử dụng cho bất kỳ hành động nào.

Lưu ý: Bạn nên sử dụng phương thức lifecycle thay vì callback function này.

setState({ name: "John" }, () =>
  console.log("The name has updated and component re-rendered")
);

12. Làm cách nào để truyền tham số cho event handler hoặc callback?

Bạn có thể sử dụng arrow function bao quanh event handler và truyền tham số:

<button onClick={() => this.handleClick(id)} />

Điều này tương tự với việc bạn gọi .bind :

<button onClick={this.handleClick.bind(this, id)} />

Ngoài hai cách tiếp cận này, bạn cũng có thể truyền đối số cho hàm được định nghĩa là arrow function:

<button onClick={this.handleClick(id)} />;
handleClick = (id) => () => {
  console.log("Hello, your ticket number is", id);
};

Kết luận

Vậy là mình đã tổng hợp một số câu hỏi thường gặp khi phỏng vấn React. Mình sẽ tiếp tục thu thập nhiều hơn các câu hỏi và chia sẽ đến với mọi người. Các bạn hãy theo dõi Trang để không bỏ lỡ các bài viết tiếp theo nhé. 

Các bài viết liên quan:

No comments:

Powered by Blogger.