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

Portal trong ReactJS là gì?


Portal là một cách được đề xuất để hiển thị phần tử con thành một nút DOM tồn tại bên ngoài phân cấp DOM của parent component.

ReactDOM.createPortal(child, container);

Đối số đầu tiên (child) là bất kỳ React con nào có thể render được, chẳng hạn như một element, string hoặc fragment. Đối số thứ hai (container) là một phần tử DOM.

Ví dụ thông thường khi chúng ta có component cha là A, bên trong đó render component con là B, thì thằng B này sẽ luôn bị bọc lại bên trong A

<div class="component-c"></div>
<div class="component-a">
  <div class="component-b"></div>
</div>

Giờ nếu ta muốn khi viết thì vẫn viết component B bên trong component A, nhưng kết quả html ta có được thì component B lại nằm trong component C. Đó là lúc chúng ta cần đến Portal, ta sẽ bọc component B bằng hàm createPortal, để khi render B thì nó lại render ở C.

import ReactDOM from "react-dom";
ReactDOM.createPortal(child, container);

Trong đó:

  • ReactDOM.createPortal là hàm của react-dom
  • child là thằng B, thằng con đi lông nhông không thèm ở nhà với cha nó
  • container là nhà thằng hàng xóm, nơi thằng con B hoang đàng sẽ ở ké.

Để sử dụng Portal, chúng ta tạo ra một component mới, độc lập với B, rồi đẩy thằng B hay bất kỳ đứa nào muốn có cuộc sống du mục thành child component của component mới tạo này, đặt tên là MyPortal.

import React, { Component } from "react";
import PropTypes from "prop-types";
import ReactDOM from "react-dom";

class MyPortal extends Component {
  render() {
    // tìm coi có đứa nào chịu chứa chấp nó không
    const haveTarget = document.getElementById(this.props.target);
    // không nơi chứa chấp thì ta ko render luôn
    return haveTarget
      ? ReactDOM.createPortal(this.props.children, haveTarget)
      : null;
  }
}
MyPortal.propTypes = {
  // là id của html element ta sẽ append cái đứa con hoang đàng vô
  target: PropTypes.string.isRequired,
};

export default MyPortal;

Component A sẽ viết như thế này

return (
  <div className="component-a">
    Hello An.Luu
    <MyPortal target='targetForB'>
      <div className="component-b">
        EmB!
      </div>
    </MyPortal>
  </div>
)
...

// trong đó, id có thể nằm ở bất kỳ component nào đó khác, thậm chí window khác luôn mới ghê

// ví dụ component C
...
return (
  <div className="component-c">
    EmC!
    <div id="targetForB" />
  <div>
)

Higher-Order component trong React là gì?


Higher-Order component (HOC) là một hàm nhận một component và trả về một component mới. Về cơ bản, đó là một pattern có nguồn gốc từ bản chất component của React.

Có thể gọi chúng là các "pure component" vì chúng có thể chấp nhận bất kỳ component con nào được cung cấp động nhưng chúng sẽ không sửa đổi hoặc sao chép bất kỳ hành vi nào từ các component đầu vào của chúng.

HOC được sử dụng cho nhiều trường hợp bên dưới:

  • Tái sử dụng mã, logic và trừu tượng.
  • Tính trừu tượng và thao tác trên state.
  • Các thao tác trên props.

Stateful component trong React là gì?


Nếu hành vi của một component phụ thuộc vào state của component thì nó có thể được gọi là Stateful component.

Các stateful component này luôn là các Class component và có state được khởi tạo trong constructor.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    // omitted for brevity
  }
}

Error Boundary được xử lý thế nào trong React?


React 15 cung cấp sự hỗ trợ rất cơ bản cho các Error boundary bằng cách sử dụng phương thức stable_handleError.

Sau đó, từ React16 beta, nó đã được đổi tên thành componentDidCatch.

Ví dụ:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Store trong redux là gì?


Store là 1 object để giữ state của ứng dụng, nó có trách nhiệm sau:

  • Cho phép truy cập vào state thông qua getState().
  • Cho phép cập nhật state thông qua dispatch(action).
  • Đăng ký việc lắng nghe qua subscribe(listener).
  • Xử lý việc hủy đăng ký lắng nghe thông qua function do subscribe(listener) trả về.

Store trong redux là gì

Sự khác nhau giữa createElement và cloneElement là gì?


createElementcloneElement
createElement là những gì JSX được chuyển đến và là những gì React sử dụng để tạo các React element (đối tượng đại diện của một số UI)cloneElement được sử dụng để sao chép một element và truyền các props mới cho nó.
createElement được sử dụng để mô tả giao diện người dùng trông như thế nào.cloneElement được sử dụng để thao tác với các element.
createElement yêu cầu type, props và phần tử con làm đối số.cloneElement yêu cầu các elements, props và phần tử con làm đối số.
Nó tạo và trả về một phần tử mới với kiểu như đã cho trong các đối số.Nó sao chép và trả về một phần tử mới với các thuộc tính của một phần tử đã cho.

Dưới đây là ví dụ sử dụng createElement

import React from "react";
import "./styles.css";
const title = React.createElement(
  "h1",
  { className: "title" },
  "GeeksforGeeks",
);
const App = () =>
  React.createElement("div", {}, [
    React.createElement("button", { className: "btn" }, title),
    React.createElement("button", { className: "btn" }, title),
  ]);

export default App;

Còn dưới đây là ví dụ sử dụng cloneElement

import React from "react";
import Button from "./Button";
import "./styles.css";
const App = () => {
  return (
    <Parent>
      <Button />
      <br />
      <br />
      <Button />
    </Parent>
  );
};

const Parent = props => {
  let btn = "GeeksforGeeks";
  return (
    <div>
      {React.Children.map(props.children, child => {
        return React.cloneElement(child, { btn }, null);
        // third parameter is null
        // Because we are not adding
        // any children
      })}
    </div>
  );
};

export default App;
// file Button.js
import React from "react";
const Button = props => {
  return <button>{props.btn}</button>;
};

export default Button;

Cách để tránh phải liên kết với biến "this" trong các phương thức Event callback?


Sử dụng arrow function trong các Event handler.

PropTypes trong React để làm gì?


Chúng giúp cho React biết các thuộc tính của một thành phần React thuộc loại dữ liệu nào và được chấp nhận.

Kể tên một số thư viện Flux phổ biến?


Mặc dù Flux là một mẫu chung để thực thi luồng dữ liệu thông qua một ứng dụng, nhưng vẫn tồn tại nhiều cách triển khai từ đó để chúng ta chọn, ví dụ:

  • Redux: có lẽ là thư viện Flux phổ biến nhất hiện nay.
  • Alt.js: một thư viện phổ biến khác để quản lý dữ liệu trong các ứng dụng React.

shouldComponentUpdate để làm gì khi nào thì sử dụng?


shouldComponentUpdate() là một lifecycle method cho phép chúng ta chọn không tham gia vào quy trình reconciliation cho các component nhất định (và các component con của chúng).

Nếu chúng ta biết rằng một phần nhất định trong UI của chúng ta thì sẽ không thay đổi, thì không có lý do gì để React gặp khó khăn khi cố gắng tìm hiểu xem nó có thay đổi hay không.

Bằng cách trả về false từ shouldComponentUpdate, React sẽ giả định rằng component hiện tại và tất cả component con của nó sẽ giữ nguyên như hiện tại.

Avatar Techmely Team
VIẾT BỞI

Techmely Team