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
