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

Tại sao phải gọi super(props) trong React?


Một hàm tạo (constructor) lớp con không thể sử dụng this cho đến khi super() được gọi. Ngoài ra, các hàm tạo lớp ES2015 phải gọi super() nếu chúng là các lớp con. Lý do truyền props cho super() là để cho phép bạn truy cập this.props trong constructor. Ví dụ ta có một Class Component có thể được viết như sau:

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { busy: true };
  }
  // ...
}

Việc gọi super ở đây nhằm mục đích khởi tạo biến this từ Parent, vì Button được thừa kế từ React.Component. Sau khi gọi super, chúng ta sẽ truy cập được this một cách bình thường.

class Button extends React.Component {
  constructor(props) {
    // 🔴 Can’t use `this` yet
    super(props);
    // ✅ Now it’s okay though
    this.state = { busy true };
  }
  // ...
}

Bên dưới React.Component được định nghĩa như sau:

// Inside React
class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

Cho nên khi chúng ta gọi super(props)Button, cũng đồng nghĩa là đã khởi tạo this.props cho Button. Nhưng nếu bạn không pass props khi gọi super cho hàm Button như thế này:

class Button extends React.Component {
  constructor(props) {
    **super();//no props here**
    this.state = { busy: true };
  }
  // ...
}

Liệu bạn có thể truy cập được this.props bên trong component hay không? Câu trả lời là bạn có thể sử dụng this.props bình thường trong hàm render() và các method khác. Vì bên dưới React cài đặt như sau:

// Inside React
const instance = new YourComponent(props);
instance.props = props;

Cho nên sau khi chúng ta khởi tạo một instance thì React đã gán props cho nó. Và có thể như vậy sẽ làm cho chúng ta thấy khó hiểu? Tại sao không bỏ luôn props gọi gọi super()?

Một trong những lý do đó là để tạo nên sự thống nhất và minh bạch về code, chúng ta nên truyền props khi gọi super(props). Điều đó có nghĩa là bạn sẽ dùng props được trong cả hai trường hợp: trong constructor và trong những method khác của Button component.

// Inside React
class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

// Inside your code
class Button extends React.Component {
  constructor(props) {
    super(); // 😬 We forgot to pass props
    console.log(props);      // ✅ {}
    console.log(this.props); // 😬 undefined   }
  // ...
}

Nếu bạn sử dụng super(props) thì bạn sẽ có cách sử dụng như sau:

class Button extends React.Component {
  constructor(props) {
    super(props); // ✅ We passed props
    console.log(props); // ✅ {}
    console.log(this.props); // ✅ {}
  }
  // ...
}

So sánh điểm khác nhau của useRef và createRef gì?


  • Đối với createRef thì mỗi lần component gọi nó được render thì nó sẽ tạo ra một ref mới.
  • Còn đối với useRef thì trả về cùng một ref khi render, có nghĩa là giá trị nó không được tạo mới lại.

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

import { createRef } from "react";

const FocusInput = () => {
  const inputEl = createRef();

  const focusInput = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={focusInput}>Focus input</button>
    </div>
  );
};
const FocusInput = () => {
  const inputEl = React.useRef();

  const focusInput = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={focusInput}>Focus input</button>
    </>
  );
};

StrictMode trong React là gì?


StrictMode của React là một component trợ giúp sẽ giúp bạn viết các React component tốt hơn, bạn có thể bọc một tập hợp các component bằng <StrictMode /> và về cơ bản nó sẽ:

  • Xác minh rằng các component bên trong đang tuân theo một số phương pháp được đề xuất và cảnh báo bạn nếu không có trong bảng điều khiển.
  • Xác minh rằng các deprecated-method không được sử dụng và nếu chúng được sử dụng ở strict-mode, sẽ cảnh báo bạn trong bảng điều khiển.
  • Giúp bạn ngăn ngừa một số tác dụng phụ bằng cách xác định các nguy cơ tiềm ẩn.

Tại sao các class method cần phải được bind với một class instance?


Trong JavaScript, giá trị của this thay đổi tùy thuộc vào current-context. Trong các component method của class, các developer thường mong đợi this tham chiếu đến current-instance của một component, vì vậy cần phải liên kết các method này với instance. Thông thường, điều này được thực hiện trong constructor — ví dụ:

class SubmitButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFormSubmitted: false,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit() {
    this.setState({
      isFormSubmitted: true,
    });
  }
  render() {
    return <button onClick={this.handleSubmit}>Submit</button>;
  }
}

React Hooks là gì?


Hooks là một bổ sung mới chỉ có từ React 16.8. Chúng cho phép bạn sử dụng state và các tính năng khác của React mà không cần viết một class.

Với Hooks, bạn có thể trích xuất logic state từ một component để nó có thể được kiểm tra độc lập và sử dụng lại.

Hooks cho phép bạn sử dụng lại logic state mà không thay đổi cấu trúc phân cấp các component của bạn. Điều này giúp bạn dễ dàng chia sẻ Hooks giữa nhiều components hoặc với cộng đồng.

useState() trong React là gì?


Giải thích việc sử dụng useState (0) ở đây:

const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...
const setCount = () => {
   setCounter(count + 1);
   setMoreStuff(...);
   ...
};

useState là một trong những React hook tích hợp sẵn. useState(0) trả về một bộ giá trị trong đó tham số đầu tiên là state hiện tại của countersetCounter là phương thức cho phép chúng ta cập nhật state của counter.

Chúng ta có thể sử dụng phương thức setCounter để cập nhật state count ở bất kỳ đâu - Trong trường hợp này, chúng ta đang sử dụng nó bên trong hàm setCount nơi chúng ta có thể làm nhiều việc hơn; ý tưởng với hook là chúng ta có thể giữ cho mã của mình nhiều chức năng hơn và tránh các class component nếu không muốn / cần thiết.

Ba dấu chấm (...) này trong React để làm gì?


ví dụ

<Modal {...this.props} title='Modal heading' animation={false}>

Đó là Spread notation, nó đã được thêm vào ES2018 (spread cho array / iterable trước đó, ES2015). Ví dụ nếu this.props chứa a: 1b: 2, thì

<Modal {...this.props} title='Modal heading' animation={false}>

sẽ tương tự với:

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

Ký hiệu Spread không chỉ hữu ích cho trường hợp sử dụng trên mà còn để tạo một đối tượng mới với hầu hết (hoặc tất cả) thuộc tính của một object:

this.setState(prevState => {
  return { foo: { ...prevState.foo, a: "updated" } };
});

Mô tả các hoạt động của kiến trúc Flux?


Flux là một mẫu kiến ​​trúc thực thi luồng dữ liệu một chiều - mục đích cốt lõi của nó là kiểm soát dữ liệu để nhiều component có thể tương tác với dữ liệu đó mà không có nguy cơ ô nhiễm (without risking pollution).

Mẫu Flux là khái niệm chung; nó không dành riêng cho các ứng dụng React, cũng như không bắt buộc phải xây dựng một ứng dụng React. Tuy nhiên, Flux thường được các nhà phát triển React sử dụng vì các React component có tính chất khai báo - UI được hiển thị (View) chỉ đơn giản là một function của state (Store data).

Mô tả các hoạt động của kiến trúc Flux

Trong mẫu Flux, Store là cơ quan trung tâm cho tất cả dữ liệu; bất kỳ thay đổi nào đối với dữ liệu phải xảy ra trong Store. Các thay đổi đối với Store data sẽ được truyền đến View qua các event. Sau đó, View sẽ tự cập nhật dựa trên state mới của dữ liệu đã nhận.

Để yêu cầu thay đổi bất kỳ Store data nào, Actions có thể được kích hoạt. Các Action này được kiểm soát bởi một Central Dispatcher;

Các Action sẽ không xảy ra đồng thời, đảm bảo rằng Store chỉ thay đổi dữ liệu một lần cho mỗi Action.

Luồng một chiều nghiêm ngặt của mẫu Flux này thực thi tính ổn định của dữ liệu, giảm các lỗi runtime liên quan đến dữ liệu trong một ứng dụng.

mapStateToPropsmapDispatchToProps trong redux là gì?


Các hàm thường thấy trong các ứng dụng Redux cung cấp các hàm cho Redux về cách ánh xạ state / dispatch function tới một bộ props.

Tại sao bạn cần liên kết các Event handler với "this"?


Bạn cần phải làm điều này để this tham chiếu đến Object instance của React component class trong callback code của bạn, nếu không thì this sẽ là undefined. Một giải pháp thay thế là sử dụng các arrow function trong event handler của bạn và ‘this' sẽ được khởi tạo như mong đợi.

Avatar Techmely Team
VIẾT BỞI

Techmely Team