Nhật ký học tập

Stateless và Stateful Components trong React Trong React, các thuật ngữ "stateless" và "stateful" được sử dụng để mô tả cách một component xử lý dữ liệu và trạng thái: Stateless component là component không tự quản lý trạng thái nội bộ, thường chỉ nhận props và hiển thị dữ liệu dựa trên những gì được truyền vào. Chúng đơn giản, dễ kiểm soát và dễ kiểm thử. Stateful component là component có thể lưu trữ và thay đổi trạng thái bên trong, cho phép chúng phản hồi với các hành động của người dùng hoặc thay đổi dữ liệu theo thời gian. 📜 Trước và Sau React 16.8 Trước React 16.8, chỉ có class components mới có khả năng quản lý state và sử dụng các lifecycle methods như componentDidMount, componentDidUpdate, v.v. Vì vậy, "stateful component" thường đồng nghĩa với "class component". Từ React 16.8 trở đi, React giới thiệu Hooks như useState, useEffect, useReducer..., cho phép function components cũng có thể quản lý state và hiệu ứng phụ (side effects). Điề...

Để khai báo một function component kết hợp TypeScript trong React, bạn tạo file App.tsx, và thêm React.FC sau tên component.  FC là viết tắt cho Function Component, khi thêm : React.FC thì sẽ hiểu type của App chính là một Function Component của React Tạo file Greeting.tsx trong folder components: import React from 'react'; interface GreetingProps { name: string; } const Greeting: React.FC<GreetingProps> = ({ name }) => { return <h1>Hello, {name}!</h1>; }; export default Greeting; Ví dụ Button component interface ButtonProps { onClick: () => void; text: string; } const Button: React.FC<ButtonProps> = ({ onClick, text }) => { return <button onClick={onClick}>{text}</button>; }; Giải thích React.FC là viết tắt của Function Component của React ButtonProps là kiểu của các props được truyền vào component. React.FC<ButtonProps> = ({ onClick, text }): sử dụng cú pháp destructing để gán giá trị vào onClick() và text...

Trong JavaScript truyền thống (ES5 và trước đó), khi bạn định nghĩa một hàm thông qua cách sử dụng từ khóa function, cách thức this hoạt động trong hàm đó sẽ gây ra một số khó khăn. Điều này liên quan đến cách ngữ cảnh (context) của this được xác định trong các hàm. Một trong những tình huống phổ biến là việc sử dụng hàm trong một sự kiện (event handler) hoặc trong một callback. Trong trường hợp này, giá trị của this thường sẽ tham chiếu đến đối tượng mà sự kiện được gọi hoặc đối tượng của ngữ cảnh bên ngoài callback đó. function printSong() { console.log("Oops - The Global Object"); } const jukebox = { songs: [{ title: "Wanna Be Startin' Somethin'", artist: "Michael Jackson", }, { title: "Superstar", artist: "Madonna", }, ], printSong: function(song) { console.log(song.title + " - " + song.artist); }, printSongs: f...

Một số link hữu ích: ASPNET-VideoStreaming FFmpeg - The Complete Guide Shaka player  

LifeCycle Hooks để có thể thực hiện các hành động phù hợp với các giai đoạn khác nhau của một component trong reactjs.  Ví dụ: Bạn có thể gọi API, khởi tạo state, đăng ký event listener, v.v. khi component được mount vào DOM. Bạn có thể cập nhật lại DOM, gọi lại API, thay đổi state, v.v. khi component được cập nhật do props hoặc state thay đổi. Bạn có thể dọn dẹp tài nguyên, hủy bỏ event listener, v.v. khi component bị unmount khỏi DOM. LifeCycle Hooks giúp bạn kiểm soát được trạng thái và hành vi của component, tăng hiệu suất và trải nghiệm người dùng Có ba giai đoạn chính là mounting, updating và unmounting. Mỗi giai đoạn có những phương thức khác nhau, ví dụ như: Mounting: Đây là giai đoạn component được tạo ra và chèn vào DOM. Phương thức componentDidMount được gọi sau khi component được render lần đầu tiên. Bạn có thể sử dụng phương thức này để gọi API, xử lý DOM hoặc thiết lập trạng thái ban đầu. Updating: Đây là giai đoạn component được cập nhật khi có sự thay đổi về props h...

Application Insight là gì? Application Insights là một dịch vụ giám sát ứng dụng của Microsoft Azure cho phép bạn theo dõi hiệu suất, độ tin cậy và khả năng sử dụng của các ứng dụng web, máy chủ và IoT của mình. Application Insights là một phần của hệ sinh thái Azure Monitor. Application Insights telemetry data model Application Insights sử dụng một data model để tổ chức và lưu trữ dữ liệu thu thập được từ ứng dụng và hệ thống. Data model này giúp bạn hiểu rõ hơn về hiệu suất, sự cố và hoạt động của ứng dụng. Dưới đây là một số khái niệm cơ bản trong Application Insights telemetry data model Telemetry Telemetry là dữ liệu thu thập được từ ứng dụng hoặc hệ thống để theo dõi, giám sát và phân tích. Các dạng telemetry chính bao gồm: Request Telemetry: Theo dõi thông tin về các request đến ứng dụng. Dependency Telemetry: Theo dõi các yêu cầu đến các dịch vụ hoặc thành phần bên ngoài ứng dụng. Event Telemetry: Theo dõi các sự kiện tùy chỉnh mà bạn ghi lại. Exception Telemetry: Theo dõi các ...

Github: https://github.com/markmap/markmap Visualize your Markdown as mindmaps. This project is heavily inspired by dundalek's markmap . 👉 Try it out . 👉 Read the documentation for more detail.