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

Forwarding Refs trong React là gì?


Forwarding Refs là một kỹ thuật để tự động chuyển một ref từ một component tới component con, cho phép component cha có thể tham chiếu tới các element của component con để đọc và chỉnh sửa nó.

React cung cấp cho chúng ta một cách thức để thực hiện việc chuyển tiếp một ref, chúng ta sẽ bao component con trong React.forwardRef(), ở đây mình có ví dụ:

//Component Con
const MyInput = React.forwardRef((props, ref) => {
  return <input name={props.name} ref={ref} />;
});
// Component Cha
const MyComponent = () => {
  let ref = React.createRef();
  return <MyInput name="email" ref={ref} />;
};

Ví dụ bên trên mình đã sử dụng React.forwardRef(), ở đây nó cung cấp cho chúng ta 2 tham số lần lượt là propsrefs, cho chúng ta nhận về giá trị của propsrefs từ component cha.

Chúng ta có thể sử dụng React.forwardRef() trong class component bằng cách này sử dụng HOC (higher order component)

// Lấy ref thông qua props
class WrappedComponent extends Component {
  render() {
    return (
      <input type="text" name={this.props.name} ref={this.props.innerRef} />
    );
  }
}
// Gói componentnt được bọc của chúng tôi với ForwardRef, truyền vào props giá trị của refs
const MyInput = React.forwardRef((props, ref) => {
  return <WrappedComponent innerRef={ref} {...props} />;
});
export default MyInput;

Và cuối cùng chúng ta sẽ làm ví dụ có chức năng giống ví dụ ban đầu nhưng chúng ta sẽ tham chiếu đến element input trong component con.

import React from "react";

//Component Con
const MyInput = React.forwardRef((props, ref) => {
  return <input name={props.name} ref={ref} />;
});
// Component Cha
const MyComponent = () => {
  let ref = React.createRef();
  const handleButton = () => {
    ref.current.focus();
  };
  return (
    <>
      <code>freetuts.net</code>
      <MyInput name="email" ref={ref} />
      <button onClick={handleButton}>Focus Input</button>
    </>
  );
};
export default MyComponent;

Children prop là gì?


Children là prop (this.prop.children) cho phép bạn chuyển các components dưới dạng dữ liệu đến các components khác, giống như bất kỳ prop nào khác mà bạn sử dụng. Có một số phương pháp có sẵn trong API React để làm việc với prop này. Bao gồm:

  • React.Children.map
  • React.Children.forEach
  • React.Children.count
  • React.Children.only
  • React.Children.toArray

Cách sử dụng đơn giản của children prop như dưới đây:

var MyDiv = React.createClass({
  render: function () {
    return <div>{this.props.children}</div>;
  },
});
ReactDOM.render(
  <MyDiv>
    <span>Hello</span>
    <span>World</span>
  </MyDiv>,
  node,
);

Làm thế nào để thiết lập state với dynamic key name?


Nếu bạn đang sử dụng ES6 hoặc trình chuyển đổi Babel để chuyển đổi mã JSX của mình thì bạn có thể thực hiện điều này với Computed property name:

handleInputChange : function (event) {
    this.setState({ [event.target.id]: event.target.value });
}

VirtualDOM là gì?


Để hiểu về VisualDOM trước tiên chúng ta tìm hiểu DOM là gì

DOM là tên gọi tắt của Document Object Model (Mô hình Đối tượng Tài liệu), là một chuẩn được định nghĩa bởi W3C dùng để truy xuất và thao tác trên code HTML hay XML bằng các ngôn ngữ lập trình thông dịch (scripting language) như Javascript.

DOM giúp thao tác với dữ liệu theo mô hình hướng đối tượng do các phần tử trong DOM có cấu trúc được định nghĩa thành các đối tượng, phương thức, thuộc tính để có thể truy xuất dễ dàng. Chúng được coi như các node và được biểu diễn dưới dạng DOM Tree.

Trong khi HTML là 1 đoạn code, DOM là một thể hiện trừu tượng của đoạn code đó trong bộ nhớ.

<html>
  -> document node
  <head>
    -> element node - head
    <title>HTML DOM -> text node</title>
    -> element node - title
  </head>
  <body>
    -> element node - body
  </body>
</html>

HTML DOM cung cấp API để duyệt và chỉnh sửa các node. Nó chứa các phương thứcthức như getElementById hay removeChild.

var content = document.getElementById("myContent");
content.parentNode.removeChild(item);

Vì vậy với lập trình viên web, khi nắm rõ kiến thức về DOM và khả năng thao tác với DOM cũng có nghĩa là có sức mạnh thay đổi mọi thứ của trang web. Tuy nhiên chúng ta gặp 2 vấn đề:

  • Thứ nhất, thực sự rất khó để quản lý. Tưởng tượng xem nếu phải chỉnh sửa một đoạn xử lý event mà không nắm được context thì bạn sẽ phải bơi thật sâu trong code để có thể xem nó đang làm gì. Tốn thời gian và rủi ro cao.
  • Thứ 2 là nó không hiệu quả. Có nhất thiết cứ phải đi tìm tất cả những gì liên quan không? Hay có thể thông minh hơn bằng cách chỉ tìm node nào cần cập nhật.

Ví thế ReactJs đến và cho chúng ta giải pháp, thay vì xử lý DOM Tree thủ công, chúng ta định nghĩa các component trông giống giống thế còn ReactJs sẽ thực hiện công việc ở tầng thấp hơn. Thực chất, công việc xử lý sẽ được HTML DOM API đảm nhiệm ở các tầng đó. Đây chính xác là cách mà Virtual DOM hoạt động.

Vậy VirualDOM là gì?

Virtual DOM không được tạo ra bởi React tuy nhiên nó được React sử dụng và cung cấp miễn phí.

Một cách tổng quát thì nó là một định dạng dữ liệu JavaScript nhẹ được dùng để thể hiện nội dung của DOM tại một thời điểm nhất định nào đó. Nó có tất cả các thuộc tính giống như DOM nhưng không có khả năng tương tác lên màn hình như DOM.

Bạn có thể tưởng tượng, ở DOM có thẻ div và các thẻ p ở trong, ReactJs sử dụng Virtual DOM bằng cách tạo ra các object React.div và React.p và khi tương tác, ta sẽ tương tác qua các object đó một cách nhanh chóng mà không phải đụng tới DOM hay DOM API của nó.

Đây là lí do tại saosao JSX của code ReactJs có thể trông như code HTML thuần tuý.

var CommentBox = React.createClass({
  render: function () {
    return <div className="text">Syntax like HTML</div>;
  },
});

Virtual DOM sử dụng key, ref mà ở DOM không có 😄 và Virtual DOM được tạo mới sau mỗi lần render lại.

Tuy nhiên, sự đặc biệt của Virtual DOM nằm ở Snapshots & Diffing Như giải thích ở trước đó, cách hoạt đông của Virtual DOM trong React đó là:

React lấy một snapshot của Virtual DOM (có thể hiểu là bản ghi trạng thái ngay lúc đó) ngay trước khi áp dụng bất kỳ bản cập nhật nào. Sau đó, nó sử dụng snapshot này để so sánh với một Virtual DOM được cập nhật trước khi thực hiện các thay đổi.

VirualDOM

Khi cập nhật được cấp cho Virtual DOM, quá trình tiếp theo React sử dụng thuật toán Diffing để so sánh và đối chiếu để biết được sự cập nhật được diễn ra ở đâu sau đó cập nhật nó mà bỏ qua những elements không liên quan.

Dom là gì

Chỉ những đối tượng này được cập nhật trên DOM và các thay đổi trên DOM vừa rồi sẽ làm cho màn hình thay đổi.

Virtual DOM

SyntheticEvent trong ReactJS là gì?


SyntheticEvent là một trình bao bọc trình duyệt chéo xung quanh sự kiện gốc của trình duyệt. API của nó giống như sự kiện gốc của trình duyệt, bao gồm stopPropagation()preventDefault(), ngoại trừ các sự kiện hoạt động giống nhau trên tất cả các trình duyệt.

Sự khác biệt giữa VirtualDOM và ShadowDOM là gì?


  • VirtualDOM là một khái niệm được thực hiện bởi các thư viện bằng JavaScript trên các API của trình duyệt.
  • ShadowDOM là một công nghệ trình duyệt được thiết kế chủ yếu cho các biến phạm vi và CSS trong các components web.

Các uncontrolled component là gì?


Uncontrolled component (Component không kiểm soát) là component lưu trữ trạng thái riêng của nó trong nội bộ và bạn truy vấn DOM bằng cách sử dụng tham chiếu để tìm giá trị hiện tại của nó khi bạn cần. Điều này giống HTML truyền thống hơn một chút.

Ví dụ: trong phần bên dưới component UserProfile, name input được truy cập bằng cách sử dụng ref như bên dưới,

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }
  handleSubmit(event) {
    alert("A name was submitted: " + this.input.current.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Trong hầu hết các trường hợp, bạn nên sử dụng các components được kiểm soát (Controlled component) để triển khai các form.

Tại sao ReactJS sử dụng className thay vì thuộc tính class?


class là một từ khóa trong javascript và tuy nhiên react sử dụng JSX - là một phần mở rộng của javascript. Và JSX sử dụng className thay vì class.

render() {
   return <span className="menu navigation-menu">Menu</span>
}

Tại sao nên dùng fragment thay vì div?


Dưới đây là lý do tại sao các fragment được đề xuất:

  • Fragment nhanh hơn một chút và sử dụng ít bộ nhớ hơn mà không cần tạo thêm một nút DOM. Điều này chỉ có lợi thực sự đối với những tree rất lớn và sâu.
  • Một số cơ chế CSS như Flexbox và CSS Grid có mối quan hệ cha-con đặc biệt, và việc thêm các div ở giữa khiến khó giữ được bố cục mong muốn.
  • Trình kiểm tra DOM, debug ít lộn xộn hơn

Ưu điểm của việc sử dụng React Hooks là gì?


Về cơ bản, Hook nói chung cho phép trích xuất và sử dụng lại logic state phổ biến trên nhiều component mà không có gánh nặng của các components bậc cao hơn hoặc các render props. Hook cho phép dễ dàng thao tác state của các functional component của chúng ta mà không cần chuyển đổi chúng thành các class component.

Hooks không hoạt động bên trong các class (vì chúng cho phép bạn sử dụng React mà không có class). Bằng cách sử dụng chúng, chúng ta hoàn toàn có thể tránh sử dụng các phương thức vòng đời, chẳng hạn như componentDidMount, componentDidUpdate, componentWillUnmount. Thay vào đó, chúng ta sẽ sử dụng các hook tích hợp sẵn như useEffect`.

Avatar Techmely Team
VIẾT BỞI

Techmely Team