React.memo() HOC | Phương thức memo trong react | React JS

Поділитися
Вставка
  • Опубліковано 27 жов 2021
  • 👉 Xem Lộ Trình Học: fullstack.edu.vn/learning-paths
    👉 Đăng Ký Học Offline Tại F8: short.f8team.dev/dang-ky-hoc-...
    Trong video này chúng ta cùng đi tìm hiểu thêm một một phương thức nữa trong react đó là React.memo() HOC | Phương thức memo trong react | React JS
    #hoclaptrinh #hoclaptrinhmienphi #javascript #reactjs #frontend #backend #devops #f8
    -------
    ☻ Phần mềm sử dụng trong video:
    Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
    Công cụ đo đạc giao diện web: s.net.vn/D8kL
    Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
    --------------
    ☻ Khóa học lập trình web MIỄN PHÍ:
    Kiến thức nhập môn: fullstack.edu.vn/courses/less...
    Xây dựng giao diện với HTML, CSS: fullstack.edu.vn/courses/html...
    Xây dựng web responsive: fullstack.edu.vn/courses/resp...
    Lập trình Javascript cơ bản: fullstack.edu.vn/courses/java...
    Lập trình Javascript nâng cao: fullstack.edu.vn/courses/java...
    Làm việc với Terminal & Ubuntu: fullstack.edu.vn/courses/wind...
    Xây Dựng Website với ReactJS: fullstack.edu.vn/courses/reactjs
    Xây dựng web với Node & Express: fullstack.edu.vn/courses/nodejs
    HTML, CSS tips: fullstack.edu.vn/courses/html...
    Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu.vn/courses/tool...
    Xem thêm tại: fullstack.edu.vn/courses
    -------------------------------------
    F8 Official
    (c) Sơn Đặng
    Website: fullstack.edu.vn
    Facebook cá nhân: / sondnf8
    Nhóm Học Lập Trình Web: / f8official
    Email: contact@fullstack.edu.vn
    © Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
    © Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.
  • Наука та технологія

КОМЕНТАРІ • 42

  • @NTMAX-em4yf
    @NTMAX-em4yf 2 роки тому +6

    trước giờ học khái niệm này , bây giờ mới hiểu bản chất. Quá hay ạ

  • @hanhcode
    @hanhcode 2 роки тому +4

    Hay qúa bạn, rất chi tiết dễ hiểu.

  • @NamangMinh1
    @NamangMinh1 2 роки тому +4

    Anh Sơn tự nhiên hôm nay đẹp trai quá

  • @user-rz4kg5td9c
    @user-rz4kg5td9c Рік тому +2

    anh dạy rất hay và dễ hiểu!

  • @11.tavanhung92
    @11.tavanhung92 2 роки тому +3

    Chúc a nhiều sức khoẻ

  • @minhnguyenhainhat234
    @minhnguyenhainhat234 4 місяці тому

    ngài mai e pv intern react rồi, giờ vẫn đang xem video của anh để ngồi ôn lại

  • @phatnguyenxuan5570
    @phatnguyenxuan5570 2 роки тому +1

    cảm ơn anh rất nhiều

  • @duyphuong7391
    @duyphuong7391 2 роки тому +1

    Hay quá anh ơiii

  • @hoaimiqng
    @hoaimiqng 2 роки тому +2

    Hay rồi anh ơi 😊

  • @khoanguyenleanh6514
    @khoanguyenleanh6514 2 роки тому +2

    anh cho em hỏi là mình có thể sử dụng thay vì props được truyền từ componet cha thì nó được lấy từ reducer để ngăn re-render bằng React.memo hay không vậy anh? Mong anh giải đáp giúp em

  • @GiangTran-cy6sy
    @GiangTran-cy6sy 2 роки тому

    quá hay rồi ạ

  • @lequan4689
    @lequan4689 2 роки тому +2

    bài nào kiến thức cũng nhẹ nhàng như thế này có phải đỡ khổ không :))

  • @khoilam7569
    @khoilam7569 2 роки тому +1

    tuyet voi

  • @nguyenquangsy8591
    @nguyenquangsy8591 2 роки тому +3

    Cho em hỏi là khi re-render sẽ tạo ra vùng bộ nhớ mới, thì vùng bộ nhớ cũ nó có bị xóa không ạ?

  • @phungtruongdinhquan7765
    @phungtruongdinhquan7765 2 роки тому +7

    Vừa lúc bọn em đang làm project để bảo vệ thì anh ra khóa React này. Hên quá :v

    • @congnamle3632
      @congnamle3632 2 роки тому +3

      Thiên thời địa lợi nhân hòa. Đúng lúc Deadline gí gặp ngay khóa học à bạn 😁

    • @tuannguyenhuu964
      @tuannguyenhuu964 2 роки тому

      Mình nghe nói mấy project trong trường thầy cô ko cho dùng thư viện mà phải code chay hết mà bạn

    • @top_1_florentino
      @top_1_florentino Рік тому

      @@tuannguyenhuu964 tui đang năm 4 nè đồ án bán hàng, quản lý ko cho làm bắt làm những gì trường ko dạy => dùng cứ thoải mái thôi

  • @huyngo3327
    @huyngo3327 2 роки тому +2

    Hello a, file content.js em set count - 1 thì sao a. Giá trị k thay đổi sao nó vẫn render.

  • @tamlongnguyen6604
    @tamlongnguyen6604 2 роки тому +4

    Ngày một nhiều kiến thức haha.. mong a sau làm project reactjs có sử dụng các cái hooks vs HOC,... như thế này để dễ hình dung thực tế nó được dùng trong trường hợp nào ạ

  • @hocfrontendweb4578
    @hocfrontendweb4578 2 роки тому +2

    Tuyet voi

  • @DavidJames535
    @DavidJames535 2 роки тому +1

    anh Sơn đẹp trai quá

  • @vuongqtvn
    @vuongqtvn 2 роки тому +1

    👍

  • @lenhac9040
    @lenhac9040 2 роки тому +1

    Nice

  • @khoilam7569
    @khoilam7569 2 роки тому +1

    lam nested route di a

  • @bachkhoait4.052
    @bachkhoait4.052 2 роки тому +1

    Hi anh

  • @turniodev
    @turniodev 2 роки тому +1

    1 ngày 2 bàii luôn

  • @tapquenmoitinhdau
    @tapquenmoitinhdau 2 роки тому +1

    Nếu Content vs App cùng nằm chung 1 file tức là e không sử dụng export thì dùng memo như thế nào ạ?

    • @F8VNOfficial
      @F8VNOfficial  2 роки тому +4

      Memo nó là hàm, nếu em export thì nghĩa là em export kết quả được return bởi memo đúng ko? Nếu viết cùng 1 file thì em đặt ra 1 biến lưu giá trị return từ memo là được. Ví dụ const ComponentMemoized = React.memo(...)

  • @fstbird5163
    @fstbird5163 11 місяців тому

    EM có thắc mắc là react.memo dùng để tránh component re-render không cần thiết. Vậy sao không áp dụng cho tất cả function component có chứa props và nằm trong 1 component cha bất kì nào đó luôn ?

    • @F8VNOfficial
      @F8VNOfficial  11 місяців тому

      Vì tuỳ trường hợp mới cần em. Ví dụ nó là component con và có nhận state của component cha qua props, nhưng dữ liệu state của component cha mỗi khi thay đổi luôn cần update mới vào component con thì đâu cần memo nữa.

  • @nguyenlong8578
    @nguyenlong8578 2 роки тому +1

  • @phuctranxuan9535
    @phuctranxuan9535 2 роки тому +2

    hi

  •  Рік тому +1

    10:20 nếu mình lạm dụng quá thì nhược điểm nó là gì nhỉ?.

    • @F8VNOfficial
      @F8VNOfficial  Рік тому +1

      Code dài không cần thiết thôi bạn. Nhiều tình huống deps luôn thay đổi thì có dùng memo cũng ko có tác dụng mà. Nên dùng ở những chỗ cần thôi, ko lạm dụng theo kiểu ở đâu cũng cho vào rồi nghĩ đó là tối ưu á 🤣

    •  Рік тому +1

      @@F8VNOfficial hình như bạn không phải Sơn trả lời hả. Trả lời vậy đâu có thuyết phục được. Nếu nhược điểm chỉ là code dài thì họ đã tích hợp luôn vào chứ nhỉ.

    • @quangkhiem6901
      @quangkhiem6901 10 місяців тому

      @ Có những vấn đề sau:
      - Cái ko cần check mà lúc nào cũng check => sẽ mất thời gian check(mặc dù ko đáng là bao cho mỗi lần check)
      - Code ko clean, code phải mô tả đúng, đủ đặc điểm của nó tại thời điểm implement, không nên dư, cũng ko đc thiếu theo requirement
      - Để đc về mặt performance thì phải đánh đổi về memory, cái gì cũng lưu thông tin thì memory sẽ tăng dần

  • @huyuc3369
    @huyuc3369 2 роки тому +1

    cmt 2

  • @NguyenDung-oh3kk
    @NguyenDung-oh3kk 2 роки тому +1

    Cmt đầu