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

So sánh Flux với MVC?


Các mẫu MVC truyền thống đã hoạt động tốt trong việc tách các mối quan tâm về dữ liệu (Model), UI (View) và logic (Controller) - nhưng kiến ​​trúc MVC thường gặp phải hai vấn đề chính:

  • Luồng dữ liệu được xác định kém: các cập nhật xếp tầng xảy ra trên các chế độ View thường dẫn đến một mạng lưới sự kiện rối rắm rất khó để debug.
  • Thiếu tính toàn vẹn của dữ liệu: model data có thể bị thay đổi từ bất kỳ đâu, mang lại kết quả không thể đoán trước trên UI.

Với mô hình Flux, UI phức tạp không còn bị cập nhật theo tầng; bất kỳ React component nào đã có sẽ có thể xây dựng lại state của nó dựa trên dữ liệu do Store cung cấp. Mẫu Flux cũng thực thi tính toàn vẹn của dữ liệu bằng cách hạn chế quyền truy cập trực tiếp vào dữ liệu được chia sẻ.

Làm thế nào để truy cập vào nút DOM trong một React component?


ReactDOM cung cấp cho bạn phương thức ReactDOM.findDOMNode(param) để tìm đối tượng Node tương ứng với tham số của phương thức.

Bên trong Class Component nếu bạn gọi phương thức ReactDOM.findDOMNode(this), nó sẽ trả về cho bạn nút gốc (Root Node) của mô hình DOM. Ví dụ:

// File: findDOMNode-example.jsx

class Fruits extends React.Component {
  doFind() {
    // Find root Node of this Component
    var node = ReactDOM.findDOMNode(this);
    node.style.border = "1px solid red";
  }
  render() {
    return (
      <ul>
        <li>Apple</li>
        <li>Apricot</li>
        <li>Banana</li>
        <li>
          <button onClick={() => this.doFind()}>Find Root Node</button>
        </li>
      </ul>
    );
  }
}

// Render
ReactDOM.render(<Fruits />, document.getElementById("fruits1"));
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>ReactJS findDOMNode()</title>
    <script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <style>
      #fruits1 {
        border: 1px solid blue;
        padding: 5px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <h3>Example: findDOMNode(this)</h3>
    <a href="">Reset</a>

    <div id="fruits1"></div>

    <script src="findDOMNode-example.jsx" type="text/babel"></script>
  </body>
</html>

Kết quả:

findDOMNode trong Reactjs

Khi nào nên sử dụng forceUpdate trong một React component?


Thỉnh thoảng bạn muốn cập nhập lại Component một cách thủ công, điều này có thể đạt được bằng cách sử dụng phương thức forceUpdate(). Đây là một phương thức của lớp React.Component, vì vậy các lớp con của React.Component sẽ được thừa kế phương thức này.

Ví dụ:

// file forceUpdate-example.jsx
class Random extends React.Component {
  constructor(props) {
    super(props);
  }

  newRandomValue(event) {
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <button onClick={event => this.newRandomValue(event)}>Random</button>
        <div>Random Value: {Math.random()}</div>
      </div>
    );
  }
}

// Render
ReactDOM.render(<Random />, document.getElementById("random1"));
<!-- File: forceUpdate-example.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>ReactJS forceUpdate()</title>
    <script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <style>
      .search-box {
        border: 1px solid #cbbfab;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h1>forceUpdate() example:</h1>

    <div id="random1"></div>

    <script src="forceUpdate-example.jsx" type="text/babel"></script>
  </body>
</html>

Kết quả:

forceUpdate

Làm thế nào để áp dụng validation trên Props trong ReactJS?


Khi ứng dụng đang chạy ở development mode, React sẽ tự động kiểm tra tất cả các props mà chúng ta thiết lập trên component để đảm bảo chúng phải đúng và đúng kiểu dữ liệu. Đối với trường hợp loại dữ liệu không chính xác, nó sẽ tạo ra các thông báo cảnh báo trong console dành cho development mode và nó bị tắt ở production mode để không bị ảnh hưởng hiệu suất. Các prop bắt buộc được xác định bằng isRequired.

Dưới đây là tập hợp các loại props được xác định trước:

  • React.PropTypes.string
  • React.PropTypes.number
  • React.PropTypes.func
  • React.PropTypes.node
  • React.PropTypes.bool

Ví dụ chúng ta định nghĩa propTypes cho User component như bên dưới:

import PropTypes from 'prop-types';
class User extends React.Component {
  render() {
    return (
    <h1>Welcome, {this.props.name}</h1>
    <h2>Age, {this.props.age}
    );
  }
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired
};

React Fiber là gì?


Chúng ta sẽ thảo luận về cốt lõi của kiến trúc React Fiber. Fiber khá trừu tượng so với những thứ mà những nhà phát triển ứng dụng thường nghĩ đến. Nếu bạn cảm thấy thất vọng về những nỗ lực của mình để hiểu Fiber, đừng cảm thấy chán nản. Hãy tiếp tục cố gắng và cuối cùng cũng sẽ thu lại được gì đó có ý nghĩa. Chúng tôi đã xác định mục tiêu chính của Fiber là cho phép React tận dụng lợi ích từ việc lập kế hoạch (scheduling). Cụ thể chúng ta cần: - Tạm dừng công việc và quay lại thực hiện sau. - Gán ưu tiên cho những loại công việc khác nhau. - tái sử dụng lại những công việc đã hoàn thành. - bỏ qua những công việc mà không cần thiết nữa.

React Fiber là gì

Để làm được những điều trên, trước tiên ta cần một cách để chia nhỏ 1 vông việc thành các đơn vị nhỏ hơn. Theo một cách nghĩa nào đó, một Fiber thể hiện một đơn vị công việc. Quay trở lại với ý tưởng trong React Components as functions of data, thường được biểu diễn như sau v = f(d)

Render ra một ứng dụng React như một lời gọi hàm mà bên trong chứa những lời gọi đến những hàm khác, và tiếp tục như thế. Điểm tương đồng này là hữu dụng khi ta nghĩ về Fibers. Cách mà các máy tính điển hình truy vết lại một thực thi của chương trình là sử dụng Call Stack. Khi một hàm được thực thi, một Stack Frame được thêm vào hàng đợi, Stack Frame đó đại diện cho công việc được thực thi bởi hàm đó.

Khi làm việc với các giao diện người dùng, vấn đề ở đây là có quá nhiều công việc được thực thi trong cùng một lần, nó có thể khiến cho Animation bị giảm FPS và trông rất tệ. thêm vào đó, một vài công việc có thể trở nên không cần thiết nếu nó bị thay thế bởi các cập nhật gần hơn. Đây là nơi việc so sánh các thành phần UI và hàm bị phá vỡ, bởi vì thông thường các thành phần có nhiều mối liên hệ cụ thể hơn là functions.

Những browsers mới hơn (và React Native) cài đạt các API nhằm giúp chỉ ra chính xác vấn đề: requestIdleCallback lập lịch một function có độ ưu tiên thấp được gọi trong giai đoạn nhàn rỗi, và requestAnimationFrame lập lịch cho những function có độ ưu tiên cao có thể gọi trong khung hình kế tiếp. Vấn đề là, để sử dụng những API đó, bạn cần một cách để chia công việc render thành các đơn vị nhỏ. Nếu bạn chỉ phụ thuộc vào Call Stack, nó sẽ làm việc cho đến khi stack trống. Sẽ tốt hơn nếu chúng ta có thể chỉnh sửa hành vi của Call Stack để tối ưu cho việc Render ra các UI? Sễ tốt hơn nếu chúng ta có thể ngắt quãng Call Stack theo ý mình và điều khiển các Stack Frame bằng tay. Đó chính là mục tiêu của React Fiber. Fiber là một tái cấu trúc của Stack, chuyên biệt cho các components của React. Bạn có thể hiểu một Fiber như là một Stack Frame ảo. Lợi ích của việc tái cấu trúc Stack là bạn có thể lưu các Stack Frame trong bộ nhowsvaf triển khai chúng cho dù bạn không muốn. Điều này là cần thiết cho việc đạt được mục tiêu cho việc lập lịch.

Bên cạnh việc lập lịch, xử lý các Stack Frame bằng tay mở ra tiềm năng cho các tính năng như Concurrency và Error Boundaries. Chúng ta sẽ bàn những vấn đề đó ở tương lai khi React Fiber chính thức được đưa vào sử dụng.

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


  • Flow là một công cụ phân tích tĩnh (trình kiểm tra tĩnh – static checker) sử dụng một tập hợp siêu ngôn ngữ, cho phép bạn thêm chú thích kiểu vào tất cả code của mình và bắt toàn bộ bug của class tại thời điểm biên dịch.
  • PropTypes là một trình kiểm tra kiểu cơ bản (trình kiểm tra thời gian chạy – runtime checker) có trên React. Nó không thể kiểm tra bất cứ điều gì khác ngoài các loại dữ liệu của props được truyền vào một component nhất định. Nếu bạn muốn có trình kiểm tra kiểu dữ liệu linh hoạt hơn cho toàn bộ dự án của mình thì Flow / TypeScript là những lựa chọn thích hợp.

Làm thế nào để tạo Props Proxy cho HOC component?


Bạn có thể thêm/chỉnh sửa props được truyền vào component dưới dạng Props proxy như bên dưới:

function HOC(WrappedComponent) {
  return class Test extends Component {
    render() {
      const newProps = {
        title: "New Header",
        footer: false,
        showFeatureX: false,
        showFeatureY: true,
      };
      return <WrappedComponent {...this.props} {...newProps} />;
    }
  };
}

Phương thức nào được ưu tiên hơn trong callback trong 2 tùy chọn refs và findDOMNode()?


Ưu tiên sử dụng các refs hơn findDOMNode()findDOMNode() ngăn cản một số cải tiến nhất định trong React trong tương lai.

Cách tiếp cận kế thừa của việc sử dụng findDOMNode()

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this).scrollIntoView();
  }
  render() {
    return <div />;
  }
}

Cách tiếp cận được đề xuất là:

class MyComponent extends Component {
  componentDidMount() {
    this.node.scrollIntoView();
  }
  render() {
    return <div ref={node => (this.node = node)} />;
  }
}

Sự khác biệt giữa việc sử dụng constructor và getInitialState trong React là gì?


Sự khác biệt giữa constructorgetInitialState là sự khác biệt giữa chính ES6 và ES5. Bạn nên khởi tạo state trong constructor khi sử dụng các lớp ES6 và phương thức getInitialState khi sử dụng React.createClass.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      /* initial state */
    };
  }
}

tương đương với

var MyComponent = React.createClass({
  getInitialState() {
    return {
      /* initial state */
    };
  },
});

Khi nào cần truyền props cho super()?


Một lý do duy nhất khi người ta cần truyền props cho super() là khi bạn muốn truy cập this.props trong constructor:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);
    // -> { icon: 'home', … }
  }
}

Trường hợp nếu bạn không truyền:

class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props);
    // -> undefined
    // Props parameter is still available
    console.log(props);
    // -> { icon: 'home', … }
  }
  render() {
    // No difference outside constructor
    console.log(this.props);
    // -> { icon: 'home', … }
  }
}

Lưu ý rằng việc truyền hay không truyền các props cho super không ảnh hưởng đến việc sử dụng this.props bên ngoài constructor sau này.

Làm thế nào để thêm các attributes vào các React components một cách có điều kiện?


Vấn đề:

Có cách nào để chỉ thêm các attributes vào một React component nếu một điều kiện nhất định được đáp ứng không?

Giải pháp:

Đối với một số attributes nhất định, React đủ thông minh để bỏ qua attribute đó nếu giá trị bạn truyền cho nó không là true. Ví dụ:

var InputComponent = React.createClass({
  render: function () {
    var required = true;
    var disabled = false;
    return <input type="text" disabled={disabled} required={required} />;
  },
});

sẽ cho kết quả:

<input type="text" required>

Một cách tiếp cận khả thi khác là:

var condition = true;
var component = <div value="foo" {...(condition && { disabled: true })} />;
Avatar Techmely Team
VIẾT BỞI

Techmely Team