Please enable JavaScript.

Coggle requires JavaScript to display documents.

REACT-JS, chay react che do production - Coggle Diagram

- - - - được truyền từ component cha đến component con và chỉ có thể được đọc, không thể bị thay đổi bởi component con.
  - - - sử dụng để lưu trữ và quản lý các thông tin nội bộ của component. Khi state thay đổi, React sẽ cập nhật lại giao diện của component và render lại component
  - - - Stateless component (hay còn gọi là functional component) là một loại component trong React mà không có trạng thái (state). Stateless component chỉ nhận đầu vào là props và trả về một đoạn mã HTML để hiển thị nội dung trên giao diện.
    - - Class component được định nghĩa bằng cách tạo một class kế thừa từ React.Component hoặc React.PureComponent. Một class component phải bao gồm một phương thức render() trả về các phần tử JSX để được render ra trên trang web.
      - Hàm render()
        
        Mỗi React component bắt buộc phải có hàm render(). Hàm render() trả về duy nhất React element .
        
        dữ liệu thay đổi, React sẽ thực hiện việc update UI với dữ liệu tương ứng
    - - Component
        
        một hàm hoặc một lớp trong React, chứa logic xử lý và UI để hiển thị một phần tử UI cụ thể.
      - Element
        
        mô tả một phần tử UI cụ thể để hiển thị trên trang web
        
        bao gồm một kiểu (type) để chỉ định loại phần tử UI muốn hiển thị, các thuộc tính (props) của phần tử đó và các con (children) nếu có.
  - - - JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can’t return two objects from a function without wrapping them into an array. This explains why you also can’t return two JSX tags without wrapping them into another tag or a Fragment.
        
        gia tăng trai nghiệm lập trình
  - - - 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.
        
        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ớ.
        
        Đị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.
- - - - 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.
    - - Khó học ban đầu: Vì ReactJS là một thư viện phức tạp, nó có thể khó khăn cho người mới học và phát triển với nó.
        
        Cần sử dụng nhiều công nghệ: Để xây dựng một ứng dụng ReactJS, bạn cần sử dụng các công nghệ khác như Babel và Webpack, và điều này có thể tăng thêm độ phức tạp cho việc phát triển.
        
        Hạn chế trong quản lý state: Trong ReactJS, quản lý state có thể trở nên phức tạp khi ứng dụng của bạn phát triển lớn hơn.
        
        Các phiên bản không tương thích: Với sự phát triển liên tục của ReactJS, các phiên bản cũ có thể không tương thích với các phiên bản mới hơn, dẫn đến việc cập nhật có thể gặp khó khăn.
  - - - Virtual DOM: ReactJS sử dụng cơ chế Virtual DOM để tăng tốc độ hiển thị các thay đổi trên giao diện
      - JSX: ReactJS sử dụng JSX (JavaScript XML) để viết mã HTML trực tiếp trong mã JavaScript. JSX giúp dễ dàng xây dựng các thành phần UI và tái sử dụng chúng.
      - Component-based: ReactJS sử dụng phương pháp phát triển phần mềm theo phương pháp modular,
      - Server-side rendering: 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.
      - Hỗ trợ cho các thư viện bên thứ ba:
- - - - một higher-order component là một hàm nhận vào một component và trả về một component.
      - hooks
      - render-props
    - - Context cung cấp một cách thức để truyền dữ liệu qua cây thành phần (component tree) mà không phải chuyển các Props xuống theo cách thủ công ở mọi cấp độ.
        Ví dụ: thông tin user đã đăng nhập, tùy chọn ngôn ngữ, UI Theme cần được truy cập trong ứng dụng bởi nhiều component.
    - - tính năng của ReactJS cho phép chúng ta bắt lỗi trong các component con (child components) bên trong các component cha (parent components)
    - - để tham chiếu đến các thành phần cụ thể trong DOM hoặc trong các thành phần React.
      - pure component