Framework

• -:

  • Nói cho đến cùng thì trang web chỉ là form
  • Route là code viết cho server. Island là code viết cho client
  • So sánh Single Page App (SPA) vs Progressive Web App (PWA)
  • UI là kết quả của state và data. State nằm ở client, data nằm ở server

• Component, render, JSX:

  • Component hàm không có trạng thái (stateless). Component lớp có trạng thái (stateful)
  • Component là những hàm hoặc lớp trả về một khối JSX
  • Dùng fetch dạng promise chứ đừng await trong component
  • Không có async component vì hiệu suất quá tệ
  • JSX là cách để viết JS như thể viết HTML
  • key là một thuộc tính đặc biệt của vật thể props để việc render được hiệu quả hơn
  • Phải viết JSX trong .jsx hoặc .tsx
  • Props giúp việc thêm property cho DOM giống như thêm attribute cho HTML
  • Props là viết tắt của property, nghĩa gốc là tài sản. Tài sản của cha mẹ thì con dùng được, nhưng tài sản của con thì cha mẹ không đụng được
  • Props là đối số đầu tiên của hàm component, dùng để truyền giá trị các thuộc tính của nó
  • Những hàm được export default và được viết hoa ký tự đầu tiên là component
  • Nếu truyền HTML làm giá trị biến thì cần dùng dangerouslySetInnerHTML, nếu không thì sẽ bị mã hoá hết
  • Render là quá trình chuyển đổi dữ liệu và code sang HTML

• Fresh, Preact, React:

  • form
  • Fresh dùng Preact cho UI
  • Fresh và Astro đều cung cấp khả năng render island lần đầu tại server và những lần sau tại client
  • Fresh đối với Preact cũng giống như Next.js đối với React. React với Preact cung cấp khả năng render (làm framework), còn Fresh hay Next xử lý những thứ còn lại (làm meta-framework)
  • JS là để tăng trải nghiệm người dùng. Framework là để tăng trải nghiệm lập trình viên
  • Lịch sử phát triển framework JavaScript
  • Next.js, Remix, Gatsby là những framework mà chính React giới thiệu là nên dùng
  • Preact chỉ là một thư viện render. Nó không có biết gì về server hay routing cả
  • React nên được alias thành preact-compat
  • React được sinh ra để làm việc với trạng thái
  • Vì Node, Deno viết trên V8 chứ không phải Gecko, nên chỉ có Chrome mới debug được chứ Firefox thì không
  • Ở Preact, onInput sẽ kích hoạt ngay trong lúc nhập, còn onChange chỉ kích hoạt khi người dùng đổi focus

• Island, state:

  • Component nằm trong thư mục island sẽ được render lần đầu ở server, còn những lần sau đều ở client
  • Các hàm được môi trường thực thi cung cấp không hoạt động được ở island
  • Island là những component ở trong thư mục islands
  • Island với partial hydration là một
  • Khi một vật thể được đổ dữ liệu vào, nó được gọi là được tưới nước
  • Mỗi khi state thay đổi thì islands được render lại
  • State giúp cập nhật dữ liệu mà không cần tải lại trang

• Quản lý state:

  • Chính vì setState render lại cả component, nên với những file component muốn tách ra nhiều hàm độc lập, và state
  • Các hàm set của hook sẽ kích hoạt việc render lại component nơi nó được khai báo
  • Cách dùng useEffect với useState
  • Dùng setState gọn hơn signal nếu không phải truyền setter qua nhiều hàm khác nhau
  • Không dùng mảng hoặc vật thể trong setState được
  • Phải viết hook trong component. Không viết trong loop hoặc if được
  • Trong useEffect chỉ dùng được promise, không dùng async được
  • useEffect được sinh ra là để side effect không tự động chạy mỗi khi component được render
  • createContext() nằm ngoài global, useContext() nằm trong component
  • useContext() là cách để không phải dùng Consumer
  • Giá trị trả về của useContext() là giá trị được truyền vào thuộc tính value của provider
  • Đối số của createContext() quyết định kiểu của value của Context.Provider
  • effect khác computed ở chỗ một cái có return, một cái không có return
  • Signal chỉ render lại mỗi phần tử HTML chứa giá trị của nó
  • Signal giúp giải quyết các vấn đề do useState hoặc Context tạo ra

• Route, handler:

  • Có một số hàm ở server sẽ không serialize được
  • Khi có một yêu cầu tới một route, handler được gọi trước, sau đó tới component
  • Kết quả được trả về ctx.render(arg) của handler sẽ được truyền lại vào props.data của component
  • Nếu viết handler dưới dạng vật thể thì chỉ những phương thức là động từ HTTP mới được dùng. Nếu viết dưới dạng hàm thì cái hàm đó sẽ trở thành handler luôn
  • Route cần có ít nhất một handler hoặc một component
  • Route không bao giờ được gửi đến client. Island được chạy ở cả server và client
  • Serialize là cách duy nhất để truyền dữ liệu từ server tới client và ngược lại