Please enable JavaScript.
Coggle requires JavaScript to display documents.
REACT - Coggle Diagram
REACT
CORE
tại sao react lại ra đời ? ưu nhược điểm ?
quản lý trạng thái và ui phức tạp
cung cấp mô hình lập tình quản lý trạng thái
Component-Based Architecture:
JS
make web pages interactive.
manipulate and interact with elements on a webpage, handle events, validate forms, create animations, and much more.
interactive
declarative programming style
ưu nhược điểm ?
ưu
Hiệu suất cao
: ReactJS sử dụng cơ chế Virtual DOM, giúp giảm tải cho DOM thật và tăng hiệu suất.
Độ linh hoạt cao
: ReactJS cho phép phát triển phần mềm theo phương pháp modular, có thể tách thành các thành phần độc lập, dễ dàng quản lý và tái sử dụng.
Hỗ trợ tốt cho SEO
: ReactJS cho phép render trên server-side, giúp các trang web được tối ưu hóa cho SEO tốt hơn.
Cộng đồng lớn:
ReactJS có cộng đồng rộng lớn, đầy đủ các tài liệu, thư viện hỗ trợ và các dự án mở rộng được phát triển.
nhược:
Khó học
quản lý state phức tạp khi app lớn
Cần những gì để chạy được react
nodejs và npm quản lý gói
babel
một trình biên dịch chuyển đổi jsx , es6 + thành js để trình duyệt có thể hiểu được
webpack
bundle gói các module js và html, css , file vào 1 hoặc nhiều file để sử dụng trrong trình duyệt, quản lý các dependency để tối ưu hóa hiệu năng ứng dugnj
so sánh create-react-app và vite
hai công cụ phổ biến tạo app react
CRA
được cấu hình sẵn webpack , có cộng đồng phát triển mạnh
thời gian khởi đọng chậm
VITE
hiệu suất khởi động nhanh
HRM: nhanh, giúp thấy các thay đổi trong mã ngay lập tức mà không phải tải toàn bộ lại trang
cấu hình đơn giản và dễ tùy chỉnh
tuy nhiên không có nhiều pugin
tại sao vite nhanh hơin
khởi động serverr gần như ngay lập tức
hrm nhanh
sử dụng các module esm giúp giảm thời gian cần thiết để phân tích và xử lý các mô dule
STRICT MODE trong react app
được tích hợp trong React để giúp các nhà phát triển xác định các vấn đề tiềm ẩn trong ứng dụng
đưa ra cảnh báo giúp bạn viết mã an toàn hơn
tại sao lại rerender 2 lần
React render các component hai lần để kiểm tra xem có bất kỳ side effects nào xảy ra trong quá trình render không.
phát hiện các vấn đề liên quan đến các lifecycle methods cũ và không an toàn,
Mutable và Immutable
: quản lý state
không thay đổi sau khi được tạo, bất kỳ thay đổi nào đều tạo ra một bản sao mới của dữ liệu và áp dụng
thay đổi trực tiếp mà không cần tạo bản sao mới
Trong react việc mutable trực tiếp props và state là điều không nên làm vì nó dẫn đến các hành vi không mong muốn và khó dự đoán
lợi ích của immutable
tối ưu hóa hiệu suất: so sánh bản sao mới và cũ
đẽ dự đoán và bảo trì
dễ tracking thay đổi trong trạng thái của dữ liệu
Reconciliation
khi state thay đổi, react sẽ tiến hành tạo thay đổi trên dom ảo,
so sánh dom ảo với dom thât, từ đó chỉ update nhưng phần của dom khi thực sự thay đổi, => tăng hiệu suất giảm thiểu các thay đổi không cần thiết
Virtual DOM
Bản sao của DOM thật, tồn tại trong bộ nhớ
có thể tốm thêm bộ nhớ vì phải giữ bản sao
Shadow DOm
công nghệ của web components cho phép đóng gói phần của DOM và CSS của nó để tách biệt hoàn toàn khỏi phần còn lại của tài liệu.
Tạo ra một "shadow root" trong một phần tử DOM, trong đó các phần tử con và CSS chỉ áp dụng trong vùng này và không ảnh hưởng đến các phần tử bên ngoài.
COmponent and element
COmponent
Component cho phép bạn tách UI thành các phần độc lập, tái sử dụng được và xử lý chúng một cách độc lập. Một component có thể bao gồm nhiều Element và cũng có thể bao gồm các Component khác.
JSX
cú pháp mở rộng cho JavaScript
cho phép bạn viết cú pháp giống như HTML trong mã JavaScript của mình.
JSX giúp viết mã cho các thành phần giao diện người dùng một cách trực quan và dễ hiểu hơn.
element
Một element là một plain object miêu tả một component instances hoặc DOM node và những properties mong muốn của nó. Nó chỉ chứa những thông tin về component type (ví dụ như 1 Button), những thuộc tính của nó (ví dụ như color), and những component con ở trong nó.
Một element mô tả một component cũng là một element, giống như một element mo tả một DOM node. Nó có thể được lồng và trộn với những element khác
Control and Uncomtrol component
một comtrol component là một component mà react có thể hoàn toàn kiểm soạt caccs giá trị của nó thông qua state
Một Uncontrolled Component là một component mà React không kiểm soát trực tiếp giá trị của nó
các giá trị được xử lý bởi DOM, không phải bởi state trong React
Để truy cập giá trị của một uncontrolled component, bạn thường sử dụng tham chiếu DOM (ref) thay vì state.
Các trường hợp thực tế sử dụng
SPA and MPA
SPA
trang web chỉ tải một trang html duy nhất, sau đó update nội dung một cách động mà không cần tải lại toàn bộ lại trang
React, Angular , vue
advantages
chuyển hướng trang nhanh
trải nghiệm như ứng dụng di động
hiệu suất người dùng tốt
nhược điểm
SEO
quản lý state trở nen phức tạp
MPA
mỗi tương tác hoặc yêu cầu từ người dùng sẽ dẫn đến tải toàn bộ lại trang từ máy chủ
PHP, ASP.NET
advantages
SEO tốt
quảy lý độc lập giữa các trang
nhược điểm
hiệu suất kém, tương tác chậm (vì phải tải lại trang)
nên chọn cái nào
SPA
Nếu cần cung cấp trang trải nghiệm người dùng mượt mà, nhanh chóng
ứng dụng yêu cầu tương tác cao
cần sử dụng các kỹ thuật serverside rendering dderr tối ưu hóa cho seo
MPA
seo là một yếu tố quan trọng với ứng dụng của bạn
bạn cần xây dựng một trang web có nhiều nội dung tĩnh hơn
So sánh CSR và SSR
SSR
Tạo trang web trên ser ver , trả về html cho trình duyệt
ưu điểm
seo tốt hơn
CSR
Khi người dùng yêu cầu, máy chủ trả về tập html rỗng và js, sau đó js sẽ tải nội dung và heiern thị trên trình đuyệt
ưu điểm
tương tác nhanh hơn, giảm tải máy chủ, cung cấp trải nghiệm người dùng tốt hơn
nhược điểm
seo kém
thời gian tải trang đầu chậm
Data binding
Binding một chiều
dữ liễu được chuyển từ nguồn model đến giao diện người dùng
vd: hiển thị thông tin từ csdl trên trang web
Binding 2 cheieuf
dữ liệu được đồng bộ 2 chiều , từ model đến view và từ view đến model
Fragment
Nhóm các phần tử con mà không thêm bất kỳ phần tử bổ sung nào vào kết quả đầu ra
hữu ích khi không cần bọc chúng trong thẻ div
khi sử dụng quá nhiều phần tử div để bọc phần tử con , nó sẽ tạo ra các phần tử dom không cần thiết
Props và State
Props
sử dụng để truyền dữ liệu từ cha xuống con
immutable: không thể bị thay đổi bên trong component nhận chúng
State
lưu trữ trạng thái thông tin có thể thay đổi
có thể thay đổi bằng cách set state
Single source of truth
duy trì một nơi lưu trữ duy nhất và chính xác cho dữ liệu hoặc trạng thái của hệ thống
đảm bảo rằng tất cả các phần của hệ thống đều truy cập vào cùng một bộ dữ liệu, tránh sự không nhất quán
UD trong react
Local state
state cục bộ trong component
lift state up
khi nhiều component cần truy cập và cập nhật cùng 1 trạng thái
context api
tạo SSOT cho 1 hoặc nhiều component có thể truy cập mà không cần phải truyền props
state management library
Đối với các ứng dụng phức tạp hơn, các thư viện quản lý trạng thái như Redux, MobX, hoặc Zustand có thể được sử dụng để tạo ra một SSOT cho toàn bộ ứng dụng.
Key trong List Rendering
react sử dụng thuật toán reconciliation để xác định các thành phần ui nào cần được update khi state hoặc props thay đổi. key giúp react nhận diện mỗi phần tử duy nhất wtrong danh sách, tối ưu hóa quá trình cập nhật
How many way to style in react ?
inline style
css style sheeets : sử dụng các tệp css bên ngoài áp dụng
css module
styled-components
css in js
CSS methodologies
hệ thống , pp luận được thiết kế để giúp tổ chức và viết duy ttri css một cách hiệu quả và có cấu trúc
giúp quản lý và duy trì CSS dễ dàng hơn trong các dự án phức tạp
các loại
BEM
Atomic
OOCSS
SMACSS
ITCSS
Class component
một component được định nghĩa bằng cách sử dụng cú pháp class
statefull component : có nhiều tính năng hơn function component: quản lý state và vòng đời
Life cycle
Update
giai đoạn khi props hoặc state của component thay đổi, dẫn đến việc component cần được render lại.
static getDerivedStateFromProps(props, state):
Được gọi mỗi khi component nhận được props mới.
shouldComponentUpdate(nextProps, nextState):
Được gọi trước khi render lại. Trả về true hoặc false để quyết định xem component có cần render lại không.
render():
Được gọi lại để render UI của component với state hoặc props mới.
getSnapshotBeforeUpdate(prevProps, prevState)
: Được gọi ngay trước khi DOM thực sự được cập nhật. Giá trị trả về từ phương thức này sẽ được truyền vào componentDidUpdate.
componentDidUpdate(prevProps, prevState, snapshot)
: Được gọi ngay sau khi render và cập nhật DOM. Được sử dụng để thực hiện các hành động sau khi component đã được cập nhật.
unmount
giai đoạn component được gỡ khỏi dom
componentWillUnmount()
: Được gọi ngay trước khi component bị gỡ bỏ khỏi DOM. Thường được sử dụng để dọn dẹp các tác vụ như hủy bỏ timer hoặc hủy bỏ các đăng ký sự kiện.
Mounting
constructor
được gọi khi khởi tạo một instance của component
static getDerivedStateFromProps(props, state)
gọi trước khi render, cho phép component cập nhật state dựa trên props
render
trở về JSX , render UI component
componentDidMount()
gọi ngay sau khi component được gắn vào DOM.
thường thực hiện các hành động cần thiết ngay sau khi component đã được render lần đầu tiên
call api
Error Handling (Xử lý lỗi
phương thức được gọi khi có lỗi xảy ra trong quá trình render hoặc trong các phương thức vòng đời.
static getDerivedStateFromError(error
): Được gọi khi có lỗi xảy ra trong quá trình render. Cho phép cập nhật state để hiển thị giao diện thay thế.
componentDidCatch(error, info):
Được gọi khi có lỗi xảy ra, cho phép bạn ghi lại thông tin lỗi hoặc thực hiện các hành động khác.
cơ chế xử lý lỗi ERROR BOUNDARY
Tại sao cần có ?
Nếu không có eerrror boundary , khi một lỗi xảy ra trong quá trình render , hoặc lifecycle method hoặc trong constructor của bất kì component nào, toàn bộ component tree sẽ bị sập và không hiển thị gì cả.
user sẽ thấy trang trăsng
không có thông tin lỗi => khó debug
một kỹ thuật trong React để xử lý lỗi ở các component con mà không làm sập toàn bộ ứng dụng
một Error Boundary là một React component sử dụng các phương thức lifecycle đặc biệt để bắt lỗi JavaScript trong các component con và hiển thị giao diện dự phòng thay vì làm sập toàn bộ ứng dụng.
Function component
componeent được định nghĩa bằng cách sử dụng từ khóa function
ưu điểm so với class componeent
dễ hiểu, hiệu suất cao hơn do ko phải quản lý state và life cycle method, có hooks, dễ bảo trì do code đơn giản , ngắn gọn dễ đọc
life cycle
không có đầy đủ các phương thức lifecycle cụ thể như class component
useEffect thực hiện các side effect
useState để quản lý state
Spead và rest
Spread
mở rộng các phần tử của một mảng, hoặc một thuộc tính của object
gom các tham số không xác định thành 1 mảng
HOOKS
xuất hiện trong phiên bản 16.8
sử dụng cho function component có thể sử dụng state
quản lý state và side effect
tái sử dụng logic
custom hooks
code trông clean hơn
useState
hook cơ bản nhất, cho phép thêm state vào function component
hàm bất đồng bộ
khi gọi setState , react sẽ không ngay lập tức cập nhật state và rerender
nó sẽ gom lại vào cuối cho lần rerender kế tiếp
làm như vậy để tối ưu hóa hiệu suất
nếu muốn cập nhật state dựa trên giá trị hiện tại thì nên sử dụng hàm callback trong set state
useEffect
thực hiện side effect
fetch APi, subscription,. dom, xử lý file
useRef
hook cho phép lưu trữ một giá trị không đổi qua các lần re-render
ref
ho phép bạn truy cập trực tiếp đến một DOM element hoặc một instance của component được render.
thường được sử dụng khi bạn cần tương tác với các phần tử DOM trực tiếp, như lấy giá trị của một input, đặt focus vào một element, hoặc tương tác với các thư viện bên ngoài không phải của React.
forwardRef
cho phép bạn truyền ref từ component cha xuống component con, giúp tạo ra các component linh hoạt và tái sử dụng cao.
Context
Cho phép truyền dữ liệu qua các component mà không cần phải truyền prop thủ công qua từng lớp component tree
so sánh với
Redux
context
dễ sử dụng, dễ học, là một phần của react, phù hợp cho các ứng dụng nhỏ hoặc các phần của ứng dụng cần chia sé state không quá phức tạp
không phù hợp với các ứng dụng quản lý state phức tạp
context cập nhật toàn bộ cây component khi giá trị thay đổi , => gặp vấn đề về hiệu suất
Các trường hợp thực tế nên sử dụng
i18n
lưu trữ thông tin đăng nhập của user
theme
useReducer
khi một app trở lên lơn hớn, cần quản lý state phức tạp
để giảm độ phức tạp, và giữ các state ở một nơi dễ truy cập, => sử dụng reducer funtion
memo
một
HOC
sử dụng để cache kết quả render của một component, nếu props của component không thay đổi => sẽ sử dụng lại kết quả render trước đó => cải thiện hiệu suất
so sánh
useMemo
với
useCallback
useMemo
memorize giá trị trả về từ một hàm
, chỉ tính toán lại khi dependence thay đổi
tối ưu hóa hiệu suất cho các tính toán phức tạp
useCallback
memorize một hàm callback,
chỉ thực hiện tạo lại hàm callback khi dependencies thay đổi
tối ưu hóa hiệu suất khi truyền một hàm callback tới component con
ADVANCED
Accessibility
quá trình thiết kế , phát triển ứng dụng => cho tất cả mọi người có thể sử dụng , bao gồm người khiếm khuyết về nhiều mặt
senmantic HTML
ARIA (Accessible Rich Internet Applications)
Keyboard Navigation
điều hướng bằng phím
Focus Management
Color Contrast
Code-Splitting
tách mã ứng dụng thàn hcacs phần nhỏ hơn , chỉ tải các phần khi cần thiết
React.lazy và Suspense
Có bao nhiêu cách để share data logic trong react
4 cách
Render props
sử dụng một prop trong một component là một hàm
component cha truyền hàm này xuống component con để component con có thể gọi hàm đó để render ui
context api
HOC (higher order component)
một hàm nhận vào một component và trả về một component mới với các tính năng mở rộng
tách biệt logic, tái sử dụng logic
không làm chỉnh sửa thay đổi component đầu vào mà chỉ kế thừa các hành vi cùa component đó
custom hooks
SERVER INTERACTION
kiến trúc phần mềm
cho các hệ thống phân tán
dựa trên các nguyên tắc để tạo ra webservice nhẹ, dễ duy trì và mở rộng
các nguyên tắc
client-server
stateless
cachable
uniform interface
các phương thức GET, POST, PUT , DELETE
layered system :
kiến trúc có thể chia được thành nhiều lớp
RESTful Web Service
một dịch vụ web dựa trên các nguyên tắc trên
CORS (Cros-Origin Resource Sharing)
chính sách kiểm soát quyền truy cập giúp ngăn chặn các trang web từ các tên miền khác nhau chia sẻ tài nguyên với nhau
các trình duyệt web có một chính sách bảo mật là Same-Origin Policy. => chỉ cho phép các tài nguyên được yêu cầu từ cùng một nguồn => ngăn chặn các cuộc tấn công XSS, CSRF
CORS hoạt động thông qua việc bổ sung các tiêu đề HTTP (HTTP headers) vào các yêu cầu và phản hồi giữa client và server.
So sánh fetch và axios
fetch
ưu điểm
dễ cài đặt
nhược điểm
không tự động xử lý các lỗi http
không cung cấp nhiều tính năng như axios như tự động chuyển đổi json, hủy yêu cầu
axios
axios hỗ trợ nhiều tính năng như tự động chuyển đổi json, timeout mặc đinh, hủy yêu cầu, hỗ trợ tải lên tải xuống tiến độ
requesst and response interceptor: cho phép cạn thiệp vào các yêu cầu hoặc phản hồi trước khi chúng được xử lý
khó cài đặt ,m cần cài thêm thư viện,
hỗ trợ tốt hơp trên các trình duyệt cũ
AXIOS
REDUX
Redux
luồng
tạo actions
action chứa loại hành động cần thực hiện
khi người dùng tạo một sự kiện sẽ dispatch một action , sẽ chuyển đến reducer
reducer là một functon nhận vào hai param là state và action ,dựa vào action để update state ,
store lưu trữ state mới
component kết nối với store nhận state mới bằng hook hoặc connect HOC
Redux toolkit
lý do xuất hiện
đơn giản hóa nhiều bước,giảm mã boileplate code
tối ưu hóa hiệu suất: createSlice, createAsyncThunk và các middleware như redux thunk
luồng
quá trình cập nhật state vẫn tuân theo các nguyên tắc cơ bản của redux
tạo slice: kết hợp các action creators và reducers trong một module duy nhất
cung cấp một hàm configStore để tạo store tự