React native redux thunk tại sao

• React.memo(): Điều này ngăn việc re-render không cần thiết của function component.
• PureComponent: Điều này ngăn việc re-render không cần thiết của class component.

Cả hai công cụ này đều dựa trên sự so sánh nông (shallow comparison) của các props được truyền vào component — nếu props không thay đổi, thì component sẽ không re-render. Mặc dù cả hai công cụ đều rất hữu ích, nhưng so sánh nông sẽ ảnh hưởng về hiệu suất, vì vậy cả hai đều có thể có tác động tiêu cực đến hiệu suất nếu sử dụng không đúng cách.

Một cách tối ưu hơn đó là chúng ta sử dụng React Profiler, hiệu suất có thể được đo lường trước và sau khi sử dụng các công cụ này để đảm bảo rằng hiệu suất thực sự được cải thiện bằng cách thực hiện một thay đổi nhất định.

React có re-render tất cả các components và sub components mỗi khi setState được gọi không?

Mặc định là có. Có một phương thức boolean shouldComponentUpdate (object nextProps, object nextState), mỗi component có phương thức này và nó có trách nhiệm xác định "nên cập nhật component (chạy hàm render)?" mỗi khi bạn thay đổi state hoặc truyền các props mới từ component cha.

Bạn có thể viết triển khai phương thức shouldComponentUpdate của riêng mình cho component của bạn, nhưng mặc định luôn trả về true - nghĩa là luôn chạy lại hàm render.

Tại sao chúng ta có cả 2 loại input controlled input và uncontrolled input?

Người phỏng vấn muốn thấy ở đây là một sự hiểu biết vững chắc về khái niệm React cơ bản. Một controlled input nhận 1 prop làm giá trị hiện tại của nó, và 1 prop là 1 callback để thay đổi giá trị đó, nó là một React way

<input type="text" value={value} onChange={this.handleChange} />

Một uncontrolled input lưu giá trị của nó bên trong, sử dụng DOM API. Ví dụ dưới đây chúng ta không dùng value và onChange, mà dùng ref():

<input type="text" ref={this.textInput} />

Và chúng ta có thể truy xuất giá trị của nó như sau:

this.textInput.current.value;

Người phỏng vấn muốn được nghe nhiều thứ hơn có bất kì props nào để sử dụng các uncontrolled component không, có sự khác biệt nào về hiệu suất không? Với cách dùng controlled input thì dữ liệu của bạn (state) và UI (inputs) luôn đồng bộ với nhau, nghĩa là bạn phải cập nhật state của component, điều đó sẽ kích hoạt tiến trình React reconciliation. Còn với cách dùng uncontrolled input thì không cần điều đó, bạn chỉ giữ giá trị input bên trong phần tử DOM của input đó.

Tại sao chúng ta cần 1 thuộc tính "key"?

Người phỏng vấn muốn nghe một vài thông tin về cách React hoạt động bên trong nó. Các thuật toán Diffing cổ điển với độ phức tạp thời gian O(n³) có thể được dùng để tạo 1 cây các phần tử React, có nghĩa là để hiển thị 1000 phần tử sẽ cần 1 tỷ phép so sánh. Thay vào đó, React thực hiện 1 thuật toán heuristic O(n) với giả định rằng các nhà phát triển có thể gợi ý tại các phần tử con có thể được stable qua các hiển thị khác nhau với thuộc tính key.

Làm sao để ngăn các component re-render?

Người phỏng vấn muốn thấy nhiều kiến thức hơn về Reactjs và cách bạn quan tâm về hiệu suất. Đây là một trong các câu hỏi thường gặp nhất. Đáng để nhắc đến là:

• shouldComponentUpdate() - Mặc định return về true ( return true là re-render và ngược lại), bạn có thể thay đổi giá trị return nếu bạn biết props nào sẽ kích hoạt update.
• PureComponents - Sự khác biệt giữa React.Component và React.PureComponent là React.Component không tự thực hiện shouldComponentUpdate nhưng React.PureComponent sẽ tự thực hiện nó với 1 phép so sánh giữa prop với state.
• React.memo - Tương tự như PureComponent nhưng nó được ứng dụng cho functional component.

So sánh redux thunk và redux saga?

Reselect là gì và nó hoạt động như thế nào?

Reselect là một selector library (dành cho Redux) sử dụng khái niệm ghi nhớ. Ban đầu nó được viết để tính toán dữ liệu từ ​​state của ứng dụng giống redux, nhưng nó không thể bị ràng buộc với bất kỳ kiến ​​trúc hoặc thư viện nào.

Reselect giữ một bản sao của các inputs / outputs cuối cùng của lần gọi cuối cùng và chỉ tính toán lại kết quả nếu một trong các inputs thay đổi. Nếu các inputs giống nhau được cung cấp hai lần liên tiếp, Reselect trả về output đã lưu trong bộ nhớ cache. Đó là khả năng ghi nhớ và bộ nhớ cache hoàn toàn có thể tùy chỉnh.

Làm thế nào để sử dụng Polymer trong ReactJS?

Bạn cần làm theo các bước dưới đây:

Bước 1: tạo một Polymer element.

<link rel="import" href="../../bower_components/polymer/polymer.html">
Polymer({
   is: 'calender-element',
   ready: function(){
      this.textContent = "I am a calender";
   }
});

Bước 2: Import nó vào trang html, ví dụ: import nó vào index.html của ứng dụng React của bạn.

<link rel="import" href="./src/polymer-components/calender-element.html">

Bước 3: Sử dụng element đó trong tệp jsx.

"use strict";
import React from "react";
class MyComponent extends React.Component {
  render() {
    return <calender-element></calender-element>;
  }
}
export default MyComponent;

Làm thế nào để tránh việc cần phải binding trong React?

Có một số cách tiếp cận phổ biến được sử dụng để tránh binding các phương thức trong React:

1. Định nghĩa Event handler của bạn dưới dạng một Arrow function

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

1. Định nghĩa Event handler của bạn dưới dạng một Arrow function được gán cho một Class field

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

1. Sử dụng một Function component với Hooks

const SubmitButton = () => {
  const [isFormSubmitted, setIsFormSubmitted] = useState(false);
  return (
    <button
      onClick={() => {
        setIsFormSubmitted(true);
      }}
    >
      Submit
    </button>
  );
};

Sự khác biệt chính về kiến trúc giữa JavaScript library như React và JavaScript framework như Angular là gì?

React cho phép các nhà phát triển render một user interface. Để tạo một ứng dụng front-end đầy đủ, các nhà phát triển cần các phần khác, chẳng hạn như các công cụ quản lý state như Redux.

Giống như React, Angular cho phép các nhà phát triển hiển thị user interface, nhưng nó là một framework "bao gồm pin" bao gồm các giải pháp theo quy định, được thiết kế cho các yêu cầu chung như quản lý state.

Mặc dù có nhiều cân nhắc khác khi so sánh cụ thể React và Angular, nhưng sự khác biệt chính về kiến ​​trúc này là:

• Việc sử dụng một thư viện như React có thể mang lại cho dự án có một khả năng nhiều hơn để phát triển các phần của hệ thống — một lần nữa, ví dụ: quản lý state — theo thời gian, khi các giải pháp mới được tạo ra bởi cộng đồng nguồn mở.
• Sử dụng một framework như Angular có thể giúp các nhà phát triển bắt đầu dễ dàng hơn và cũng có thể đơn giản hóa việc bảo trì.

Làm thế nào để việc render của React hoạt động chính xác khi chúng ta gọi setState?

Có hai bước của thứ mà chúng ta gọi là render:

• Virtual DOM render: khi phương thức render được gọi, nó sẽ trả về một cấu trúc Virtual DOM mới của component. Phương thức render này luôn được gọi khi bạn gọi setState(), vì shouldComponentUpdate luôn trả về true theo mặc định. Vì vậy, theo mặc định, không có tối ưu hóa ở đây trong React.
• Native DOM render: react chỉ thay đổi các RealDOM node trong trình duyệt của bạn ít nhất có thể nếu chúng được thay đổi trong Virtual DOM - đây là tính năng tuyệt vời của React giúp tối ưu hóa việc thay đổi RealDOM và làm cho React nhanh.