Bộ những câu hỏi phỏng vấn ReactJs cho mọi vị trí từ cơ bản đến nâng cao

Bộ những câu hỏi phỏng vấn ReactJs cho mọi vị trí từ cơ bản đến nâng cao

React là một từ thông dụng trong giới IT ngày nay. Tính đến thời điểm hiện tại, React là công nghệ front-end phổ biến nhất với ngày càng nhiều công ty đã và đang sử dụng. 

Nếu bạn đang chuẩn bị cho một cuộc phỏng vấn xin việc, đây là những câu hỏi phỏng vấn ReactJS phù hợp với bạn. Dưới đây là danh sách tổng hợp tất cả các câu hỏi phỏng vấn ReactJS phổ biến từ cấp độ cơ bản đến nâng cao do mình tổng hợp?

Bộ những câu hỏi phỏng vấn ReactJs cho mọi vị trí từ cơ bản đến nâng cao
Bộ những câu hỏi phỏng vấn ReactJs cho mọi vị trí từ cơ bản đến nâng cao

Cùng bắt đầu tìm hiểu bộ câu hỏi phỏng vấn ReactJs 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.

Bộ những câu hỏi phỏng vấn ReactJs cho mọi vị trí từ cơ bản đến nâng cao

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 và 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 propsstate 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);
};

13. Inline conditional expressions là gì?

Bạn có thể sử dụng câu lệnh if hoặc toán tử 3 ngôi có sẵn để kết xuất một biểu thức có điều kiện. Ngoại những các tiếp cận này, bạn cũng có thể nhúng bất kỳ biểu thức nào vào JSX bằng cách gói chúng trong dấu ngoặc nhọn và sau đó là toán tử logic && trong JS.

Ví dụ:

<h1>Hello!</h1>;
{
  messages.length > 0 && !isLogin ? (
    <h2>You have {messages.length} unread messages.</h2>
  ) : (
    <h2>You don't have unread messages.</h2>
  );
}

14. "key" prop là gì và lợi ích khi sử dụng nó trong arrays của các elements?

"key" là một thuộc tính đặc biệt mà bạn nên đưa vào khi tạo mảng các phần tử. "key" props giúp React xác định những mục nào đã thay đổi, được thêm vào hoặc bị xóa.

Keys phải là duy nhất giữa các anh chị em của nó. Thông thường, chúng tôi sử dụng ID từ dữ liệu của mình để làm "key".

const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

Khi bạn không có ID ổn định cho các mục được render, bạn có thể sử dụng index để làm key như là một phương pháp cuối cùng:

const todoItems = todos.map((todo, index) => (
  <li key={index}>{todo.text}</li>
));

Lưu ý:
  • Không nên sử dụng index cho các keys nếu thứ tự của các mục có thể thay đổi. Điều này có thể tác động tiêu cực đến hiệu suất và có thể gây ra sự cố với state component.
  • Nếu bạn extract list item dưới dạng component riêng biệt thì hãy áp dụng các key trên list component thay vì thẻ li.
  • Sẽ có một thông báo cảnh báo trong console kếu key prop không có trong các list items.
  • Thuộc tính key chấp nhận cuỗi hoặc số và chuyển đổi nội bộ nó thành kiễu chuỗi.


15. Việc sử dụng các refs là gì?

Refs được sử dụng để trả về một tham chiếu đến element. Chúng nên tránh trong hầu hết các trường hợp, tuy nhiên, chúng có thể hữu ích khi bạn cần truy cập trực tiếp vào DOM element howacj một phiên bản của một component.

16. Virtual DOM là gì?

Virtual DOM (VDOM) là một đại diện trong bộ nhớ của Real DOM. Biểu diễn của giao diện người dùng được lưu trong bộ nhớ và được đồng bộ hóa với DOM "thực". Đó là một bước xảy ra giữa chức năng kết xuất được gọi và hiển thị các phần tử trên màn hình. Toàn bộ quá trình này được gọi là reconciliation.

17. Cách Virtual DOM hoạt động?

Virtual DOM hoạt động theo ba bước đơn giản.

  • Bất cứ khi nào bất kỳ dữ liệu cơ bản nào thay đổi, toàn bộ giao diện người dùng sẽ được hiển thị lại trong biểu diễn Virtual DOM.

virtual dom 1

  • Sau đó, sự khác biệt giữa biểu diễn DOM trước đó và biểu diễn DOM mới được tính toán.

virtual dom 2


  • Sau khi tính toán xong, DOM thực sẽ được cập nhật chỉ với những thứ đã thực sự thay đổi.

virtual dom 3


18. Sự khác biệt giữa Shadow DOM và Virtual DOM là gì?

Shadow DOM là một công nghệ trình duyệt được thiết kế chủ yếu để xác định phạm vi các biến và CSS trong các thành phần web. Virtual DOM là một khái niệm được triển khai bởi các thư viện trong JavaScript trên các API của trình duyệt.

19. Các giai đoạn khác nhau của lifecycle of component là gì?

Lifecycle component có ba giai đoạn vòng đời riêng biệt:

Mounting: component đã sẵn sàng để mount trong DOM của trình duyệt. Giai đoạn này bao gồm quá trình khởi tạo từ các phương thức vòng đời của constructor(), getDerivedStateFromProps(), render() và componentDidMount().

Updating: Trong giai đoạn này, component được cập nhật theo hai cách, gửi các props mới và cập nhật state từ setState() hoặc forceUpdate(). Giai đoạn này bao gồm các phương pháp vòng đời getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshot BeforeUpdate() và componentDidUpdate().

Unmounting: Trong giai đoạn cuối cùng này, component không cần thiết và được ngắt kết nối khỏi DOM của trình duyệt. Giai đoạn này bao gồm phương thức vòng đời componentWillUnmount().

Điều đáng nói là bên trong React có khái niệm về các giai đoạn khi áp dụng các thay đổi cho DOM. Chúng được tách ra như sau:

Render component sẽ render mà không có bất kỳ tác dụng phụ nào. Điều này áp dụng cho các Pure component và trong giai đoạn này, React có thể tạm dừng, hủy bỏ hoặc khởi động lại quá trình render.

Pre-commit Trước khi component thực sự áp dụng các thay đổi cho DOM, có một thời điểm cho phép React đọc từ DOM thông qua getSnapshot BeforeUpdate().

Commit React hoạt động với DOM và thực hiện các vòng đời cuối cùng tương ứng là componentDidMount() để mount, componentDidUpdate() để cập nhật và componentWillUnmount() để ngắt kết nối.

React 16.3+ Phases

lifecycle 1

Sau React 16.3

lifecycle 2

20. Higher-Order Components là gì?

Higher-order component (HOC) là một function lấy một component và trả về một component mới. Về cơ bản, đó là một khuôn mẫu bắt nguồn từ bản chất cấu thành của React.

Chúng tôi gọi chúng là các pure component vì chúng có thể chấp nhận bất kỳ component con nào được cung cấp động nhưng chúng sẽ không sửa đổi hoặc sao chép bất kỳ hành vi nào từ các component đầu vào của chúng.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC có thể được sử dụng cho nhiều trường hợp:
  • Tái sử dụng code, logic và trừu tượng hóa bootstrap.
  • Render hijacking.
  • Trừu tượng hóa và thao tác state.
  • Thao tác props.

21. Tại sao React sử dụng thuộc tính className thay vì class?

Trên trang web chính thức của React, điều này được giải thích là do JSX là JavaScript nên các định danh như class và for không được khuyến khích làm tên thuộc tính XML. Thay vào đó, các thành phần React DOM yêu cầu các tên thuộc tính DOM tương ứng như className và htmlFor.


22. Fragments là gì?

Chúng ta có thể hiểu nó là 1 parttern chung trong React dùng cho component để trả về nhiều elements mà không cần tạo thêm các nodes vào DOM.

Các Fragments được sử dụng để thay thế thẻ JSX "parent" khi chúng ta không muốn nó. Ở dưới đây, các bạn có thể thấy ví dụ đơn giản nhất về sử dụng Fragments. Trong ví dụ này, chúng ta có 3 thẻ divs trong component, và chúng ta chỉ muốn 3 thẻ divs được hiển thị khi user render đến component này:

class ThreeDivsFragments extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div>First</div>
        <div>Second</div>
        <div>Third</div>
      </React.Fragment>
    );
  }
}

Cũng có thể hiển thị danh sách các fragments bên trong vòng lặp với thuộc tính key bắt buộc được cung cấp.

function StoryBook() {
  return stories.map(story =>
    <Fragment key={ story.id}>
      <h2>{story.title}</h2>
      <p>{story.description}</p>
      <p>{story.date}</p>
    </Fragment>
    );
}

Thông thường bạn không cần sử dụng đến khi không cần thuộc tính key. Việc sử dụng cú pháp ngắn hơn trông giống như bên dưới.

function Story({title, description, date}) {
  return (
      <>
        <h2>{title}</h2>
        <p>{description}</p>
        <p>{date}</p>
      </>
    );
}

23. Tạo sao fragments tốt hơn container div?

Dưới đây là danh sách các lý do để thích fragments hơn các container DOM element,
  • Các fragments nhanh hơn một chút và sử dụng ít bộ nhớ hơn bằng cách không tạo thêm một  DOM node. Điều này chỉ có lợi ích thực sự trên những cây rất lớn và sâu.
  • Một số cơ chế CSS như Flexbox và CSS Grid có mối quan hệ cha-con đặc biệt và việc thêm các div ở giữa sẽ khiến bạn khó giữ được bố cục mong muốn.
  • DOM Inspector ít lộn xộn hơn.

24. Stateless components là gì?

Nếu hành vi của một component độc lập với state của nó thì nó có thể là một stateless component. Bạn có thể sử dụng một hàm hoặc một lớp để tạo các stateless component. Nhưng trừ khi bạn cần sử dụng lifecycle hook trong các component của mình, bạn nên sử dụng các function components. Có rất nhiều lợi ích nếu bạn quyết định sử dụng các function components ở đây; chúng dễ viết, dễ hiểu và dễ kiểm tra, nhanh hơn một chút và bạn có thể tránh hoàn toàn từ khóa this.

25. Lợi ích khi sử dụng React là gì?

Dưới đây là danh sách các ưu điểm chính của React,
  • Tăng hiệu suất của ứng dụng với Virtual DOM.
  • JSX làm cho code dễ đọc và dễ viết.
  • Nó hiển thị cả ở phía client và server (SSR).
  • Dễ dàng tích hợp với các framework (Angular, Backbone) vì nó chỉ là một view library.
  • Dễ dàng viết các unit and integration tests với các công cụ như Jest.

26. Các hạn chế khi sử dụng React là gì?

Ngoài những ưu điểm, React cũng có một số hạn chế,
  • React chỉ là một view library, không phải là một full framework.
  • Có một đường cong học tập cho những người mới bắt đầu phát triển web.
  • Việc tích hợp React vào MVC framework truyền thống yêu cầu một số cấu hình bổ sung.
  • Độ phức tạp của code tăng lên khi tạo khuôn mẫu nội tuyến và JSX.
  • Quá nhiều component nhỏ hơn dẫn đến over engineering or boilerplate.

27. Việc sử dụng react-dom package là gì?

react-dom package cung cấp các phương thức dành riêng cho DOM có thể được sử dụng ở cấp cao nhất trong ứng dụng của bạn. Hầu hết các component không bắt buộc phải sử dụng module này. Một số phương thức của package này là:
  • render()
  • hydrate()
  • unmountComponentAtNode()
  • findDOMNode()
  • createPortal()


28. Mục đích của phương thức render của react-dom?

Phương thức này được sử dụng để render một element React vào DOM trong container được cung cấp và trả về một tham chiếu đến component đó. Nếu element React trước đó đã được render vào container, thì element này sẽ thực hiện cập nhật trên element đó và chỉ thay đổi DOM khi cần thiết để phản ánh những thay đổi mới nhất.

ReactDOM.render(element, container, [callback])

Nếu callback tùy chọn được cung cấp, nó sẽ được thực thi sau khi component được hiển thị hoặc cập nhật.

29. Cách sử dụng styles trong React?

Ngoài việc chúng ta import file style vào component hay sử dụng các thư viện CSS để style thì ta có thể sử dụng thuộc tính style là một Javascript object với các thuộc tính được viết dưới dạng camelCase thay vì chuỗi CSS thông thường. Điều này phù hợp với thuộc tính Javascript kiểu DOM, hiệu quả hơn và ngăn người các lỗ hổng bảo mật XSS.

const divStyle = {
  color: "blue",
  backgroundImage: "url(" + imgUrl + ")",
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

30. Các sự kiện khác nhau như thế nào trong React?

Xử lý các sự kiện trong các React element có một số khác biệt về cú pháp:
  • Trình xử lý sự kiện React được đặt tên bằng cách sử dụng camelCase, thay vì chữ thường.
  • Với JSX, bạn chuyển một hàm handler xử lý sự kiện, thay vì một chuỗi.

31.  Làm cách nào để bật chế độ production trong React?

Bạn nên sử dụng phương thức DefinePlugin của Webpack để đặt NODE_ENV thành production, theo đó nó loại bỏ những thứ như xác thực propType và các cảnh báo bổ sung. Ngoài ra, nếu bạn minify the code, chẳng hạn như việc loại bỏ dead-code của Uglify để loại bỏ code và nhận xét chỉ development, nó sẽ giảm đáng kể kích thước bundle của bạn.

32. CRA là gì và lợi ích của nó?

create-react-app CLI tools cho phép bạn tạo và chạy React app nhanh chóng mà không cần các bước cấu hình.

Hãy thử tạo Todo App sử dụng CRA:

# Installation
$ npm install -g create-react-app

# Create new project
$ create-react-app todo-app
$ cd todo-app

# Build, test and run
$ npm run build
$ npm run test
$ npm start

Nó bao gồm mọi thứ chúng ta cần để xây dựng một ứng dụng React:
  • Hỗ trợ cú pháp React, JSX, ES6 và Flow.
  • Các tính năng bổ sung của ngôn ngữ ngoài ES6 như object spread operator.
  • Autoprefixed CSS, vì vậy bạn không cần -webkit- hoặc các other prefixes.
  • Trình chạy unit test tương tác nhanh với hỗ trợ tích hợp cho báo cáo mức độ phù hợp.
  • Một máy chủ phát triển trực tiếp cảnh báo về các lỗi phổ biến.
  • Tập lệnh xây dựng để bundle JS, CSS và hình ảnh để sản xuất, với hàm băm và bản đồ nguồn.


33. Tại sao chúng ta cần truyền một function cho hàm setState()?

Lý do đằng sau điều này là setState() là một hoạt động không đồng bộ. React thay đổi state theo lô vì lý do hiệu suất, vì vậy state có thể không thay đổi ngay sau khi setState() được gọi. Điều đó có nghĩa là bạn không nên dựa vào state hiện tại khi gọi setState() vì bạn không thể chắc chắn state đó sẽ là gì. Giải pháp là chuyển một hàm tới setState(), với state trước đó làm đối số. Bằng cách này, bạn có thể tránh được các vấn đề với việc người dùng nhận được giá trị state cũ khi truy cập do tính chất không đồng bộ của setState().

Giả sử giá trị đếm ban đầu bằng không. Sau ba thao tác tăng liên tiếp, giá trị sẽ chỉ được tăng thêm một.

// assuming this.state.count === 0
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
// this.state.count === 1, not 3

Nếu chúng ta chuyển một hàm tới setState(), thì số đếm sẽ tăng lên một cách chính xác.

this.setState((prevState, props) => ({
  count: prevState.count + props.increment,
}));
// this.state.count === 3 as expected

34. Tại sao function được ưu tiên hơn object cho setState()?

React có thể gộp nhiều lệnh gọi setState() thành một bản cập nhật duy nhất để tăng hiệu suất. Vì this.props và this.state có thể được cập nhật không đồng bộ, bạn không nên dựa vào các giá trị của chúng để tính toán trạng thái tiếp theo.

Ví dụ truy cập này sẽ không cập nhật như mong đợi:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

Cách tiếp cận ưa thích là gọi setState() bằng hàm chứ không phải đối tượng. Hàm đó sẽ nhận trạng thái trước đó làm đối số đầu tiên và các props tại thời điểm cập nhật được áp dụng làm đối số thứ hai.

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment,
}));

35. Strict mode trong React là gì?

React.StrictMode là một component hữu ích để làm nổi bật các vấn đề tiềm ẩn trong một ứng dụng. Giống như <Fragment><StrictMode> không hiển thị thêm bất kỳ phần tử DOM nào. Nó kích hoạt kiểm tra bổ sung và cảnh báo cho hậu duệ của nó. Những kiểm tra này chỉ áp dụng cho chế độ phát triển.

import React from "react";

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Header />
    </div>
  );
}

Trong ví dụ trên, kiểm tra strict mode chỉ áp dụng cho các component <ComponentOne> và <ComponentTwo>.

React.StrictMode hiện đang giúp bạn:
  • Xác định các component có vòng đời không an toàn.
  • Cảnh báo về việc sử dụng API tham chiếu chuỗi kế thừa.
  • Cảnh báo về việc sử dụng findDOMNode không dùng nữa
  • Phát hiện tác dụng phụ không mong muốn.
  • Phát hiện API ngữ cảnh kế thừa.

36. Các Pointer Event đưuọc hỗ trợ trong React là?

Pointer event cung cấp một cách thống nhất để xử lý tất cả các sự kiện đầu vào. Ngày xưa, chúng ta có chuột và trình xử lý sự kiện tương ứng để xử lý chúng nhưng ngày nay chúng ta có nhiều thiết bị không liên quan đến việc có chuột, chẳng hạn như điện thoại có bề mặt cảm ứng hoặc bút. Chúng ta cần nhớ rằng những sự kiện này sẽ chỉ hoạt động trong các trình duyệt hỗ trợ đặc tả pointer event.

Các loại sự kiện sau hiện có sẵn trong React DOM:
  • onPointerDown
  • onPointerMove
  • onPointerUp
  • onPointerCancel
  • onGotPointerCapture
  • onLostPointerCapture
  • onPointerEnter
  • onPointerLeave
  • onPointerOver
  • onPointerOut

37. Tại sao tên component nên bắt đầu bằng chữ in hoa?

Nếu bạn đang render component của mình bằng JSX, tên của component đó phải bắt đầu bằng chữ in hoa nếu không React sẽ đưa ra lỗi dưới dạng thẻ không được nhận dạng. Quy ước này là do chỉ các phần tử HTML và thẻ SVG mới có thể bắt đầu bằng một chữ cái viết thường.

Bạn có thể định nghĩa class component có tên bắt đầu bằng chữ thường, nhưng khi nó được import, nó phải có chữ in hoa. Ở đây chữ thường vẫn hoạt động:

class myComponent extends Component {
  render() {
    return <div />;
  }
}

export default myComponent;

Trong khi khi được import vào một tệp khác, nó phải bắt đầu bằng chữ in hoa:

import MyComponent from "./myComponent";

38. Bạn có thể buộc một component re-render lại mà không cần gọi setState() không?

Theo mặc định, khi state hoặc props của component thay đổi, component của bạn sẽ re-render lại. Nếu phương thức render() của bạn phụ thuộc vào một số dữ liệu khác, bạn có thể cho React biết rằng component đó cần re-render lại bằng cách gọi forceUpdate().

component.forceUpdate(callback);

39. Làm các nào để loop trong JSX?

Bạn chỉ có thể sử dụng Array.prototype.map với cú pháp arrow function của ES6.

Ví dụ, mảng items của các object được map vào một bảng các component.

<tbody>
  {items.map((item) => (
    <SomeComponent key={item.id} name={item.name} />
  ))}
</tbody>

Nhưng bạn không thể lặp khi sử dụng vòng for:

<tbody>
  for (let i = 0; i < items.length; i++) {
    <SomeComponent key={items[i].id} name={items[i].name} />
  }
</tbody>

40. Làm các nào để bạn truyền các props bên trong dấu ngoặc kép?

React (hoặc JSX) không hỗ trợ nội suy biến bên trong một giá trị thuộc tính. Đại diện dưới đây sẽ không hoạt động:

<img className="image" src="images/{this.props.image}" />

Nhưng bạn có thể đặt bất kỳ biểu thức JS nào bên trong dấu ngoặc nhọn làm toàn bộ giá trị thuộc tính. Vì vậy, biểu thức dưới đây hoạt động:

<img className="image" src={"images/" + this.props.image} />

Hoặc sử dụng template string:

<img className="image" src={`images/${this.props.image}`} />

41. Làm cách nào để áp dụng điều kiện cho thuộc tính class?

Bạn không nên sử dụng dấu ngoặc nhọn bên trong dấu ngoặc kép vì nó sẽ được đánh giá là một chuỗi.

<div className="btn-panel {this.props.visible ? 'show' : 'hidden'}">

Thay vào đó, bạn cần di chuyển các dấu ngoặc nhọn ra bên ngoài (đừng quên bao gồm khoảng trắng giữa các tên lớp):

<div className={'btn-panel ' + (this.props.visible ? 'show' : 'hidden')}>

Template string cũng hoạt động tương tự:

<div className={`btn-panel ${this.props.visible ? 'show' : 'hidden'}`}>

42. Sự khác nhau giữa React và ReactDOM?

React package chứa React.createElement()React.ComponentReact.Children và các trình trợ giúp khác liên quan đến các element và lớp component. Bạn có thể coi đây là những trình trợ giúp đẳng cấu hoặc phổ quát mà bạn cần để xây dựng các component. Gói react-dom chứa ReactDOM.render() và trong react-dom/server, chúng tôi có hỗ trợ render phía máy chủ với ReactDOMServer.renderToString() và ReactDOMServer.renderToStaticMarkup().

43. Tại sao ReactDOM được tách rời khỏi React?

Nhóm React đã làm việc để trích xuất tất cả các tính năng liên quan đến DOM vào một thư viện riêng gọi là ReactDOM. React v0.14 là bản phát hành đầu tiên trong đó các thư viện được phân chia. Bằng cách xem xét một số package, react-native, react-canvas và react-three, rõ ràng là vẻ đẹp và bản chất của React không liên quan gì đến trình duyệt hoặc DOM.

Để xây dựng nhiều môi trường hơn mà React có thể render, nhóm React đã lên kế hoạch chia gói React chính thành hai: react và react-dom. Điều này mở đường cho việc viết các component có thể được chia sẻ giữa phiên bản web của React và React Native.

44. Làm cách nào để sử dụng React label element?

Nếu bạn cố gắng render một element <label> được liên kết với một text input bằng cách sử dụng thuộc tính for tiêu chuẩn, thì nó sẽ tạo ra HTML thiếu thuộc tính đó và in một cảnh báo tới console.

<label for={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />

Vì for là một từ khóa dành riêng trong JavaScript, nên hãy sử dụng htmlFor để thay thế.

<label htmlFor={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />

45. Sự khác nhau giữa các phương thức setState() và replaceState()?

Khi bạn sử dụng setState() trạng thái hiện tại và trạng thái trước đó được hợp nhất. replaceState() loại bỏ trạng thái hiện tại và chỉ thay thế nó bằng những gì bạn cung cấp. Thông thường, setState() được sử dụng trừ khi bạn thực sự cần xóa tất cả các khóa trước đó vì lý do nào đó. Bạn cũng có thể đặt trạng thái thành false/null trong setState() thay vì sử dụng replaceState().

46. Tại sao bạn không thể cập nhật props trong React?

Triết lý của React là các props phải không thay đổi và từ trên xuống. Điều này có nghĩa là cha mẹ có thể gửi bất kỳ giá trị prop nào cho con, nhưng con không thể sửa đổi các prop nhận được.

47. Cấu trúc thư mục phổ biến cho React là gì?

Có 2 cấu trúc thư mục cho React project file structure.

Grouping by features or routes: Một cách phổ biến để cấu trúc các dự án là định vị CSS, JS và tests cùng nhau, được nhóm theo tính năng hoặc route.

common/
├─ Avatar.js
├─ Avatar.css
├─ APIUtils.js
└─ APIUtils.test.js
feed/
├─ index.js
├─ Feed.js
├─ Feed.css
├─ FeedStory.js
├─ FeedStory.test.js
└─ FeedAPI.js
profile/
├─ index.js
├─ Profile.js
├─ ProfileHeader.js
├─ ProfileHeader.css
└─ ProfileAPI.js

Grouping by file type: Một cách phổ biến khác để cấu trúc các dự án là nhóm các tệp tương tự lại với nhau.

api/
├─ APIUtils.js
├─ APIUtils.test.js
├─ ProfileAPI.js
└─ UserAPI.js
components/
├─ Avatar.js
├─ Avatar.css
├─ Feed.js
├─ Feed.css
├─ FeedStory.js
├─ FeedStory.test.js
├─ Profile.js
├─ ProfileHeader.js
└─ ProfileHeader.css

48.  Các gói phổ biến cho animations là gì?

React Transition Group và React Motion là các gói hoạt hình phổ biến trong hệ sinh thái React.

49. React Router là gì?

React Router là một thư viện định tuyến mạnh mẽ được xây dựng dựa trên React, giúp bạn thêm các màn hình mới và chuyển đến ứng dụng của bạn cực kỳ nhanh chóng, trong khi vẫn giữ cho URL đồng bộ với những gì đang được hiển thị trên trang.

50. React Router khác với thư viện history như thế nào?

React Router là một wrapper around thư viện history xử lý tương tác với window.history của trình duyệt với hash histories và trình duyệt của nó. Nó cũng cung cấp memory history hữu ích cho các môi trường không có global history, chẳng hạn như phát triển ứng dụng di động (React Native) và thử nghiệm đơn vị với Node.

51. Các thành phần <Router> của React Router v4 là gì?

React Router v4 cung cấp 3 component <Router> bên dưới:
  • <BrowserRouter>
  • <HashRouter>
  • <MemoryRouter>

Các component trên sẽ tạo các phiên bản history trình duyệt, hash và bộ nhớ. React Router v4 làm cho các thuộc tính và phương thức của phiên bản history được liên kết với bộ router của bạn có sẵn thông qua ngữ cảnh trong đối tượng bộ router.

52. Làm cách nào để nhận query parameters trong React Router?

Đọc Chuỗi truy vấn, còn được gọi là Tham số tìm kiếm, từ URL là một phương pháp phổ biến trong phát triển ứng dụng web và bạn sẽ học cách đọc chúng bằng React Router. React Router v6 cung cấp hook useSearchParams() mà chúng ta có thể sử dụng để đọc các tham số tìm kiếm chuỗi truy vấn mà chúng ta cần từ URL.

Đọc Query Strings, còn được gọi là Search Params, từ URL là một phương pháp phổ biến trong phát triển ứng dụng web và bạn sẽ học cách đọc chúng bằng React Router. React Router v6 cung cấp hook useSearchParams() mà chúng ta có thể sử dụng để đọc các tham số tìm kiếm chuỗi truy vấn mà chúng ta cần từ URL.

Chúng tôi có thể đọc một single query parameter hoặc đọc tất cả chúng cùng một lúc và chúng tôi cũng sẽ điều tra một số tùy chọn khác.

Tôi sẽ hướng dẫn bạn một số thực tiễn và khái niệm khác nhau mà bạn sẽ cần để xử lý việc đọc search params từ URL, bao gồm việc đọc một lần duy nhất cũng như theo dõi bất kỳ thay đổi thông số nào thông qua useEffect() React hook.

53. Làm cách nào để triển khai mặc định hoặc trang NotFound?

<Switch> renders the first child <Route> phù hợp. <Route> không có đường dẫn nào luôn khớp. Vì vậy, bạn chỉ cần thả thuộc tính đường dẫn như bên dưới:

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/user" component={User} />
  <Route component={NotFound} />
</Switch>

54. Làm cách nào để thực hiện chuyến hướng tự động sau khi đăng nhập?

react-router package cung cấp thành phần <Redirect> trong React Router. Rendering một <Redirect> sẽ điều hướng đến một vị trí mới. Giống như chuyển hướng phía máy chủ, vị trí mới sẽ ghi đè vị trí hiện tại trong history stack.

55. Flux là gì?

Flux là một mô hình thiết kế ứng dụng được sử dụng để thay thế cho mẫu MVC truyền thống hơn. Nó không phải là một framework hay thư viện mà là một kiểu kiến ​​trúc mới bổ sung cho React và khái niệm Luồng dữ liệu một chiều. Facebook sử dụng mẫu này trong nội bộ khi làm việc với React.

Quy trình làm việc giữa các dispatcher, stores và views components với các đầu vào và đầu ra riêng biệt như sau:

flux

56. Redux là gì?

Redux là một vùng chứa trạng thái có thể dự đoán được cho các ứng dụng JavaScript dựa trên mẫu thiết kế Flux. Redux có thể được sử dụng cùng với React hoặc với bất kỳ view library nào khác. Nó rất nhỏ (khoảng 2kB) và không có phụ thuộc.

57. Các nguyên tắc cốt lõi của Redux là gì?

Redux tuân theo ba nguyên tắc cơ bản:
  • Single source of truth: Trạng thái của toàn bộ ứng dụng của bạn được lưu trữ trong một object tree trong một single store. Single state tree giúp theo dõi các thay đổi theo thời gian và gỡ lỗi hoặc kiểm tra ứng dụng dễ dàng hơn.
  • State is read-only: Cách duy nhất để thay đổi trạng thái là phát ra một hành động, một đối tượng mô tả những gì đã xảy ra. Điều này đảm bảo rằng cả chế độ xem và the network callbacks sẽ không bao giờ ghi trực tiếp vào trạng thái.
  • Changes are made with pure functions: Để chỉ định cách state tree được chuyển đổi bằng các hành động, bạn viết các reducers. Reducers chỉ là các hàm thuần túy lấy trạng thái trước đó và một action làm tham số và trả về trạng thái tiếp theo.


58. Nhược điểm của Redux so với Flux là gì?

Thay vì nói về nhược điểm, chúng ta có thể nói rằng có rất ít sự thỏa hiệp khi sử dụng Redux so với Flux. Đó là như sau:
  • Bạn sẽ cần học cách tránh các đột biến: Flux không quan tâm đến việc thay đổi dữ liệu, nhưng Redux không thích các đột biến và nhiều gói bổ sung cho Redux cho rằng bạn không bao giờ thay đổi trạng thái. Bạn có thể thực thi điều này bằng các packages chỉ dành cho nhà phát triển như redux-immutable-state-invariant, Immutable.js hoặc hướng dẫn nhóm của bạn viết code không đột biến.
  • Bạn sẽ phải cẩn thận chọn các packages của mình: Mặc dù Flux rõ ràng không cố gắng giải quyết các vấn đề như undo/redo, persistence, or forms, Redux có các điểm mở rộng như as middleware and store enhancers, và nó đã tạo ra một sự phong phú hệ sinh thái.
  • Chưa có tích hợp Flow tốt: Flux hiện cho phép bạn thực hiện kiểm tra kiểu tĩnh rất ấn tượng mà Redux chưa hỗ trợ.

59. Bạn có thể gửi một action trong reducer không?

Dispatching an action trong một reducer là một anti-pattern. Reducer của bạn sẽ không có tác dụng phụ, chỉ cần tiêu hóa action payload và trả về một đối tượng trạng thái mới. Việc thêm người nghe và dispatching actions trong reducer có thể dẫn đến các hành động bị xiềng xích và các tác dụng phụ khác.

60. Làm cách nào để truy cập store Redux bên ngoài một component?

Bạn chỉ cần xuất store từ mô-đun nơi nó được tạo bằng createStore(). Ngoài ra, nó không nên gây pollute global window object.

store = createStore(myReducer);

export default store;

61. Những hạn chế của MVW pattern là gì?

  • Thao tác DOM rất tốn kém, điều này khiến các ứng dụng hoạt động chậm và không hiệu quả.
  • Do sự phụ thuộc vòng tròn, một mô hình phức tạp đã được tạo xung quanh các models and views.
  • Rất nhiều thay đổi dữ liệu xảy ra đối với các ứng dụng cộng tác (như Google Tài liệu).
  • Không có cách nào để hoàn tác (du hành ngược thời gian) một cách dễ dàng mà không cần thêm quá nhiều code bổ sung.

62. Có điểm tương đồng nào giữa Redux và RxJS không?

Những thư viện này rất khác nhau cho những mục đích rất khác nhau, nhưng có một số điểm tương đồng mơ hồ.

Redux là một công cụ để quản lý trạng thái trong toàn bộ ứng dụng. Nó thường được sử dụng làm kiến ​​trúc cho giao diện người dùng. Hãy nghĩ về nó như một giải pháp thay thế cho (một nửa) Angular. RxJS là một reactive programming library. Nó thường được sử dụng như một công cụ để thực hiện các tác vụ không đồng bộ trong JavaScript. Hãy nghĩ về nó như một giải pháp thay thế cho Promises. Redux sử dụng mô hình Reactive vì Store is reactive. Store theo dõi các actions từ xa và tự thay đổi. RxJS cũng sử dụng mô hình Reactive, nhưng thay vì là một kiến ​​trúc, nó cung cấp cho bạn các khối xây dựng cơ bản, Observables, để thực hiện mô hình này.

63. Làm thế nào để reset state trong Redux?

Bạn cần viết một root reducer trong ứng dụng của mình để ủy quyền xử lý action cho bộ rút gọn được tạo bởi combReducers().

Ví dụ: chúng ta hãy lấy rootReducer() để trả về trạng thái ban đầu sau action USER_LOGOUT. Như chúng ta đã biết, reducers được cho là trả về trạng thái ban đầu khi chúng được gọi với đối số đầu tiên là undefined, bất kể hành động là gì.

const appReducer = combineReducers({
  /* your app's top-level reducers */
});

const rootReducer = (state, action) => {
  if (action.type === "USER_LOGOUT") {
    state = undefined;
  }

  return appReducer(state, action);
};

Trong trường hợp sử dụng redux-persist, bạn cũng có thể cần dọn dẹp bộ nhớ của mình. redux-persist giữ một bản sao trạng thái của bạn trong một storage engine. Trước tiên, bạn cần nhập công cụ lưu trữ thích hợp, sau đó phân tích cú pháp trạng thái trước khi đặt thành không xác định và xóa từng khóa trạng thái lưu trữ.

const appReducer = combineReducers({
  /* your app's top-level reducers */
});

const rootReducer = (state, action) => {
  if (action.type === "USER_LOGOUT") {
    Object.keys(state).forEach((key) => {
      storage.removeItem(`persist:${key}`);
    });

    state = undefined;
  }

  return appReducer(state, action);
};

64. Sự khác nhau giữa React context và React Redux?

Bạn có thể sử dụng Context trực tiếp trong ứng dụng của mình và sẽ rất tuyệt khi truyền dữ liệu xuống các nested components mà nó được thiết kế cho.

Trong khi Redux mạnh hơn nhiều và cung cấp một số lượng lớn các tính năng mà Context API không cung cấp. Ngoài ra, React Redux sử dụng ngữ cảnh bên trong nhưng nó không hiển thị thực tế này trong API công khai.

65. Tại sao các Redux state function được gọi là reducers?

Reducers luôn trả về sự tích lũy của trạng thái (dựa trên tất cả các hành động trước đó và hiện tại). Do đó, chúng hoạt động như một reducer of state. Mỗi khi reducer of state được gọi, state và action được truyền dưới dạng tham số. Trạng thái này sau đó được giảm (hoặc tích lũy) dựa trên hành động và sau đó trạng thái tiếp theo được trả về. Bạn có thể reduce một tập hợp các hành động và trạng thái ban đầu (of the store) để thực hiện các hành động này để có được trạng thái cuối cùng.

66. Bạn có nên giữ tất cả component's state trong Redux store hay không?

Giữ dữ liệu của bạn trong Redux store, và trạng thái liên quan đến giao diện người dùng bên trong component.

67. Sự khác nhau giữa component và container trong React Redux là gì?

Component là một class or function component mô tả phần trình bày của ứng dụng của bạn.

Container là một thuật ngữ không chính thức cho một component được kết nối với Redux store. Containers subscribe cập nhật trạng thái Redux và gửi các hành động và chúng thường không hiển thị các phần tử DOM; họ ủy quyền kết xuất cho các component con trình bày.

68. Mục đích của các constants trong Redux?

Các hằng số cho phép bạn dễ dàng tìm thấy tất cả các cách sử dụng chức năng cụ thể đó trong dự án khi bạn sử dụng IDE. Nó cũng ngăn bạn đưa ra các lỗi ngớ ngẩn do lỗi đánh máy – trong trường hợp đó, bạn sẽ nhận được ReferenceError ngay lập tức.

Thông thường, chúng tôi sẽ lưu chúng trong một tệp duy nhất (constants.js hoặc actionTypes.js).

export const ADD_TODO = "ADD_TODO";
export const DELETE_TODO = "DELETE_TODO";
export const EDIT_TODO = "EDIT_TODO";
export const COMPLETE_TODO = "COMPLETE_TODO";
export const COMPLETE_ALL = "COMPLETE_ALL";
export const CLEAR_COMPLETED = "CLEAR_COMPLETED";

69. Làm cách nào để cấu trúc các thư mục cấp cao nhất của Redux?

Hầu hết các ứng dụng có một số thư mục cấp cao nhất như sau:
  • Components: Được sử dụng cho dumb components không biết về Redux.
  • Containers: Được sử dụng cho các smart components được kết nối với Redux.
  • Actions: Được sử dụng cho tất cả action creators, trong đó tên tệp tương ứng với một phần của ứng dụng.
  • Reducers: Được sử dụng cho tất cả các reducers, trong đó tên tệp tương ứng với state key.
  • Store: Được sử dụng để store initialization.

Cấu trúc này hoạt động tốt cho các ứng dụng vừa và nhỏ.

70. redux-saga là gì?

edux-saga là một thư viện nhằm mục đích tạo ra các hiệu ứng phụ (những thứ không đồng bộ như tìm nạp dữ liệu và những thứ không trong sạch như truy cập bộ đệm của trình duyệt) trong các ứng dụng React/Redux dễ dàng hơn và tốt hơn.

Nó có sẵn trong NPM:

$ npm install --save redux-saga

71. Mô hình mental của redux-saga là gì?

Saga giống như một luồng riêng biệt trong ứng dụng của bạn, nó hoàn toàn chịu trách nhiệm về các tác dụng phụ. redux-saga là một redux middleware, có nghĩa là luồng này có thể được bắt đầu, tạm dừng và hủy bỏ khỏi ứng dụng chính với các Redux actions thông thường, nó có quyền truy cập vào trạng thái đầy đủ của ứng dụng Redux và nó cũng có thể gửi các hành động Redux.

72. Sự khác nhau giữa call() và put() trong redux-saga là gì?

Cả call() và put() đều là các hàm tạo hiệu ứng. call() được sử dụng để tạo mô tả hiệu ứng, hướng dẫn middleware to call the promise. put() tạo một hiệu ứng, hướng dẫn middleware to dispatch an action to the store.

Hãy lấy ví dụ về cách các hiệu ứng này hoạt động để tìm nạp dữ liệu người dùng cụ thể.

function* fetchUserSaga(action) {
  // `call` function accepts rest arguments, which will be passed to `api.fetchUser` function.
  // Instructing middleware to call promise, it resolved value will be assigned to `userData` variable
  const userData = yield call(api.fetchUser, action.userId);

  // Instructing middleware to dispatch corresponding action.
  yield put({
    type: "FETCH_USER_SUCCESS",
    userData,
  });
}

73. Redux Thumk là gì?

Redux Thunk middleware cho phép bạn viết các action creators trả về một hàm thay vì một action. Thunk có thể được sử dụng để trì hoãn việc gửi một hành động hoặc chỉ dispatch nếu một điều kiện nhất định được đáp ứng. Hàm bên trong nhận các phương thức lưu trữ dispatch() và getState() làm tham số.

74. Sự khác nhau giữa redux-saga và redux-thunk?

Cả Redux Thunk và Redux Saga đều xử lý các tác dụng phụ. Trong hầu hết các tình huống, Thunk sử dụng Promises để giải quyết chúng, trong khi Saga sử dụng Generators. Thunk dễ sử dụng và Promise quen thuộc với nhiều nhà phát triển, Sagas/Generators mạnh hơn nhưng bạn sẽ cần tìm hiểu chúng. Nhưng cả hai middleware có thể cùng tồn tại, vì vậy bạn có thể bắt đầu với Thunks và giới thiệu Sagas khi/nếu bạn cần chúng.

75. Redux DevTools là gì?

Redux DevTools là môi trường du hành thời gian chỉnh sửa trực tiếp dành cho Redux với tính năng hot reloading, phát lại hành động và giao diện người dùng có thể tùy chỉnh. Nếu bạn không muốn bận tâm đến việc cài đặt Redux DevTools và tích hợp nó vào dự án của mình, hãy cân nhắc sử dụng Redux DevTools Extension cho Chrome và Firefox.

76. Các tính năng của Redux DevTools là gì?


Dưới đây là một số tính năng chính của Redux DevTools,
  • Cho phép bạn kiểm tra mọi state và action payload.
  • Cho phép bạn quay ngược thời gian bằng cách cancelling actions.
  • Nếu bạn thay đổi reducer code, mỗi hành động theo giai đoạn sẽ được đánh giá lại.
  • Nếu reducers throw, bạn sẽ thấy điều này đã xảy ra trong hành động nào và lỗi là gì.
  • Với công cụ cải thiện lưu persistState(), bạn có thể duy trì các phiên gỡ lỗi trong các lần tải lại trang.


77. Redux selectors là gì và tại sao nên sử dụng chúng?

Selectors là các hàm lấy trạng thái Redux làm đối số và trả về một số dữ liệu để chuyển đến components.

Ví dụ: để lấy chi tiết người dùng từ trạng thái:

const getUserData = (state) => state.user.data;

Selectors này có hai lợi ích chính,
  • Selectors có thể tính toán dữ liệu dẫn xuất, cho phép Redux lưu trữ trạng thái tối thiểu có thể.
  • Selectors không được tính toán lại trừ khi một trong các đối số của nó thay đổi.

78. React Form là gì?

Redux Form hoạt động với React và Redux để cho phép một form trong React sử dụng Redux để lưu trữ tất cả trạng thái của nó. Redux Form có thể được sử dụng với các đầu vào HTML5 thô, nhưng nó cũng hoạt động rất tốt với các UI frameworks phổ biến như Material UI, React Widget và React Bootstrap.

79. Các tính năng chính của Redux Form là gì?

Một số tính năng chính của Redux Form là:
  • Field values tồn tại qua Redux store.
  • Redux store (đồng bộ hóa/không đồng bộ) và submission.
  • Định dạng, phân tích cú pháp và chuẩn hóa các field values.

80. Làm thế nào để add multiple middlewares vào Redux?

Bạn có thể sử dụng applyMiddleware().

Ví dụ: bạn có thể thêm redux-thunk và logger chuyển chúng làm đối số cho applyMiddleware():

import { createStore, applyMiddleware } from "redux";
const createStoreWithMiddleware = applyMiddleware(
  ReduxThunk,
  logger
)(createStore);

81. Cách set initial state trong Redux?

Bạn cần chuyển trạng thái ban đầu làm đối số thứ hai cho createStore:

const rootReducer = combineReducers({
  todos: todos,
  visibilityFilter: visibilityFilter,
});

const initialState = {
  todos: [{ id: 123, name: "example", completed: false }],
};

const store = createStore(rootReducer, initialState);

82. Relay khác với Redux như thế nào?

Relay tương tự như Redux ở chỗ cả hai đều sử dụng một single store. Sự khác biệt chính là relay chỉ quản lý trạng thái bắt nguồn từ máy chủ và tất cả quyền truy cập vào trạng thái được sử dụng thông qua truy vấn GraphQL (để đọc dữ liệu) và đột biến (để thay đổi dữ liệu). Relay lưu trữ dữ liệu vào bộ nhớ cache cho bạn và tối ưu hóa việc tìm nạp dữ liệu cho bạn, bằng cách chỉ tìm nạp dữ liệu đã thay đổi và không có gì khác.


83. Một action trong Redux là gì?

Các actions là các đối tượng JavaScript đơn giản hoặc payloads thông tin gửi dữ liệu từ ứng dụng của bạn đến store của bạn. Họ là nguồn thông tin duy nhất cho store. Các actions phải có thuộc tính loại cho biết loại actions đang được thực hiện.

Ví dụ: hãy thực hiện một actions đại diện cho việc thêm một mục việc cần làm mới:

{
  type: ADD_TODO,
  text: 'Add todo item'
}


Lời kết

Vậy là bạn đã cùng mình điểm qua những câu hỏi phỏng vấn ReactJS thường gặp nhất cho mọi cấp bậc. Hy vọng bài tổng hợp trên sẽ giúp bạn có được sự chuẩn bị tốt hơn trước ngày phỏng vấn. Nếu có hứng thú với các nội dung tương tự, hãy cùng đón chờ thêm nhiều bài viết bổ ích khác đến từ mình bạn nhé!

No comments:

Powered by Blogger.