Reactjs Interview Questions - Khám phá bộ câu hỏi phỏng vấn ReactJs

1. Reactjs Interview Questions  - Phân biệt DOM thật và DOM ảo.

2. Reactjs Interview Questions  - React là gì?

• React là một thư viện JavaScript front-end được Facebook phát triển vào năm 2011.
• Nó tuân theo cách tiếp cận dựa trên thành phần giúp xây dựng các thành phần giao diện người dùng có thể tái sử dụng.
• Nó được sử dụng để phát triển giao diện người dùng di động và web phức tạp và tương tác.
• Mặc dù nó chỉ có nguồn mở vào năm 2015, nó có một trong những cộng đồng lớn nhất hỗ trợ nó.

3. Reactjs Interview Questions  - Các tính năng của React là gì? 

Các tính năng chính của React được liệt kê dưới đây:

1. Nó sử dụng DOM ảo thay vì DOM thực.
2. Nó sử dụng kết xuất phía máy chủ .
3. Nó tuân theo luồng dữ liệu đơn hướng hoặc liên kết dữ liệu.

4. Reactjs Interview Questions  - Liệt kê một số ưu điểm chính của React.

Một số ưu điểm chính của React là:

1. Nó làm tăng hiệu suất của ứng dụng
2. Nó có thể được sử dụng thuận tiện trên máy khách cũng như phía máy chủ
3. Do JSX, khả năng đọc của mã tăng lên
4. React dễ dàng tích hợp với các khung công tác khác như Meteor, Angular, v.v.
5. Sử dụng React, viết các trường hợp kiểm thử giao diện người dùng trở nên cực kỳ dễ dàng

5. Reactjs Interview Questions  - Hạn chế của React là gì?

Các hạn chế của React được liệt kê dưới đây:

1. React chỉ là một thư viện, không phải là một khuôn khổ hoàn chỉnh
2. Thư viện của nó rất lớn và cần thời gian để hiểu
3. Có thể hơi khó hiểu đối với các lập trình viên mới bắt đầu
4. Việc mã hóa trở nên phức tạp vì nó sử dụng khuôn mẫu nội tuyến và JSX

6. Reactjs Interview Questions  - JSX là gì?

JSX là cách viết tắt của JavaScript XML. Đây là một loại tệp được sử dụng bởi React, sử dụng tính biểu cảm của JavaScript cùng với cú pháp HTML giống như mẫu. Điều này làm cho tệp HTML thực sự dễ hiểu. Tệp này làm cho các ứng dụng trở nên mạnh mẽ và tăng hiệu suất của nó. Dưới đây là một ví dụ về JSX:

>>>> Đọc thêm: So sánh ReactJs vs Angular

7. Reactjs Interview Questions  - Bạn hiểu gì về Virtual DOM? Giải thích hoạt động của nó.

DOM ảo là một đối tượng JavaScript nhẹ ban đầu chỉ là bản sao của DOM thực. Nó là một cây nút liệt kê các phần tử, các thuộc tính và nội dung của chúng dưới dạng các Đối tượng và các thuộc tính của chúng. Hàm render của React tạo ra một cây nút từ các thành phần React. Sau đó, nó cập nhật cây này để phản ứng với các đột biến trong mô hình dữ liệu do các hành động khác nhau do người dùng hoặc hệ thống thực hiện. DOM ảo này hoạt động theo ba bước đơn giản. 

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

1. Sau đó, sự khác biệt giữa bản đại diện DOM trước đó và bản mới được tính toán.

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

>>> Đọc thêm: Install Reactjs - Hướng dẫn cài đặt ReactJs trọn bộ từ A-Z

8. Reactjs Interview Questions  - Tại sao các trình duyệt không thể đọc JSX?

Trình duyệt chỉ có thể đọc các đối tượng JavaScript nhưng JSX không phải là một đối tượng JavaScript thông thường. Do đó, để cho phép trình duyệt đọc JSX, trước tiên, chúng ta cần chuyển đổi tệp JSX thành một đối tượng JavaScript bằng cách sử dụng các trình biến đổi JSX như Babel và sau đó chuyển nó vào trình duyệt.

 

9. Reactjs Interview Questions  - Cú pháp ES6 của React khác như thế nào khi so sánh với ES5?

Cú pháp đã thay đổi từ ES5 thành ES6 theo các khía cạnh sau:

1. require vs import
   

   1 2 3 4 5

   // ES5 var React = require('react');   // ES6 import React from 'react';

2. export vs exports
   
    
   
   

   1 2 3 4 5

   // ES5 module.exports = Component;   // ES6 export default Component;

3. component and function
   

   1 2 3 4 5 6 7 số 8 9 10 11 12 13 14 15 16 17 18 19

   // ES5 var MyComponent = React.createClass({     render: function() {         return   <h3>Hello Edureka!</h3> ;     } });   // ES6 class MyComponent extends React.Component {     render() {         return   <h3>Hello Edureka!</h3> ;     } }

4. props
   

   1 2 3 4 5 6 7 số 8 9 10 11 12 13 14 15 16 17 18 19 20

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

5. State
   

   1 2 3 4 5 6 7 số 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

   // ES5 var App = React.createClass({     getInitialState: function() {         return { name: 'world' };     },     render: function() {         return   <h3>Hello, {this.state.name}!</h3> ;     } });   // ES6 class App extends React.Component {     constructor() {         super();         this.state = { name: 'world' };     }     render() {         return   <h3>Hello, {this.state.name}!</h3> ;     } }