Giới thiệu React.memo

React.memo

Giới thiệu

React.memoHigher order component trong reactJS, được sử dụng để tối ưu render trong reactJS, mục đích sử dụng cũng giống như React.PureComponent nhưng nó được sử dụng cho function component thay vì class. Vậy React.memo ra đời với mục đích là giúp tối ưu quá trình render trong reactJS khi dùng function component, đây là phương thức mà reactJS đang bỏ bớt life-cycle khi sử dụng class component bằng cách hướng người dùng qua function component trong reactJS

Cách sử dụng

React.memo cung cấp 2 tham số đầu vào

  1. Function component
  2. Hàm propsAreEqual (không bắt buộc), nhập tham số đầu vào là prevPropsnextProps dùng cho việc kiểm tra thuộc tính, hàm này trả về kiểu boolean (true nếu prevPropsnextProps bằng nhau, false cho trường hợp ngược lại)

Tham số thứ 2 là option, nếu thuộc tính truyền vào chỉ là kiểu primary type thì React.memo nó sẽ kiểm tra cho chúng ta, trường hợp chúng ta cần kiểm tra nhiều điều kiện hơn thì sử dụng tham số propsAreEqual để xử lý

Điểm khác biệt giữa React.memo và PureComponent

Có 2 điểm khác biệt

  1. React.memo được sử dụng cho function component còn PureComponent áp dụng cho class
  2. Trong React.memopropsAreaEqual thì PureComponentshouldComponentUpdate, điểm khác biệt là propsAreEqual trả về true thì không render , còn shouldComponentUpdate trả về true là cho phép render

Nguồn: https://reactjs.org/docs/react-api.html#reactmemo

You May Also Like

About the Author: truongluu

Leave a Reply

Your email address will not be published. Required fields are marked *