Please enable JavaScript.

Coggle requires JavaScript to display documents.

ReactJs - Coggle Diagram

- - - - Tạo một đối tượng Virtual DOM cho thành phần đó.
      - Render thành phần bằng cách so sánh Virtual DOM với DOM thực tế thông qua thuật toán diffing algorithm.
      - Nếu có sự khác biệt thì React sẽ cập nhập lại DOM thực tế.
  - - - Là một class được kế thừa từ React.Component và Class component có các state và lifecycle riêng. hình ảnh
        
        componentDidMount: Lifecycle method được gọi sau khi component đã được render lần đầu tiên
        
        componentWillUnmount: Lifecycle method được gọi trước khi component dọn dẹp tài nguyên
        
        shouldComponentUpdate: Lifecycle method được gọi trước khi component được cập nhật
    - - Function Component tương đương với Class Component nhưng được thể hiện dưới dạng function.
      - Không thể sử dụng state trong Function Components và chỉ có thể nhận Props và trả về JSX
        
        Đến năm 2018 React Hooks được phát hành để tích hợp và cung cấp các state có sẵn cho Function Component
  - - - Các props được sử dụng để truyền dữ liệu hoặc event từ component này sang component khác. Props là bất biến, có nghĩa là giá trị của chúng không thể được thay đổi
    - - Là trạng thái cục bộ của component hiện tại
  - - - Cầu trúc cây các đối tượng HTML thực tế mà trình duyệt sử dụng để hiến thị giao diện người dùng. Khi có thay đổi nào trong giao diện người dùng, trình duyệt phải tài lại toàn bộ DOM và cập nhật lại giao diện người dùng
    - - cấu trúc dữ liệu trung gian trong bộ nhớ của trình duyệt, được sử dụng để đại diện cho cầu trúc DOM thực tế. Khi có thay đổi nào trong giao diện người dùng, React tạo ra một Virtual DOM mới, so sánh với Virtual DOM cũ và xác định các thay đổi cần được thực hiện trên Real DOM. Sau đó, React chỉ cập nhật các thành phần thay đổi thực sự trên Real DOM
    - - Tốc độ: Virtual DOM được tạo và cập nhật nhanh hơn Real DOM, giúp tăng hiệu suất và giảm thời gian đáp ứng của ứng dụng.
      - Định dạng: Real DOM là một cầu trúc cây các đổi tượng HTML thực tế, trong khi Virtual DOM là một đổi tượng JavaScript trừu tượng được lưu trữ trong bộ nhớ của trình duyệt.
      - Bộ nhớ: Virtual DOM được lưu trữ trong bộ nhớ của trình duyệt, điều này giúp giảm tải lên máy chủ và tổi ưu hóa việc sử dụng bộ nhớ.
- - - - VD: const [count, setCount] = useState(0);
  - - - https://static1.tothenew.com/blog/wp-content/uploads/2022/09/Screenshot-2022-09-10-at-12.48.22-PM.png
  - - - https://www.luseratech.com/wp-content/uploads/2022/12/usecallback-react-lusera-hook.png