Lý thuyết về React Flashcards
Keeping UI in Sync with data
Piece of data = piece of state
Giữ cho UI và Data đồng bộ là hâu như không thể với vanilla JavaScript
What is React ?
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
What is JSX? Rules of JSX
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
Separation of concerns ?
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
Dữ liệu là một thành phần được tạo ra từ ____ và ____
Props và State
Sự khác nhau giưa State và Props là gì ?
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
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
- 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
- Stateful components : Là thành phần ( Components ) có trạng thái ( State )
- 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
Components Composition
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
So sánh sự khác nhau giữa Component , Instance và Element
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
Làm như thế nào để Components hiện thị trên màn hình
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
Các render được Triggered
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 .
The Render Phase
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
Reconciliation là gì và tại sao chúng ta cần nó ?
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
Reconciler : Fiber
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 )
The Commit Phase và Browser Paint
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
Cách hoạt động của Diffing
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
- Thay đổi Element . Xóa DOM và viết lại
- Same position , same Element. Không xóa DOM
Key Prop là gì ? Key Prop to Reset State ( Changing Key )
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
Hai loại logic trong React Components
- 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ị - 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
Rules for Render Logic
- 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
Framework và Library
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
Vòng đời của Components
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
Side Effects là gì ?
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
So sánh Event Handlers với Effects
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
Dependency Array của UseEffect
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
Khi nào thì Effects được thực thi ?
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
The Clean Up Function
- đầ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 đó
- 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
React Hooks là gì ? Quy tắc của Hooks
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
Tổng quan về Defining và Updating Sate
- 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 - 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
Refs là gì ?
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
What is Routing ?
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
Single-page applications ( SPA )
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
What is the Context API ?
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 )
Chúng ta nên đặt một phần State ở đâu ?
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”
Performance optimization Tools
- Ngăn chặn việc hiện thị lãng phí
- memo
- useMemo
- useCallback - Cải thiện tốc độ tổng thể của ứng dụng
- useMemo
- useCallback
- useTransition - 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
The MEMO function
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
Quy tắc useEffect dependency array
- 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
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ự
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
Client-side rendering ( csr ) or server-side rendering ( SSR )
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
