Bộ câu hỏi phỏng vấn ReactJs phần 1

DOM ảo là gì?


DOM ảo (virtual DOM) là một đại diện được nằm trong bộ nhớ cho một thành phần HTML thật mà cấu thành nên giao diện cho chương trình. Khi một component được thông dịch lại (re-render), DOM ảo sẽ so sánh sự thay đổi với mô hình của DOM thật để tạo một danh sách cập nhật sẽ được thực hiện. Lợi ích chính của việc này là giúp tăng hiệu năng, chỉ tập trung vào các thay đổi nhỏ và thực sự cần thiết với DOM thật hơn là phải re-render lại một tập component lớn.

Phân biệt Dom thật (Real DOM) và DOM ảo (virtual DOM)


Real DOMVirtual DOM
Update chậmUpdate nhanh
Có thể update trực tiếp HTMLKhông thể update trực tiếp HTML
Tạo ra DOM mới nếu element updateUpdate JSX nếu element update
Thao tác DOM phức tạp tốn kémThao tác DOM đơn giản
Lãng phí nhiều bộ nhớKhông lãng phí bộ nhớ

JSX là gì?


JSX là một phần mở rộng của cú pháp JavaScript cho phép viết code trông giống như HTML. Nó sẽ biên dịch thành các lời gọi hàm Javascript thông thường, cung cấp một cách tiếp cận dễ hiểu hơn để tạo các markup cho component của bạn.

Ta có:

<div className="sidebar" />

Khi được dịch sang Javascript sẽ là:

React.createElement("div", { className: "sidebar" });

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


Các tính năng chính của ReactJS như sau:

  • Nó sử dụng VirtualDOM thay vì RealDOM vì các thao tác trên RealDOM rất tốn kém.
  • Hỗ trợ kết xuất phía máy chủ.
  • Tuân theo luồng dữ liệu một chiều hoặc ràng buộc dữ liệu.
  • Sử dụng các component UI có thể tái sử dụng hoặc kết hợp để phát triển giao diện người dùng.

Ưu điểm của ReactJS là gì?


Dưới đây là những ưu điểm của ReactJS:

  • Tăng hiệu suất của ứng dụng với Virtual DOM.
  • JSX làm cho mã dễ đọc và viết.
  • Nó kết xuất cả phía máy khách và máy chủ.
  • Dễ dàng tích hợp với các frameworks khác (Angular, BackboneJS) vì nó chỉ là một thư viện giao diện.
  • Dễ dàng viết các trường hợp kiểm thử UI và tích hợp với các công cụ như JEST.

Tại sao bạn thích dùng Reactjs?


Câu hỏi này cũng thường được hỏi trong các buổi phỏng vấn về Reactjs, vậy nên bạn hãy tự suy nghĩ cho mình câu trả lời phù hợp nhất.

Làm thế nào để comment trong ReactJS?


Các comment trong ReactJS / JSX tương tự như các nhận xét nhiều dòng trong javascript được bao bọc bởi các dấu ngoặc nhọn:

Khi bạn muốn comment một dòng:

<div>
  {/* Single-line comments */}
  Welcome {user}, Let's play React
</div>

Khi bạn muốn comment nhiều dòng:

<div>
  {/* Multi-line comments for more than
   one line */}
  Welcome {user}, Let's play React
</div>

Sự khác nhau giữa class component và functional component?


Class component:

Trước phiên bản React 16.8 (trước khi giới thiệu hooks), component dựa theo class thường được sử dụng để tạo component, với mục đích để lưu giữ trạng thái bên trong hay tận dụng các phương thức vòng đời (Ví dụ: componentDidMount hay shouldComponentUpdate ). Một component dựa theo class là một class ES6, nó mở rộng class React Component và với tối thiểu phải thực hiện phương thức render()

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Functional component:

Functional component là không có trạng thái (stateless) (được dùng ở phiên bản React trước 16.8) và trả về output mà cần được render. Chúng phù hợp với việc render UI chỉ phụ thuộc vào props, thông thường chúng đơn giản hơn và nhanh hơn so với component dựa theo class.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Sự khác nhau giữa state và props?


Props là dữ liệu được truyền vào trong một component từ cha của nó. Chúng không nên bị thay đổi, và chỉ dùng để hiển thị hay tính toán các giá trị khác. State là dữ liệu bên trong của một component, nó có thể được thay đổi trong vòng đời của component và được duy trì giữa các lần re-render

Keys trong ReactJs được dùng để làm gì?


Khi thực hiên render một tập hợp trong React, việc thêm một key cho mỗi thành phần được lặp lại là cần thiết để giúp React theo dấu mối liên kết giữa các thành phần và dữ liệu. Key nên là một ID duy nhất, lý tưởng nhất nên là một UUID hay một chuỗi duy nhất khác từ tập hợp phần tử, hoặc cũng có thể là index của array.

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

Không dùng key có thể dẫn đến một vài sự thay đổi lạ khi thêm và xoá các phần tử từ tập hợp.

Tại sao phải gọi setState thay vì trực tiếp thay đổi state?


Nếu bạn cố gắng thay đổi một state của component trực tiếp, React sẽ không thể biết được khi nào nó cần phải re-render component. Bằng cách sử dụng phương thức setState(), React có thể cập nhật component của UI.

Nếu bạn cần cập nhật một state của component dựa theo dữ liệu của state khác hay props khác, chỉ cần truyền một hàm vào setState(), khi đấy bạn truyền state và props như 2 tham số của hàm:

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

JEST là gì?


Jest là một framework để unit test JavaScript do Facebook thực hiện dựa trên Jasmine và cung cấp mô hình giả tự động tạo và môi trường Jsdom. Nó thường được sử dụng để kiểm thử các component trong React.

Ngữ cảnh (context) trong React.js là gì?


Context cung cấp một cách thức để truyền dữ liệu qua cây thành phần (component tree) mà không phải chuyển các Props xuống theo cách thủ công ở mọi cấp độ. Ví dụ thông tin user đã đăng nhập, tùy chọn ngôn ngữ, UI Theme cần được truy cập trong ứng dụng bởi nhiều component.

const { Provider, Consumer } = React.createContext(defaultValue);

Cú pháp của React ES6 khác thế nào khi so với ES5 như thế nào?


Require và Import:

// ES5
var React = require("react");

// ES6
import React from "react";

Export và Exports

// ES5
module.exports = Component;

// ES6
export default Component;

Component và Function

// ES5
var MyComponent = React.createClass({
  render: function () {
    return <h2>Hello Edureka!</h2>;
  },
});

// ES6
class MyComponent extends React.Component {
  render() {
    return <h2>Hello Edureka!</h2>;
  }
}

Props

// ES5
var App = React.createClass({
  propTypes: { name: React.PropTypes.string },
  render: function () {
    return <h2>Hello, {this.props.name}!</h2>;
  },
});

// ES6
class App extends React.Component {
  render() {
    return <h2>Hello, {this.props.name}!</h2>;
  }
}

State

// ES5
var App = React.createClass({
  getInitialState: function () {
    return { name: "world" };
  },
  render: function () {
    return <h2>Hello, {this.state.name}!</h2>;
  },
});

// ES6
class App extends React.Component {
  constructor() {
    super();
    this.state = { name: "world" };
  }
  render() {
    return <h2>Hello, {this.state.name}!</h2>;
  }
}
Avatar Techmely Team
VIẾT BỞI

Techmely Team