Giới thiệu
React.memo là Higher 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
- Function component
- Hàm propsAreEqual (không bắt buộc), nhập tham số đầu vào là prevProps và nextProps dùng cho việc kiểm tra thuộc tính, hàm này trả về kiểu boolean (true nếu prevProps và nextProps bằng nhau, false cho trường hợp ngược lại)
|
1 2 3 4 |
function memo<P extends object>( Component:SFC<P>, propsAreEqual?: (prevProps:Readonly<PropsWithChildren<P>>, nextProps:Readonly<PropsWithChildren<P>>) =>boolean ) |
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
- React.memo được sử dụng cho function component còn PureComponent áp dụng cho class
- Trong React.memo có propsAreaEqual thì PureComponent có shouldComponentUpdate, đ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
