ReactJS: Tối ưu hóa việc render bằng React.memo()

jphopeblog

3 years ago

Tạo functional component

Trong ReactJS, functional component là một component đơn giản nhưng rất mạnh mẽ. Chúng ta sẽ bắt đầu với việc tạo một functional component của chúng ta bằng cách sử dụng hàm useState để quản lý trạng thái của component.

Ví dụ:


import React, { useState } from "react";

const MyComponent = (props) => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <h1>My Component</h1>
      Count: {count}
      <button onclick="{handleClick}">Increment Count</button>
    </div>
  );
};

export default MyComponent;

Sử dụng React.memo()

Khi các props của functional component thay đổi, React sẽ gọi hàm render của component đó để cập nhật UI. Tuy nhiên, điều đó sẽ khiến cho hiệu suất của ứng dụng trở nên chậm hơn nếu component được render nhiều lần không cần thiết.

Vì vậy, để tránh việc render không cần thiết, chúng ta có thể sử dụng React.memo(), một higher-order component được cung cấp bởi ReactJS. React.memo() sẽ so sánh các props của component hiện tại với props trước đó và chỉ thực hiện việc render lại khi props đã thay đổi.

Để sử dụng React.memo(), chúng ta chỉ cần bọc component của mình bên trong:

Ví dụ:


import React, { useState } from "react";

const MyComponent = React.memo((props) => { 
  const [count, setCount] = useState(0); 
  const handleClick = () => {
    setCount((prevCount) => prevCount + 1); 
  }; 

  return (
    <div>
      <h1>My Component</h1> 
      Count: {count} <button onclick="{handleClick}">
      Increment Count</button> </div> 
  ); 
}); 
export default MyComponent;

Khi sử dụng React.memo(), bạn có thể thấy cải thiện đáng kể trong hiệu suất của ứng dụng như khi chạy một component mà không sử dụng React.memo() và chạy với React.memo(), chúng ta có thể thấy sự khác biệt rõ ràng. Khi các props của component thay đổi, component sẽ được render lại và chỉ render lại khi một props mới được truyền vào.

Kết luận

Trong bài viết này, chúng ta đã tìm hiểu cách tối ưu hóa việc render bằng cách sử dụng React.memo() để ngăn chặn việc render lại không cần thiết khi các props không thay đổi. Với việc sử dụng kỹ thuật này, chúng ta có thể đạt được hiệu suất tốt hơn với các ứng dụng của mình.

Tham khảo top 10 kỹ năng nâng cao cho reactjs: ReactJS: các kỹ thuật lập trình nâng cao và thực hành tốt nhất bạn phải biết.

Tạo functional component

Sử dụng React.memo()

Kết luận

SHARE BÀI VIẾT NÀY