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

Điều gì xảy ra khi bạn gọi setState


Điều đầu tiên React sẽ làm khi bạn gọi setState() là merge tham số (là object bạn đã truyền vào setState()) vào state hiện tại của component. Điều này sẽ bắt đầu một quá trình được gọi là reconciliation. Mục tiêu cuối cùng của reconciliation là cập nhật UI dựa trên state mới này theo cách hiệu quả nhất có thể.

Điều gì xảy ra khi bạn gọi setState

Để làm điều này, React sẽ xây dựng một tree mới gồm các React element (bạn có thể coi đây là một object đại diện cho UI của bạn). Khi nó có tree này, để tìm ra UI sẽ thay đổi như thế nào dựa theo state mới, React sẽ so sánh tree mới này với tree trước đó.

Bằng cách này, React sẽ biết chính xác những thay đổi đã xảy ra và bằng cách biết chính xác những gì đã thay đổi, nó sẽ chỉ cập nhật trên DOM những thay đổi đó.

Element trong React là gì?


Element là một đối tượng đơn giản mô tả những gì bạn muốn hiển thị trên màn hình dưới dạng các nút DOM hoặc các thành phần khác. Các element có thể chứa các element khác trong props của chúng. Tạo một React element rất đơn giản và ít tốn chi phí. Khi một element được tạo, nó không bao giờ bị thay đổi. Ví dụ:

const element = React.createElement("div", { id: "login-btn" }, "Login");

Hàm createElement() ở trên trả về dưới dạng object như bên dưới

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn',
  },
};

Và cuối cùng, nó hiển thị tới DOM bằng cách sử dụng ReactDOM.render như bên dưới,

<div id="login-btn">Login</div>

Trong khi một component có thể được khai báo theo nhiều cách khác nhau. Nó có thể là một class có phương thức render().

Ngoài ra, trong những trường hợp đơn giản, nó có thể được định nghĩa như một function. Trong cả hai trường hợp, nó lấy props làm đầu vào và trả ra một Element tree.

function Button({ onLogin }) {
  return React.createElement(
    "div",
    { id: "login-btn", onClick: onLogin },
    "Login",
  );
}

Component trong React là gì?


Components giúp phân chia các UI (giao diện người dùng) thành các phân nhỏ để dễ dàng quản lý và tái sử dụng. Giả sử mình có một website gồm nhiều phần bố cục khác nhau và mình muốn chia nhỏ các phần ra để dễ quản lý.

Component trong React là gì?

Ở hình ảnh bên trên chúng ta có thể chia nó thành 2 components, đó là phần "khóa học nổi bật" và "xu hướng kiếm tiền". Mỗi components sẽ đảm nhiệm phần hiển thị khác nhau. Khi bạn muốn làm một trang hoàn chỉnh chỉ ghép các components này lại với nhau.

Trong mỗi React App đều có thể chứa rất nhiều components, mỗi components trong đó thường nhận về các props và trả về React elements từ đó hiển thị ra cho UI. Components trong React thường được viết theo 2 loại chính đó là functional component và class components. Bên dưới là một functional components:

const App = () => <h1>Hello Freetuts.net</h1>;

Components bên trên được viết theo cú pháp ES6, không nhận bất cứ props nào và trả về một react element.

Key là gì khi hiển thị một danh sách và mục đích của nó là gì?


Key giúp React xác định những item nào đã thay đổi, được thêm vào hoặc bị xóa. Các key nên được cấp cho các phần tử bên trong mảng để cung cấp cho các phần tử một định danh ổn định.

Cách tốt nhất để chọn một key là sử dụng một chuỗi duy nhất để xác định một item giữa các item trong danh sách.

render () {
  return (
    <ul>
      {this.state.todoItems.map(({ task, uid }) => {
          return <li key={uid}>{task}</li>;
      })}
    </ul>
  );
}

Thông thường, bạn sẽ sử dụng ID từ dữ liệu của mình làm key. Khi bạn không có ID ổn định cho các item được hiển thị, bạn không nên sử dụng index làm key bởi vì nếu key là index thì khi ta thay đổi vị trí của các phần tử trong mảng (xóa, thêm...), index cũng sẽ thay đổi và lại xảy ra vấn đề sẽ render lại các phần không cần thiết.

Làm thế nào để bạn chặn callback của 1 event trong React?


Bạn có thể gọi e.preventDefault(); với e là tham số được truyền vào callback.

React khác với AngularJS (1.x) như thế nào?


AngularJS (1.x) tiếp cận việc xây dựng một ứng dụng bằng cách mở rộng HTML markup và đưa vào các cấu trúc khác nhau (ví dụ: Directives, Controllers, Services) trong thời gian chạy (runtime). Do đó, AngularJS rất kiên định về kiến ​​trúc trong ứng dụng của bạn (khó thay đổi kiến trúc) - những điều trừu tượng này chắc chắn hữu ích trong một số trường hợp, nhưng chúng sẽ phải tốn nhiều chi phí hơn.

Ngược lại, React tập trung hoàn toàn vào việc tạo ra các component và có rất ít ý kiến ​​(nếu có) về kiến ​​trúc của ứng dụng. Điều này cho phép nhà phát triển có thể linh hoạt một cách đáng kinh ngạc trong việc lựa chọn kiến ​​trúc mà họ cho là "tốt nhất" - mặc dù nó cũng đặt trách nhiệm chọn (hoặc xây dựng) các phần đó cho nhà phát triển.

Làm cách nào bạn ngăn một component hiển thị trong React?


Trả về null từ hàm render().

render () {
  return null
}

Mô tả cách xử lý các event trong React?


Để giải quyết các vấn đề về khả năng tương thích giữa các trình duyệt, Event handler của bạn trong React sẽ được chuyển qua các SyntheticEvent, là trình bao bọc cross-browser của React xung quanh sự kiện gốc (native event) của trình duyệt. Các synthetic event này có interface giống với các sự kiện gốc mà bạn đã từng sử dụng, ngoại trừ chúng hoạt động giống nhau trên tất cả các trình duyệt.

Có chút thú vị là React không thực sự đính kèm các sự kiện vào chính các nút con. React sẽ lắng nghe tất cả các sự kiện ở cấp cao nhất bằng cách sử dụng một event listener duy nhất. Điều này tốt cho hiệu suất và nó cũng có nghĩa là React không cần phải lo lắng về việc theo dõi các event listener khi cập nhật DOM.

Tại sao nên sử dụng Redux?


Chúng ta có hoàn toàn có thể build một project hoàn chỉnh với chỉ React. Nhưng khi project của bạn ngày càng lớn, với ngày càng nhiều component, việc chỉ sử dụng duy nhất React để quản lý state sẽ trở nên rất phức tạp.

Tại sao nên sử dụng Redux

Đây chính là lúc Redux toả sáng; nó làm giảm bớt sự phức tạp trong các ứng dụng lớn như vậy. Nếu bạn đã hiểu qua về React thị bạn sẽ biết rằng luồng dữ liệu của React bắt đầu từ các component cha truyền các props cho các component con. Trong một ứng dụng khổng lồ với cả tấn dữ liệu phải chạy qua rất nhiều component thông qua state và props, thì tin mình đi, code của bạn sẽ trở nên cực kì khó đọc và khó cải thiện, chưa kể là tiềm ẩn nhiều bug ko đáng có.

Trong React (và các framework khác nữa), việc giao tiếp giữa 2 component không có quan hệ cha-con thường không được khuyến khích sử dụng. React có lời khuyên rằng nếu bắt buộc phải làm việc này, chúng ta có thể build một hệ thống tuân theo pattern Flux - đây chính là lúc Redux thể hiện.

Với Redux, chúng ta có một store nơi chứa tất cả các state. Nếu một state thay đổi ở component A, nó sẽ được phản ánh lên store, và những component cần biết đến sự thay đổi state này ở component A có thể subcribe lên store.

cách hoạt động của redux

Component A gửi thay đổi state lên store, nếu component B và C cần state này thì chúng có thể lấy trực tiếp từ store.

Ngoài ra còn 3 lợi ích khác mà chúng ta nên dùng redux:

  • Output đồng nhất, dễ đoán: với chỉ một "Source of Truth" (store), chúng ta sẽ gặp ít vấn đề trong việc sync state giữa các component với nhau hơn.
  • Khả năng maintain: Redux có bộ guideline hết sức chặt chẽ về cách tổ chức code, action làm gì, reducer làm việc gì,... Mọi thứ đều cụ thể và rõ ràng nên việc maintain sẽ dễ dàng hơn nhiều.
  • Khả năng scale: Như đã nói ở trên, với việc tổ chức code nghiêm ngặt và rõ ràng, việc scale project sẽ trở nên dễ dàng hơn nhiều.

Flux là gì?


Flux là một kiến thức quen thuộc được thêm bởi Facebook để sử dụng và làm việc với React. Flux không được xem là một Framework hay thư viện mà nó chỉ đơn giản là một kiểu kiến trúc hỗ trợ thêm cho React. Đồng thời, nó xây dựng các ý tưởng về luồng dữ liệu một chiều (tên tiếng anh là Unidirectional Data Flow).

Flux là gì?

Một kiến trúc Flux điển hình nhất là sự kết hợp giữa thư viện Dispatcher (được viết từ Facebook) cùng với Module Nodejs EventEmitter để có thể tạo nên một hệ thống sự kiện giúp quản lý các trạng thái hoạt động của ứng dụng.

Tại sao cần viết hoa các component?


Nên viết hoa các component bởi vì các component không phải là phần tử DOM mà chúng là các hàm tạo. Nếu chúng không được viết hoa, chúng có thể gây ra nhiều vấn đề khác nhau và có thể khiến các developers nhầm lẫn với một số yếu tố.

Avatar Techmely Team
VIẾT BỞI

Techmely Team