Lý thuyết về React

Question 1

Keeping UI in Sync with data

Answer 1

Piece of data = piece of state
Giữ cho UI và Data đồng bộ là hâu như không thể với vanilla JavaScript

Question 2

What is React ?

Answer 2

Là một công cụ khai báo , cực kỳ phổ biến , dựa tên Component , State- Driven JavaScript Library để xây dựng giao diện người dùng
- We describe how components look like and how they work using a declarative syntax called JSX.
Declarative : nói cho React các thành phần ( Component ) trông giống như dựa trên trạng thái hiện tại ( Current state )
- Chúng ta sẽ không bao giờ phải làm việc với DOM

State - driven

• Mỗi khi trạng thái thay đổi , chúng tôi cập nhật trạng thái theo cách thủ công trong ứng dụng của mình
• ## React sẽ tự động Re- render lại UI Interface để reflect last state

Question 3

What is JSX? Rules of JSX

Answer 3

JSX là một cú pháp khai báo ( Declarative Syntax ) mà chúng tôi sử dụng để mô tả các thành phần ( components ) trông như thế nào và cách chúng hoạt động dựa trên dữ liệu là logic
- JSX là phần mở rộng của JavaScript

Rules of JSX :
Trong JSX bạn không thể sử dụng những thứ như câu lệnh If, Else , vòng lặp For
!!! Một phần của JSX tạo ra một biểu thức JavaScript
Một phần của JSX chỉ có thể có một phần tử Root

Question 4

Separation of concerns ?

Answer 4

Các tràng ngày càng có nhiều tính năng tương tác hơn , chúng trở thành ứng dụng một trang
JavaScript ngày càng phụ trách HTML nhiều hơn
Vì vậy, thực tế là logic và giao diện người dùng được kết hợp chặt chẽ
Each component is concerned with one piece of the UI

Question 5

Dữ liệu là một thành phần được tạo ra từ ____ và ____

Answer 5

Props và State

Question 6

Sự khác nhau giưa State và Props là gì ?

Answer 6

State là trạng thái dữ liệu nội bộ , được sở hữu bởi Component mà nó được khai báo
Update state thì sẽ re-render lại components
—————————
Props là dữ liệu thuộc sở hữu của Parent Components
Chúng chỉ read-only bởi components đang nhận chúng
Khi components con nhận được props mới thì cũng re-render
Props cung cấp cho Components Parent khả năng cấu hình Components Children
Kết Luận :
bất cứ khi nào a pice of state được thông qua như Props , khi state cập nhật thì cả hai thành phần đều được re-render

Question 7

Hầu hết các Components của bạn sẽ tự nhiên rơi vào một trong ba loại thành phần

Answer 7

1. Stateless / presentational components : Thành phần không trạng thái , thông thường chúng là các thành phần nhận Props và sau đó cần trình bày dữ liệu
2. Stateful components : Là thành phần ( Components ) có trạng thái ( State )
3. Structural components : Dưới dạng Page , Layouts , kết quả của kết hợp nhiều thành phần nhỏ lại với nhau

Question 8

Components Composition

Answer 8

Là kỹ thuật kết hợp các thành phần khác nhau bằng cách sử dụng Props Children hoặc bằng cách xác định các Props Components .
Vì các Components không cần biết trước về Children , cho phép chúng ta để lại những khoảng trống

Question 9

So sánh sự khác nhau giữa Component , Instance và Element

Answer 9

Component : là những gì mà chúng tôi viết để mô tả một phần của giao diện người dùng . Chỉ là một hàm JavaScript thông thường nhưng sẽ trả về các React Element ( Element Tree )
Mỗi Components có dữ liệu riêng ( Logic , JavScripts )
Instance : được tạo khi chúng tôi sử dụng Components
Chúng ta có thể nói rằng Instance giống như thực tế biểu hiện vật chất của Component Living
- Có vòng đời riêng của nó
- Khi React thực thi đoạn mã trong mỗi Instance , mỗi trong số chúng sẽ trả về một hoặc nhiều phần tử React
React Elements :
- Về cơ bản là kết quả về việc sử dụng một Component trong mã của chúng tôi .
- Cuối cùng sẽ được chuyển đổi thành các DOM Element và được trình duyệt vẽ lên màn hình

Question 10

Làm như thế nào để Components hiện thị trên màn hình

Answer 10

Trong React việc rendering không phải là về việc cập nhật Dom hoặc hiện thị các Element trên màn hình
Việc hiện thị chỉ diễn ra bên trong React và do đó nó không tạo ra bất kỳ thay đổi trực quan nào

Question 11

Các render được Triggered

Answer 11

Có hai cách :
1.Ngay lần đầu tiên ứng dụng chạy : Initial render of the application
2. State is updated trong một hoặc nhiều Components Instances ( re-render )

=> Quá trình render thực sự được triggered cho toàn bộ ứng dụng không chỉ cho một thành phần duy nhất .

Question 12

The Render Phase

Answer 12

Khi bắt đầu Render Phase , React sẽ đi qua toàn bộ Component Tree
- Gọi các hàm Component tương ứng
- Tạo ra các React Element
- Tạo ra Virtual DOM ( React Element Tree )
DOM Ảo chỉ là một cái cây của tất cả React Element được tạo ra từ tất cả Component Instance
- tạo ra một cây nhanh chóng và cheap
- cuối cùng DOM ảo chỉ là một đối tượng JavaScript
————————–
Bất cứ khi nào React render một Component , renders đó sẽ khiến tất cả Component con của nó cũng được kết xuất lại
**Điều đó không có nghĩa toàn bộ DOM được cập nhật
**Nó chỉ là một DOM ảo được tạo lại
————
DOM ảo được tạo sau khi cập nhật State sẽ được chiều chỉnh với cái gọi là Current Fiber Tree ( Tồn tại trước khi State cập nhật )
Tiếp theo đến việc *Reconciliation *, kết quả của việc này sẽ được một Fiber tree được cập nhật , và cuối cùng sẽ ghi vào DOM

Question 13

Reconciliation là gì và tại sao chúng ta cần nó ?

Answer 13

Bởi vì viết trực tiếp vào DOM rất chậm và kém hiệu quả
React sẽ cố gắng sử dụng lại càng nhiều cây Dom hiện có càng tốt
Đó là nơi quá trình Reconciliation phát huy tác dụng
Reconciliation về cơ bản là quyết định chính xác phần tử DOM nào cần được chèn , xóa hoặc được cập nhật để phản ánh những thay đổi trạng thái mới nhất .
Việc Reconciliation được xử lý bởi Reconciler , và thực sự là trái tim của React

Question 14

Reconciler : Fiber

Answer 14

Internal tree that has a “ fiber “ for each components instance and DOM elements
Fiber tree không bao giờ bị phá hủy
Fiber cũng được định nghĩa là một đơn vị công việc ( Unit Work )
Có thể làm việc không đồng bộ ( asynchronously )

Question 15

The Commit Phase và Browser Paint

Answer 15

Giai đoạn Commit là nơi cuối cùng React ghi vào DOM , nó chèn , xóa , cập nhật các phần tử DOM
Giai đoạn Commit là Đồng Bộ , giai đoạn này có thể bị tạm dừng
Sau khi giai đoạn commit hoàn tất , the workInProgress fiber tree trở thành Current Tree cho chu kỳ kết xuất tiếp theo . Bởi vì Fiber Tree không bao giờ bị bỏ đi và không bao giờ được tạo lại từ đầu

!!! React chỉ thực hiện giai đoạn Render nhưng không phải giai đoạn Commit

Question 16

Cách hoạt động của Diffing

Answer 16

Diffing dựa trên hai giả định cơ bản .
Đầu tiên là hai Loại Elements khác nhau sẽ cho ra những cây khác nhau
Giả định thứ hai là các Element có stable key . Vì vậy key sẽ nhất quán theo thời gian , sẽ giữ nguyên các bản kết xuất

1. Thay đổi Element . Xóa DOM và viết lại
2. Same position , same Element. Không xóa DOM

Question 17

Key Prop là gì ? Key Prop to Reset State ( Changing Key )

Answer 17

Key Prop là một prop đặc biệt mà chúng ta có thể sử dụng để phân biệt thuật toán khác nhau rằng một yếu tố nhất định là duy nhất
Khi key bị thay đổi giữa các lần hiện thị , element sẽ bị phá huy và Element mới sẽ được tạo ở vị trí của nó , ngay cả khi các phần tử được định vị trong cây vẫn giống hệt như trước
Nếu key không bị thay đổi thì DOM sẽ không bị xóa kể cả khi thay đổi DOM Tree
——————————–
Key Prop to Reset State
Khi key bị thay đổi thì sẽ xóa DOM và viét lại

Question 18

Hai loại logic trong React Components

Answer 18

1. Render Logic
   - Về cơ bản là tất cả các mã nâng cao ở Top Level của Component Function
   - Tham giao vào việc mô tả ( describing ) cách nhìn của một Component
   - Render logic là tất cả mã được thực thi ngay khi thành phần được hiện thị
2. Event handler Function
   - Về cơ bản là những đoạn mã được thực thi do hậu quả của sự kiện mà người xử lý đang nghe
   - Về cơ bản là mã giúp mọi việc diễn ra trong ứng dụng : Update State , HTTP request , Reading input field

Question 19

Rules for Render Logic

Answer 19

• Các component phải là hàm thuần túy khi nói đến Render Logic . Điều này có nghĩa là nếu chúng ta đưa vào cùng một đầu vào thì Component đó phải luôn trả về đầu ra giôngs hết nhau ở dạng JSX
• Render logic không được phép tạo ra bất kỳ Side Effect nào

+ Do Not perform Network Request
+ Do Not start timers
+ Do Not directly use the DOM API
+ Do Not mutate objects or variables outside of the function scope
+ Không thể cập nhật Sate trong Render Logic
Đó là lý do tại sao chúng ta không thể sửa đổi Props

Question 20

Framework và Library

Answer 20

Framework :
- Về cơ bản là một cấu trúc hoàn chỉnh bao gồm mọi thứ bạn cần để xây dựng một ứng dụng quy mô lớn hoàn chỉnh .
Library :
- Về cơ bản là những đoạn mã mà các nhà phát triển chia sẻ cho các nhà phát triển khác sử dụng

Question 21

Vòng đời của Components

Answer 21

Về cơ bản bao gồm các giai đoạn khác nhau mà một Component Instance cụ thể có thể trải qua theo thời gian
Giai đoạn đầu tiên : Mount / Initial Render còn được gọi là Render ban đầu
Vì đây là lúc Component được hiện thị lần đầu tiên
Đây cũng là lúc State và Props mới được tạo cho Component Instance
Giai Đoạn Hai ( Tùy Chọn ) : Re-render
Xảy ra khi :
- State , Props, Context thay đổi
- Parent re-render
Giai đoạn 3 : Unmounted

Question 22

Side Effects là gì ?

Answer 22

Về cơ bản trong React , Side Effects là bất kỳ tương tác nào giữa Component React với bên ngoài Component đó
Chúng ta có thể tạo ra tác dụng phụ ở hai nơi khác nhau trong React :
- Event Handlers
- useEffect : Về cơ bản chúng ta có thể viết mã để chạy tại các thời điểm khác nhau của vòng đời Components

Question 23

So sánh Event Handlers với Effects

Answer 23

Event Handlers sẽ thực thi khi một sự kiện xảy ra và Effects được thực thi bất cứ khi nào Component hiện thị lần đầu tiên .
Dependency array là gôm ba phần mà bất kỳ Effects nào cũng có thể có
Mỗi hiệu ứng cũng trả về cái gọi là chức năng dọn dẹp ( Clean Function ) , là một chức năng sẽ được gọi khi Component hiện thị lại hoặc ngắt kết nối
Effect tồn tại không phải để chạy mã tại thời điểm khác nhau của vòng đời , mà để giữ một Component được đồng bộ hóa với hệ thống bên ngoài

Question 24

Dependency Array của UseEffect

Answer 24

Theo mặc định , effect sẽ chạy sau mỗi lần kết xuất . Chúng ta cần ngăn chặn nó bằng Dependency Array
Nếu không có mảng này , React sẽ không biết khi nào thực sự chạy hiệu ứng
Tuy nhiên , nếu chúng ta chỉ định các phụ thuộc hiệu ứng bằng cách chuyển vào mảng phụ thuộc , hiệu ứng sẽ được thực hiện mỗi lần

Định nghĩa :
Effect dependency là các State Variable và Prop được sử dụng bên trong Effect . Cần bao gồm trong Dependency Array

Question 25

Khi nào thì Effects được thực thi ?

Answer 25

Các Effect chỉ được thực hiện sau khi trình duyệt đã ve xong phiên bản thành phần trang màn hình
Nếu một Effect thiết lập State ,một kết xuất bổ sung sẽ được yêu cầu

Question 26

The Clean Up Function

Answer 26

1. đầu tiên nó chạy trước khi Effect được thực hiện lại , để làm sạch kết quả của Side Effect trước đó
2. Sau khi Component ngắt kết nối
   Sử dụng chức năng dọn dẹp khi Side Effect tiếp tục ảy ra sau khi Component đa được kết xuất lại hoặc được ngắt kết nối
   HTTP request -> Cancel request
   API subcription -> Cancel subcription
   Start timer -> Stop Timer

Question 27

React Hooks là gì ? Quy tắc của Hooks

Answer 27

React Hook thực chất là những chức năng đặc biệt được tích hợp vào React và cho phép chúng tôi kết nối với một số cơ chế bên trong của React

• Hay nói cách khác , Hook về cơ bản là API để lộ một số chức năng React nội bộ , chẳng hạn như tạo và truy cập trạng thái từ Fiber Tree hoặc ghi lại các Side Effects trên Fiber Tree
• Tất cả đều bắt đầu với từ “ use “ để React phân biệt Hook với các chứng năng thông thường khác

**Quy tắc của Hooks
**Đầu tiên : Hook chỉ có thể được gọi ở Top Level
Điều này có nghia chúng ta không thể gọi Hook bên trong các câu If Else
Chỉ hoạt động khi được gọi đúng thứ tự
Thứ 2 : Chỉ có thể gọi Hook từ các hàm React

Question 28

Tổng quan về Defining và Updating Sate

Answer 28

1. Sử dụng useState để tạo State và sau đó thiết lập một chức năng
   chúng ta có thể truyền một giá trị đơn giản hoặc là một callback function
   Lưu ý : callback function phải là một hàm thuần túy và không yêu cầu đối số để hoạt động
2. Updating State :
   Có thể update đơn giản hoặc dựa trên State hiện tại
   Lưu Ý : thay đổi đối tượng hoặc mảng thì phải tạo đối tượng ( object ) hoặc mảng ( array ) mới

Question 29

Refs là gì ?

Answer 29

Nó giống như một chiếc hộp mà chúng ta có thể đặt bất kỳ dữ liệu nào vào đó mà chúng tôi muốn được giữ nguyên giưa các lần hiển thị .

2 Trường hợp lớn sử dụng Refs :
Đầu tiên : Chúng ta có thể sử dụng ref để tạo biến điều đó sẽ giữ nguyên giữa các lần hiện thị .
Thứ hai : Lưu trữ và select các phần tử DOM

Lưu Ý : Refs chỉ thường dành cho dữ liệu không được hiện thị đầu ra riêng lẻ của Component

Question 30

What is Routing ?

Answer 30

Với Routing , chúng tôi match những Urls khác nhau với những UI khác nhau ( React components ) : routes
- Điều này cho phép người dùng điều hướng các màn hình khác nhau của Ứng Dụng chỉ bằng sử dụng các liên kết và URL trong trình duyệt
- Giữ cho giao diện người dùng được đồng bộ tốt với URL trình duyệt hiện tại
- Việc định tuyến ( routing ) để xây dựng ứng dụng một trang
!!!! Kiểu định tuyến này chỉ hoạt động Client-side

Question 31

Single-page applications ( SPA )

Answer 31

Là ứng dụng web thực thi hoàn toàn trên máy khách
Trong các ứng dụng một trang , luôn luôn là JavaScript sẽ cập nhật DOM
Không bao giờ có một lần tải lại toàn bộ trang
đc

Question 32

What is the Context API ?

Answer 32

Context API cho phép các thành phần ở mọi nơi trong cây đọc được State mà context chia sẻ
- Contexxt APi là một hệ thống để truyền dữ liệu xuyên qua ứng dụng mà không cần truyền Props theo cách thủ công
- Provider : có thể cho tất cả Component con truy cập vào giá trị ( value )
- Value : là dữ liệu chúng tôi muốn cung cấp
- Comsumer : là tất cả Components đọc giá trị ( value )

Question 33

Chúng ta nên đặt một phần State ở đâu ?

Answer 33

Nếu : Local state thì “ useState , useReducer, or useRef “
Nếu : Lifting up state thì “ useState , useReducer, or useRef “
Nếu : Global state ( preferably UI State ) thì “ Context API “
Nếu : Global state ( remote or UI )
Nếu : URL thì “ React Router”

Question 34

Performance optimization Tools

Answer 34

1. Ngăn chặn việc hiện thị lãng phí
   - memo
   - useMemo
   - useCallback
2. Cải thiện tốc độ tổng thể của ứng dụng
   - useMemo
   - useCallback
   - useTransition
3. Giảm kích thước gói
   - sử dụng ít gói của bên thứ 3 trong cơ sở mã của chúng tôi
   - phân tách mã và tải từng phần

Question 35

The MEMO function

Answer 35

Chúng tôi sử dụng Memo để tạo Component được ghi nhớ
Việc ghi nhớ Component chỉ thực sự ảnh hưởng đến Props . Điều này có nghĩa một Components được ghi nhớ vẫn sẽ re-render bất cứ khi nào State thay đổi hoặc thay đổi Context mà component đăng ký
Chỉ sử dụng khi Component nặng , kết xuất lại thường xuyên và sử dụng cùng Props

Question 36

Quy tắc useEffect dependency array

Answer 36

• Mỗi biến trạng thái ( State ) và Props phải được bao gồm trong mảng phụ thuộc .
• Quy tắc trên không hoàn toàn hoàn chỉnh 100% vì 2 điều :
  Đầu tiên : Bất kỳ Context Value mà Component đăng kí cũng phải được đưa vào mảng phụ thuộc
  Thứ 2 : Chúng ta phải bao gồm tất cả cái gói là “ reactive values “ trong Dependency array
  Reactive values : là bất kỳ giá trị nào ở State , Props, Context Value hoặc bất kì giá trị nào khác
  !!! Không sử dụng Object hoặc Array làm mảng phụ thuộc

Question 37

Cách loại bỏ những phụ thuộc không cần thiết khi sử dụng useEffect hoặc hooks gì đó tương tự

Answer 37

Removing function dependencies
- đưa Function ra khỏi Component
- Di chuyển function vào trong effect
- Nếu cần function ở nhiều nơi thì có thể sử dụng useCallback
Removing Object dependencies
- Cố gắng không bao gồm toàn bộ đối tượng , chỉ những properties mà bạn thực sự cần
- Moving hoặc memoizing object
Other strategies :
Sử dụng UseReducer
- không cần bao gồm hàm setState từ useState hoặc dispath từ useReducer

Question 38

Client-side rendering ( csr ) or server-side rendering ( SSR )

Answer 38

Client-side rendering :
- Để xây dựng ứng dụng 1 trang
- Được hiện thị 100% trên máy khách
- JavaScript cần tải xuống trước khi ứng dụng được hoạt động ( Không tốt cho hiệu suất )

server-side rendering:
- xây dựng ứng dụng nhiều trang