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

1. React là gì?

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook vào năm 2013. Nó được sử dụng để xây dựng giao diện người dùng (UI) cho các ứng dụng web đơn trang (Single Page Applications - SPA). ReactJS tập trung vào việc tạo ra các thành phần (components) tái sử dụng, cho phép bạn xây dựng giao diện dựa trên mô hình "UI = f(state)".

Điểm mạnh của ReactJS là sự hiệu quả và tối ưu trong việc render giao diện bằng cách sử dụng Virtual DOM (DOM ảo). Khi dữ liệu thay đổi, React không trực tiếp thay đổi DOM thực tế mà thay vào đó sẽ tạo một bản sao ảo của DOM và so sánh nó với trạng thái trước đó. Sau đó, chỉ các thay đổi thực sự được áp dụng vào DOM thực tế, giúp tối ưu hóa hiệu suất và giảm tải cho trình duyệt.

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.

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

Ảnh minh họa

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?

1) State (Trạng thái):

State là một đối tượng JavaScript chứa các thông tin dữ liệu có thể thay đổi trong một thành phần React.
State được quản lý bên trong thành phần và thay đổi thông qua phương thức setState().
Khi trạng thái thay đổi, React sẽ tự động cập nhật giao diện của thành phần để phản ánh trạng thái mới.
Trạng thái của một thành phần có thể ảnh hưởng đến giao diện và hành vi của nó.

2) Props (Thuộc tính):

Props là viết tắt của "properties" (thuộc tính), và là cách để truyền dữ liệu từ thành phần cha (parent component) xuống các thành phần con (child components).
Props là dữ liệu chỉ đọc và không thể thay đổi bên trong thành phần con. Các thành phần con nhận các giá trị props từ thành phần cha và sử dụng chúng để hiển thị thông tin hoặc thực hiện các hành động.
Props giúp tạo sự tương tác và tái sử dụng giữa các thành phần trong ứng dụng React.

Tìm hiểu sâu hơn tại đây

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";

Thay 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 camelCase:

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

Tham khảo thêm phần sau nhé

quản trị viên

Chia sẻ bài viết:

Tin tức liên quan

Cách sử dụng Async Await Fetch Axios trong lập trình JavaScript

Trong lập trình JavaScript, async/await và fetch/axios là những khái niệm quan trọng giúp xử lý các tác vụ bất đồng bộ một cách dễ dàng và hiệu quả. Trên thực tế, chúng đã trở thành tiêu chuẩn cho việc làm việc với API và tương tác với dữ liệu từ máy chủ. Trong bài viết này, chúng ta sẽ khám phá sâu hơn về async/await, fetch, axios và cách chúng hoạt động trong lập trình JavaScript.

Redux Thunk Là Gì? Cách dùng Redux với ví dụ chi Tiết Từ A-Z

Redux Thunk là một middleware (phần mềm trung gian) được sử dụng trong Redux, một thư viện quản lý trạng thái phổ biến trong ứng dụng React và JavaScript. Middleware là một cơ chế cho phép bạn mở rộng hoặc tùy chỉnh hành vi của Redux Store mà không cần sửa đổi trực tiếp các reducer.

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

Tổng hợp những câu hỏi phỏng vấn React quan trọng phần 7 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

Sử Dụng Bind, Call và Apply Như Thế Nào Trong Javascript

Tìm hiểu về bind, call và apply là các prototype của Function nên chỉ có Function mới có thể gọi được 3 hàm này. Đây là 3 hàm tạo nên sự mạnh mẽ và bá đạo trong Javascript.

Kiểu dữ liệu trong javascript là gì ?

Kiểu dữ liệu là một cách phân loại dữ liệu cho trình biên dịch hoặc trình thông dịch hiểu về kiểu của dữ liệu đang sử dụng. Đối với nhiều ngôn ngữ lập trình, khi khai báo một biến, bạn phải chỉ rõ biến đó thuộc kiểu dữ liệu gì. Nhưng đối với JavaScript thì khác, một biến có thể thuộc bất kỳ kiểu dữ liệu nào

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

Tổng hợp những câu hỏi phỏng vấn React quan trọng phần 4 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

Xem thêm...