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

React hook là gì?


Hook là nỗ lực của React để mang sự thuận tiện của component dựa theo class sang component dựa theo function (bao gồm state nội tại và các phương thức vòng đời)

  • Hooks là một bổ sung mới trong React 16.8.
  • Hooks là những hàm cho phép bạn "kết nối" React state và lifecycle vào các components sử dụng hàm.
  • Với Hooks bạn có thể sử dụng state và lifecycles mà không cần dùng ES6 Class.

image

Các ưu điểm của React hooks?


Có một vài lợi ích khi sử dụng React hook là:

  • Khiến các component trở nên gọn nhẹ hơn
  • Giảm đáng kể số lượng code, dễ tiếp cận
  • Xoá bỏ sự không cần thiết của component dựa theo class, các vòng đời và keyword this
  • Dễ dàng tái sử dụng logic, bằng cách trừu tượng hoá các chức năng phổ biến thành custom hook
  • Code dễ đọc, dễ test bằng cách chia sẻ logic giữa các component với nhau

Redux là gì?


Redux là thư viện quản lý state bên thứ 3 cho React, được tạo trước context API. Nó dựa theo khái niệm của một kho chứa state, hay gọi là store, các component có thể nhận dữ liệu từ các props. Cách duy nhất để update store là dispatch một hành động đến store, và việc này được thực thi qua reducer. Reducer sẽ nhận action và state hiện tại, và trả về một state mới, đồng thời kích hoạt cho các component đăng ký trạng thái re-render lại.

image

Liệt kê một vài giới hạn của React?


  • React chỉ là một thư viện, không phải là 1 framework toàn diện.
  • React là một thư viện lớn mất nhiều thời gian để học.
  • Nó có thể hơi khó để làm quen đối với các lập trình mới.
  • Việc code sẽ phức tạp hơn vì React dùng inline-templating và JSX.

Chức năng của hàm render() trong React là gì?


Mỗi React component bắt buộc phải có hàm render(). Hàm render() trả về duy nhất React element. Nếu bạn cần trả về nhiều React element thì bạn phải nhóm chúng trong một thẻ khác ví dụ như <form></form>, <div></div>,...

Hàm render chính là phần hiển thị giao diện(UI) cho người dùng tại bất cứ thời điểm nào. Nếu dữ liệu thay đổi, React sẽ tự động gọi hàm render để update lại UI thực hiện việc update UI với dữ liệu tương ứng.

ReactJS là gì? Nêu các tính năng nổi bật của Reactjs?


React là thư viện JavaScript được phát triển bởi Facebook vào năm 2011. Nó được dùng để xây dựng giao diện người dùng (User Interface – UI) dạng Single Page. Một số tính năng nổi bật của Reactjs:

  • Sử dụng JSX: Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trang web thì sẽ dùng JSX. JSX được đánh giá là sử dụng đơn giản hơn JavaScript và cho phép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML để render các subcomponent. JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so với code JavaScript tương đương.
  • Single-way data flow (Luồng dữ liệu một chiều): ReactJS không có những module chuyên dụng để xử lý data, vì vậy ReactJS chia nhỏ view thành các component nhỏ có mỗi quan hệ chặt chẽ với nhau. Luồng truyền dữ liệu trong ReactJS là luồng dữ liệu một chiều từ cha xuống con. Việc ReactJS sử dụng one-way data flow có thể gây ra một chút khó khăn cho những người muốn tìm hiểu và ứng dụng vào trong các dự án. Tuy nhiên, cơ chế này sẽ phát huy được ưu điểm của mình khi cấu trúc cũng như chức năng của view trở nên phức tạp thì ReactJS sẽ phát huy được vai trò của mình.
  • Virtual DOM: Những Framework sử dụng Virtual-DOM như ReactJS khi Virtual-DOM thay đổi, chúng ta không cần thao tác trực tiếp với DOM trên View mà vẫn phản ánh được sự thay đổi đó. Do Virtual-DOM vừa đóng vai trò là Model, vừa đóng vai trò là View nên mọi sự thay đổi trên Model đã kéo theo sự thay đổi trên View và ngược lại. Có nghĩa là mặc dù chúng ta không tác động trực tiếp vào các phần tử DOM ở View nhưng vẫn thực hiện được cơ chế Data-binding. Điều này làm cho tốc độ ứng dụng tăng lên đáng kể – môt lợi thế không thể tuyệt vời hơn khi sử dụng Virtula-DOM.

JSX là gì? Các trình duyệt có đọc được JSX không?


JSX (JavaScript XML) là một loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML.

Mã lệnh viết bằng JSX sẽ được chuyển sang JavaScript để trình duyệt có thể hiểu được.

Ví dụ:

const element = <h1>Hello, world!</h1>;
const name = "Mark";
const element = <h1>Hello, {name}</h1>;

Các trình duyệt không thể đọc được các thẻ JSX bởi vì JSX không phải một đối tượng Javascript thông thường. Về cơ bản, nó là một phương ngữ mới phổ biến mà chỉ đơn giản tích hợp các mẫu HTML vào mã JavaScript. Để đọc được cần có sự hỗ trợ của WebPack hoặc Babel.

Sự khác nhau của các từ khóa let, var, const trong ES6?


let tạo ra một biến chỉ có thể truy cập được trong block bao quanh nó, khác với var - tạo ra một biến có phạm vi truy cập xuyên suốt function chứa nó.

const dùng để khai báo một hằng số - là một giá trị không thay đổi được trong suốt quá trình chạy.

Lưu ý trường hợp này với let và const trong ES6:

function foo () {
  typeof bar;
  let bar = ‘baz’;
}
foo(); // ReferenceError: can't access lexical declaration
       // `bar' before initialization

Bạn thích Hooks nào? Hãy tạo một Hooks bất kỳ.


Người phỏng vấn muốn thấy: bạn sử dụng Hooks và hiểu cách nó hoạt động như thế nào. Mặc dù Hooks mới được giới thiệu từ React 16.8, nhưng đã có nhiều người sử dụng nó trong sản phẩm của họ và họ mong đợi bạn biết nó.

Chúng ta hãy tạo 1 hook “useWindowSize” – đây là một hook khá đơn giản và dễ hiểu.

import { useState, useEffect } from "react";
const useWindowSize = () => {
  const getSize = () => ({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  const [size, setSize] = useState(getSize);
  useEffect(() => {
    const handleResize = () => setSize(getSize());
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return size;
};

Cách dùng:

const App = () => {
  const size = useWindowSize();
  return (
    <div>
      {size.width}px / {size.height}px
    </div>
  );
};

Bạn có thể sẽ nhận được thêm vài câu hỏi như sau:

  • Có cần thiết phải đặt tên hook của bạn là “useWindowSize” không, đặt tên khác ví dụ như “getWindowSize” thì sao? Nó là cần thiết, vì theo rules of Hooks, tên hook luôn phải bắt đầu với từ “use”.
  • Nó có hoạt động không nếu chúng ta bỏ “[]” khỏi “useEffect”? Nó vẫn hoạt động, nhưng nó sẽ gọi hook “useEffect” mỗi lần render, điều này sẽ làm gây ra các vấn đề về performance.
  • Làm sao React biết khi nào sẽ re-render component “App” nếu chúng ta xử lý window resizing trong “useWindowSize”? Khi chúng ta gọi “setSize” bên trong hook “useWindowSize”, React biết hook đó được dùng trong component “App” và sẽ re-render nó.
  • Làm sao để hook này không bị lỗi khi dùng ở Server-Side render?
import { useState, useEffect } from "react";
const useWindowSize = () => {
  const isClient = typeof window === "object";
  const getSize = () => ({
    width: isClient ? window.innerWidth : undefined,
    height: isClient ? window.innerHeight : undefined,
  });
  const [size, setSize] = useState(getSize);
  useEffect(() => {
    const handleResize = () => setSize(getSize());
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return size;
};

React hoạt động như thế nào?


React tạo ra một DOM ảo.

Khi trạng thái thay đổi trong một component, trước tiên nó chạy một thuật toán "khác biệt (diffing)", xác định những gì đã thay đổi trong DOM ảo.

Bước thứ hai là điều chỉnh (reconciliation), nơi nó cập nhật DOM với kết quả của khác biệt.

Làm sao để viết 1 inline style trong React?


Ta có thể viết như sau:

<div style={{ height: 10 }}>kungfutech.edu.vn</div>

Props trong React là gì?


Props là đầu vào cho một React component.

Chúng là các giá trị đơn lẻ hoặc các đối tượng chứa một tập hợp các giá trị được chuyển cho React component khi khởi tạo bằng cách sử dụng quy ước đặt tên tương tự như các thuộc tính thẻ HTML. Tức là, Props là dữ liệu được truyền từ thành phần mẹ sang thành phần con.

Mục đích chính của Props trong React là cung cấp chức năng thành phần sau:

Chuyển dữ liệu tùy chỉnh đến React 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ụ: chúng ta hãy tạo một phần tử có thuộc tính reactProp
<Element reactProp="1" />

Tên reactProp này (hoặc bất cứ thứ gì bạn nghĩ ra) sẽ trở thành một thuộc tính gắn liền với đối tượng props gốc của React (this.props), là đối tượng đã tồn tại trên tất cả các component được tạo bằng thư viện React.

props.reactProp;

Refs được dùng như thế nào?


Refs thường được dùng để trả về một tham chiếu tới 1 phần tử.

Hầu hết nên tránh sử dụng chúng trong các trường hợp, tuy nhiên chúng có thể hữu ích khi chúng ta cần truy cập trực tiếp vào phần tử DOM hoặc 1 component trong React.

Refs cho phép bạn truy cập trực tiếp vào phần tử DOM hoặc một phiên bản của thành phần.

Để sử dụng chúng, bạn thêm thuộc tính ref vào component có giá trị là một hàm callback sẽ nhận phần tử DOM bên dưới hoặc phiên bản được gắn kết của component làm đối số đầu tiên của nó.

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value);
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={input => (this.input = input)} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

Ở trên lưu ý rằng trường đầu vào của chúng ta có thuộc tính ref có giá trị là một hàm. Hàm đó nhận phần tử DOM thực tế của đầu vào mà sau đó chúng ta đặt trên component để có quyền truy cập vào nó bên trong hàm handleSubmit.

Người ta thường hiểu sai rằng bạn cần sử dụng một class component để sử dụng refs, nhưng refs cũng có thể được sử dụng với các functional component bằng cách tận dụng các bao đóng (leveraging closures) trong JavaScript.

function CustomForm({ handleSubmit }) {
  let inputElement;
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input type="text" ref={input => (inputElement = input)} />
      <button type="submit">Submit</button>
    </form>
  );
}
Avatar Techmely Team
VIẾT BỞI

Techmely Team