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

byHiju Blog -
0


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



thumbnail





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




Từ những kiến thức cơ bản đến những khái niệm nâng cao, bạn sẽ được hướng
dẫn qua mỗi câu hỏi để hiểu rõ hơn về React và các khái niệm liên quan. Điều
này sẽ giúp bạn tự tin giải thích, triển khai và giải quyết các vấn đề phức
tạp liên quan đến React trong môi trường phỏng vấn.




Không chỉ đơn thuần là giải đáp câu hỏi, mỗi đáp án còn đi kèm với giải
thích chi tiết và ví dụ minh họa để bạn hiểu rõ hơn cách áp dụng kiến thức
vào thực tế. Bạn sẽ tiếp cận với các kiến thức thực tế và các tình huống
phức tạp mà các nhà tuyển dụng thường gặp khi tuyển dụng các nhà phát triển
React.




Vậy hãy cùng bắt đầu hành trình chuẩn bị cho buổi phỏng vấn React của bạn và
nắm vững những kiến thức quan trọng nhất để thể hiện tốt nhất khả năng của
mình. Đừng để câu hỏi phức tạp làm bạn lo lắng nữa, hãy trở thành một ứng
viên xuất sắc và chinh phục cơ hội việc làm mơ ước của bạn!




Hãy bắt đầu với những câu hỏi đầu tiên 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.





state


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 props, state 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);
};




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



Các bài viết liên quan:

Tags

Hiju Blog

I'm HiJu

You may like these posts

Post a Comment

Previous Post Next Post