30 Câu Hỏi Phỏng Vấn Reactjs Bạn Nên Biết

30 Câu Hỏi Phỏng Vấn Reactjs Bạn Nên Biết


Ngày 26 Tháng 11 Năm 2021

Trong bài viết hôm nay mình sẽ giới thiệu đến bạn các kiến thức cần nắm để cho phỏng vấn reactjs cũng như áp dụng reactjs tốt hơn cho quá trinh thiết kế, phát triển website nha.

Các Câu Hỏi Phỏng Vấn Reactjs

1) Các Tính Năng Của Reactjs

React là một thư viện JavaScript front-end mã nguồn mở được phát triển bởi Jordan Walk (một kỹ sư phần mềm) tại Facebook vào năm 2011. Nó còn được sử dụng trong các sản phẩm của nổi tiếng khác của Facebook như WhatsApp & Instagram. Một số tính năng chính của nó là:

  • Sử Dụng Virtual DOM: Nó là một object Javascript nhỏ gọn được sao chép từ DOM thực. Điểm mạnh của nó là mỗi khi trạng thái của đối tượng thay đổi thì DOM ảo sẽ chỉ thay đổi đối tượng đó trong DOM thực mà không cần phải cập nhật tất cả các đối tượng trong website. Để giúp bạn dễ hình dung thì mình sẽ có bảng so sánh Virtual DOM và HTML DOM nha:
    Real DOMVirtual DOM
    Sử dụng bộ nhớ nhiều.Sử dụng bộ nhớ ít.
    Cập nhật lâu.Cập nhật nhanh.
    Cho phép cập nhật trực tiếp vào trang HTML.Không cho phép cập nhật trực tiếp vào trang HTML.
  • Sử dụng component: Các ứng dụng web của react được chia thành nhiều component và trong mỗi thành phần thì sẽ có logic và điều khiển riêng. Do đó khi render thì các component hoàn toàn độc lập với nhau và nếu bạn chỉnh sửa component bất kỳ thì sẽ không ảnh hưởng đến các component khác. Điểm mạnh của component là cho phép nhà phát triển có thể sử dụng lại (reusable) ở bất kỳ đâu trong dự án. Ngoài ra khi sử dụng nó thì sẽ giúp bạn dễ dàng bảo trì và tối ưu website hơn.
  • Sử dụng mô hình MVC (Model-View-Controller): là một trong những khung phát triển web tiêu chuẩn được sử dụng nhiều nhất hiện nay để tạo ra các dự án có tính mở rộng cao.
  • Tạo các ứng dụng web động rất dễ dàng và nhanh chóng.
  • Với sự phát triển mạnh mẽ thì react ngày càng có nhiều cộng đồng hỗ trợ và nhiều thư viện và công cụ ra đời giúp lập trình viên giảm thời gian viết mã cũng như thêm các tính năng cho dự án react một cách dễ dàng.
  • Dễ dàng kiểm tra và gỡ lỗi mã cho dự án React.
  • Dễ dàng sử dụng trên phía client(máy khách) cũng như phía server side(máy chủ).

Tuy nhiên nó cũng có một số điểm hạn chế như là:

  • Sẽ hơi khó hiểu với các bạn mới bất đầu tìm hiểu.
  • Cần nắm và hiểu cách sử dụng của nhiều thư viện để xây dựng, làm việc với reactjs hiệu quả.
  • Sử dụng JSX chứ không phải HTML do đó bạn bắt buộc phải nắm vững kỹ thuật này.

2) JSX Là Gì?

JSX (JavaScript XML) là một tiện ích mở rộng của React cho phép developer viết HTML bên trong JavaScript và đặt chúng bên trong DOM mà không cần sử dụng các hàm như appendChild () hoặc createElement (). Các file JSX sẽ làm cho ứng dụng web của React trở nên mạnh mẽ cũng như tăng hiệu suất hơn.

const container = (
 <div><br/>
   <p> Niem Vui Lap Trinh</p>
 </div>
);
ReactDOM.render(container,rootElement);

3) Tại Sao Trình Duyệt Không Đọc Được JSX?

Trình duyệt không thể đọc JSX được vì nó chỉ có thể hiểu các đối tượng JavaScript thông thường và JSX không phải là một đối tượng JavaScript thông thường.
Do đó để trình duyệt có thể đọc dược file JSX thì bạn cần sử dụng các bộ chuyển mã như Babel dể chuyển dổi JSX thành các javascript thông thường mà browsercó thể hiểu dược.

4) Hãy Giải Thích Cách Hoạt Động Của DOM Ảo

Virtual DOM là một đối tượng JavaScript và là một bản sao chép từ DOM thực. Nó là bước trung gian giữa hàm render đang được gọi và việc hiển thị các phần tử trên màn hình. React sử dụng hai DOM ảo để hiển thị giao diện người dùng. Dom ảo thứ nhất sẽ được sử dụng để lưu trữ trạng thái hiện tại của các đối tượng và Dom ảo thứ hai sẽ được dùng để lưu trữ trạng thái trước đó của các đối tượng.

Bất cứ khi nào DOM ảo được cập nhật, react sẽ so sánh hai DOM ảo này và biết được DOM ảo nào đã được cập nhật.
Sau khi biết đối tượng nào đã được cập nhật, react chỉ hiển thị các đối tượng đó bên trong DOM thực. Với cách sử dụng như vậy, nó sẽ giải quyết được vấn đề cập nhật không hiệu quả mà Dom thực đang gặp phải.

Virtual DOM Vs Real DOM

5) Hãy So Sánh Sự Khác Nhau ES6 Và ES5

Sử dụng export

/*Với ES5*/
module.exports = Component;

/*Với ES6*/
export default Component;

Sử dụng import

/*Với ES5*/
var React = require('react');

/*Với ES6*/
import React from 'react';

Sử dụng component:

/*Với ES5 */
var MyComponent = React.createClass({
    render: function() {
        return(
          <h3>Niem Vui Lap Trinh</h3>
        );
    }
});

/*Với ES6 */
class MyComponent extends React.Component {
    render() {
        return(
          <h3>Niem Vui Lap Trinh</h3>
        );
    }
}

Sử dụng props:

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

Sử dụng state:

/*Với ES5 */
var App = React.createClass({
       getInitialState: function() {
           return { name: 'niemvuilaptrinh' };
       },
       render: function() {
           return(
             <h3>Hi {this.state.name}</h3>
           );
       }
   });
/*Với ES6 */
  class App extends React.Component {
       constructor() {
           super();
           this.state = { name: 'niemvuilaptrinh' };
       }
       render() {
           return(
             <h3>Hi {this.state.name}</h3>
             );
       }
   }
  

6) Mục Đích Của Render Trong Reactjs

Mỗi component trong React đều bắt buộc phải có một hàm render(). Nó có nhiệm vụ chuyển đổi và xuất file HTML tới trang web để trình duyệt có thể hiểu và biên dịch. Nếu bạn muốn hiển thị nhiều phần tử HTML trong component thì cần phải nhóm chúng lại với nhau bằng các thẻ như <div>, <form>, <group>...

    import React from 'react';
    class App extends React.Component {
      render (){
         return (
            <h1>Niemvuilaptrinh</h1>
         )
      }
   }
   export default App;

7) Giải thích Props

Props là từ viết tắt của properties(thuộc tính). Nó là một đối tượng tích hợp trong React được sử dụng để lưu trữ giá trị của các thuộc tính của thẻ và có phương thức hoạt động giống như các thuộc tính HTML. Ngoài ra nó còn được dùng để truyền dữ liệu giữa các component trong Reactjs.

class ParentComponent extends Component {
         render() {
             return (
                     <ChildComponent name="Niemvuilaptrinh" />
             );
       }
}
const ChildComponent = (props) => { 
        return <p>{props.name}</p>
};

8) Giải thích State

State là một đối tượng React tích hợp được sử dụng để chứa dữ liệu hay thông tin về component. Mỗi khi State thay đổi thì component sẽ được hiển thị lại. Nó có thể được thay đổi trong suốt thời gian tồn tại của component để xử lý hành động của người dùng hay các sự kiện của hệ thống.

class Test extends React.Component {
         constructor() {
            this.state = {  
                 id: 1,
                name: "niemvuilaptrinh"
             };
       }
              render() { 
            return (
                   <div>
                       <p>{this.state.id}</p>
                       <p>{this.state.name}</p>
                   </div>  
           );  
    }
}

9) Cách Cập Nhật Trạng Thái Cho State

Chúng ta sẽ sử dụng phương thức this.setState() để cập nhật State cho component thông qua đoạn code sau nha:

class App extends React.Component {
      constructor() {
         super();
               this.state = {
             content: "NiemVuiLapTrinh"
         };
             this.updateSetState = this.updateSetState.bind(this);
      }
      updateSetState() {
          this.setState({
             content:"Cập Nhật State"
          });
      }
      render() {
         return (
            <div>
                <h1>{this.state.content}</h1>
                <button onClick = {this.updateSetState}>Cập Nhật State</button>
            </div>
         );
      }
   }
   export default App;

10) Sự Khác Nhau Của State Và Props

Để dễ hình dung và so sánh thì bạn hãy xem bảng phía dưới nha.

StateProps
State là mutable(có thể thay đổi).Props là immutable(bất biến).
Có thể thay đổiChỉ đọc (read only)
Giữ dữ liệu và thông tin của conponent.Cho phép truyền dữ liệu giữa các component với nhau như là một tham số.
Stateless component không thể sử dụng State.Stateless component có thể sử dụng Props.
Không thể tạo các component có tính sử dụng lại(resuable).Có thể tạo các component có tính sử dụng lại(resuable).
Có thể được sử dụng để hiển thị các thay đổi động cho component.Có thể được sử dụng để giao tiếp giữa các component với nhau.

Và để khái quát hơn thì bạn đọc dưới đây để dẽ hiểu hơn nha:

  • Các component sẽ nhận dữ liệu từ bên ngoài bằng các Props, trong khi các component này có thể tạo và quản lý dữ liệu của riêng mình với State.
  • Props được sử dụng để chuyển dữ liệu còn State là để quản lý dữ liệu.
  • Dữ liệu Props chỉ đọc và không thể sửa đổi bởi component và được nhận từ bên ngoài.
  • Dữ liệu State có thể được sửa đổi bởi component không thể truy cập từ bên ngoài.
  • Chỉ có thể truyền Props từ thành phần cha sang thành phần con (luồng một chiều).
  • Việc sửa đổi State sẽ sử dụng phương thức setState ().

11) Sự Khác Nhau Stateless Và Stateful Components.

Stateless: là thành phần không có state.
Stateful: là thành phần có lưu trữ một số state.
Điểm chung của hai component này đều có thể sử dụng Props nha. Để hiểu rõ hơn bạn xem ví dụ sau đay nha:

/*Stateful*/
class Hi extends React.Component {
  constructor(props) {
    super(props);
    this.state = { content: 'niemvuilaptrinh' };
  }
  render() {
    return <h1>Hi {this.state.content}.</h1>;
  }
}
/*Stateless*/
class Hello extends React.Component {
  render() {
    return <h1>Hello {this.props.content}!</h1>;
  }

Sự khác nhau giữa Stateless và Stateful:

StatelessStateful
Không giữ hoặc quản lý state.Có thể giữ hoặc quản lý state.
Được biết đến như là một functional component.Được biết đến như là một class component.
Đơn giản và dễ hiểu.Hơi phức tạp.
Không hoạt động với các phương thức vòng đời(lifecycle) nào của React.Hoạt động với các tất cả các phương thức vòng đời(lifecycle) của React
Không có tính sử dụng lại(resuable).Có tính sử dụng lại(resuable).

12) Giải thích các method của lifecycle(Vòng Đời) React

  • getInitialState(): Nó được sử dụng để thiết lập giá trị mặc định của this.state và được thực thi trước khi tạo component.
  • componentDidMount(): Được thực thi khi render component và đặt trên DOM. Và Có thể thực hiện thao tác truy vấn DOM.
  • shouldComponentUpdate(): Được gọi khi một component xác định thực hiện thay đổi đối với DOM và trả về giá trị “true” hoặc “false” dựa trên các điều kiện nhất định.
  • componentDidUpdate(): Nó được gọi ngay lập tức sau quá trình render diễn ra.
  • componentWillUnmount(): Nó được gọi ngay khi một component bị xoá khỏi DOM(remove).

13) Cách Viết Comment Trong Reactjs

Cách thứ nhất sử dụng //:

function App() {
  //const name = "niemvuilaptrinh"
  return (
    <h1>Niem Vui Lap Trinh</h1>
  );
}

Cách thứ hai sử dụng /**/:

function App() {
  /*const name = "niemvuilaptrinh"*/
  return (
    <h1>Niem Vui Lap Trinh</h1>
  );
}

Sử dụng comment trong JSX bằng {/* */}:

export default function App() {
  return (
    <div>
      <h1>Hello </h1>
      {/* <p>Niem Vui Lap Trinh</p> */}
    </div>
  );
}

14) Cách tạo Dự Án React

Cách thứ nhất bạn có thể sử dụng CDN để thiết lập React và React DOM cho website:

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

Cách thứ hai chúng ta sử dụng npm để cài đặt reactjs:
Đầu tiên bạn cần phải cài đặt Nodejs -> tạo dự án react bằng npx create-react-app tên dự án.
Để hiểu rõ hơn bạn truy cập dường dẫn ở đây nhé.

15) Cách Nhúng Hai Hay Nhiều Component

Để thêm hai hay nhiều component trong ReactJS thì bạn xem đoạn code sau nha:

import React from 'react'
       class App extends React.Component {
      render (){
         return (
            <h1>Hi Niemvuilaptrinh</h1>
         )
      }
   }
       class Example extends React.Component {
      render (){
         return (
            <h1>Hello Niemvuilaptrinh</h1>
         )
      }
   }
   export default App

16) Cách Sử Dụng Arrow Function Trong React

Arrow Function là tính năng mới của tiêu chuẩn ES6. Nếu như bạn sử dụng arrow function thì chúng ta không cần phải ràng buộc bất kỳ sự kiện nào với this. Để hiểu rõ hpnw bạn xem doạn code sau nha:

/*Cách Thông Thường*/
render() {
           return(
           <MyInput onChange={this.handleChange.bind(this) } />
       );
   }
/*Sử Dụng Arrow Function*/
render() {
         return(
           <MyInput onChange={ (e) => this.handleOnChange(e) } />
       );
   }

17) Event Trong React Là Gì?

Event là hành động kích hoạt do hành động của người dùng hoặc các sự kiện do hệ thống như tải trang web, nhấp chuột, thay đổi kích thước trình duyệt... Trong React, hệ thống xử lý sự kiện có nét tương đồng với xử lý sự kiện các phần tử trong DOM. Nhưng nó có một số điểm khác biệt là:

  • Tên của sự kiện trong React sẽ được viết theo kiểu Camle case (Ví dụ onClick).
  • Hàm sẽ được truyền dưới dạng xử lý sự kiện thay vì chuỗi ở trong JSX.

Để hiểu rõ hơn chúng ta đi vào tìm hiểu cách tạo event trong react thông qua đoạn mã sau đay nha:

class Display extends React.Component({
    show() {
       alert("Hi Niemvuilaptrinh");
    },
    render() {
        return (
          <div onClick={this.show}>Hiển Thị Thông Báo</div>
        );
    }
});

18) Synthetic Event Là Gì?

Synthetic Event(Sự kiện tổng hợp) kết hợp phản hồi của các sự kiện gốc của các trình duyệt khác nhau thành một API, đảm bảo rằng các sự kiện nhất quán trên các trình duyệt khác nhau. Để hiểu rõ hơn bạn xem đoạn code sau nha:

function ActiveLink() {
    function handleClick(e) {
        e.preventDefault();
        console.log('Bạn Vừa Nhấn Vào Đường Dẫn');
    }
    return (
        <a href="#" onClick={handleClick}>
           Nhấn Vào Đường Dẫn
        </a>
    );
}

19) Lợi Ích Của key Trong Props

key là một thuộc tính chuỗi đặc biệt và duy nhất. Nó sẽ giúp React xác định những mục nào đã thay đổi, được thêm vào hoặc bị xóa. Bạn không nên sử dụng chỉ mục cho các key nếu thứ tự của các mục có thể thay đổi vì nó có thể có tác động không tốt đến hiệu suất và có thể gây ra các vấn đề về state.

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

20) Sự Khác Nhau Giữa Uncontrolled và Controlled Component

Trong phần này mình sẽ so sánh điểm khác nhau giữa uncontrolled và controlled component nha.

ControlledUncontrolled
Dữ liệu được kiểm soát bởi parent component.Dữ liệu được kiểm soát bởi DOM.
Chấp nhận giá trị hiện tại như một props.Sử dụng ref để lấy giá trị hiện tại.
Cho phép validation control.Không cho phép validation control.
Nó không duy trì trạng thái bên trong của nó.Nó duy trì các trạng thái bên trong của nó.
Kiểm soát tốt hơn cho dữ liệu và form elements.Kiểm soát hạn chế cho dữ liệu và form elements

21) Higher Order Components Là Gì?

Higher Order Components là một cách nâng cao để sử dụng lại logic của component và không phải là một phần của API React nha. Nó là một hàm nhận một component và trả về một component mới.

22) Chức năng của refs trong React

Refs là một thuộc tính đặc biệt có thể gắn vào các component. Nó có thể là một đối tượng được tạo bởi React.createRef (), hàm callback() hay một chuỗi.
Nó là một thuộc tính giúp lưu trữ một tham chiếu đến các nút DOM cụ thể hoặc các phần tử React. Nó được sử dụng khi bạn muốn thay đổi giá trị của một component con mà không cần phải sử dụng props. Thông thường nó sử dụng trong một số trường hợp như sau:

  • Khi bạn cần quản lý focus, lựa chọn văn bản hay media playback.
  • kích hoạt các hiệu ứng animation.
  • Tích hợp với các thư viện khác.
  • Trả về tham chiếu đến một phần tử.
  • Sử dụng như một hàm callback.

Để tham khảo các ví dụ sử dụng refs trong react thì bạn truy cập ở đây nhé.

23) Sự Khác Nhau Giữa Class Và Function Component

Class ComponentsFunctional Components
Có thể giữ hay quản lý state.Không thể giữ hay quản lý state
Phải có phương thức render() để trả về HTML.Không cần phương thức render().
Có thể làm việc với tất cả các phương thức lifecycle trong react.Không thể làm việc với các phương thức lifecycle.
Có thể sử dụng lại.Không thể sử dụng lại.

24) Sử Dụng Styling Trong React

Bạn có thể sử dụng thuộc tính style trong React để thiết lập CSS cho các component. Thông thường nó sẽ có 4 cách là:

  • Inline Styling.
  • CSS Module
  • Styled Components
  • CSS Stylesheet

Bây giờ chúng ta sẽ đi vào xem các ví dụ cụ thể cho từng trường hợp nha:

1)Inline Styling:

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "blue"}}>Niemvuilaptrinh</h1>
      </div>
    );
  }
}

2)CSS Module:

File content.css

.content {
  color: blue;
}

Import content.css vào component:

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './content.css';
  class Hello extends React.Component {
  render() {
    return <h1 className={styles.content}>Hello Niemvuilaptrinh</h1>;
  }
}
export default Hello;

3)Styled Components:

class Hello extends React.Component {
  render() {
    const mystyle = {
      color: "blue"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello niemvuilaptrinh</h1>
      </div>
    );
  }
}

4)CSS Stylesheet:

File content.css

.h1 {
  color: blue;
}

Import content.css vào react:

import React from 'react';
import ReactDOM from 'react-dom';
import './content.css';
class Hello extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello niemvuilaptrinh!</h1>
      </div>
    );
  }
}
ReactDOM.render(<Hello />, document.getElementById('root'));

25) Chức Năng Form Trong React

Form được sử dụng để cho phép người dùng tương tác với các ứng dụng web như giúp người dùng có thể giao tiếp với ứng dụng và nhập thông tin cần thiết, để lấy thông tin đầu vào từ người dùng, xác thực người dùng, tìm kiếm, lọc...

26) Làm Sao Để Tạo Component Trong React

Chúng ta có hai cách chính để tạo component trong React là sử dụng Function và Class Component.

1) Function Component:

function Hello({ msg }) {
  return <h1>{`Hello, ${msg}`}</h1>
}

2) Class Component:

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

27) Làm Sao Để Tối Ưu Hoá Trong State

Tốt nhất là cố gắng làm cho state của component càng đơn giản càng tốt và giảm thiểu số lượng các stateful components.

28) Fragment Là Gì?

Trong React, Fragment được sử dụng để một thành phần trả về nhiều phần tử. Nó cho phép bạn nhóm một danh sách nhiều con mà không cần thêm một nút bổ sung vào DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Các lợi ích của Fragments là:

  • Nó nhanh hơn một chút và sử dụng ít bộ nhớ hơn do hông cần tạo thêm nút DOM.
  • Dễ dàng xây dựng bố cục như mong muốn khi sử dụng CSS Grid hay Flexbox cho các component mẹ con với thẻ dic ở giữa.
  • DOM inspector ít lộn xộn hơn.

29) Pure Component Là Gì?

ReactJS cung cấp pure component trong phiên bản 15. . Giả sử nếu chúng ta mở rộng một class với Pure Component, thì không cần đến Phương thức Vòng đời shouldComponentUpdate (). Pure Component Class sẽ so sánh state và props hiện tại với props và state mới để quyết định xem liệu thành phần React có nên tự hiển thị lại hay không.

30) Error Boundaries Là Gì?

Được giới thiệu trong React v16 như một cách để bắt các lỗi phức tạp xảy ra trong giai đoạn render. Trước đây, điều này có thể khiến ứng dụng bị ngắt kết nối hoàn toàn và người dùng sẽ chỉ thấy một trang web trống.

Nếu bạn muốn tham khảo các nơi học lập trinh React miễn phí thì truy cập ở đây nha.

Nếu bạn muốn tham khảo các công cụ hũu ích React thì truy cập ở đây nha.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn các kiến thức cơ bản về Reactjs cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!