Cách tối ưu hóa hiệu suất biểu mẫu trong React với useRef và useCallback Hook

React đã trở thành một trong những framework phổ biến nhất để tạo giao diện người dùng. Nhiều nhà phát triển giao diện người dùng ưa thích thư viện JavaScript vì tính hiệu quả, tính linh hoạt và khả năng mở rộng của nó. Nhưng một biểu mẫu web vẫn có thể gây ra các vấn đề về hiệu suất nếu bạn không tối ưu hóa nó một cách chính xác.

React có các hook useRef và useCallback, có thể trợ giúp bằng cách giảm các bản cập nhật và kết xuất lại không cần thiết.

Khám phá các ứng dụng hiệu quả nhất của các hook này và tăng tốc các biểu mẫu React của bạn.

Hiểu về useRef và useCallback Hook

Hai trong số các tính năng nâng cao hiệu suất hiệu quả nhất của React là useRef và useCallback hook.

Các sử dụngRef hook tạo ra một tham chiếu có thể thay đổi có thể tồn tại trên nhiều kết xuất thành phần. Các cách sử dụng phổ biến cho nó bao gồm truy cập các phần tử DOM, lưu trữ trạng thái không kích hoạt kết xuất lại và lưu vào bộ đệm các phép tính đắt tiền.

Bạn có thể sử dụng chức năng tiết kiệm bộ nhớ, sử dụngCallback, như một cái móc để nâng cao chức năng của các thành phần phụ thuộc vào các thành phần con. Bạn thường sử dụng phương thức này cho các trình xử lý sự kiện và các quy trình khác được chuyển xuống dưới dạng đạo cụ.

Các vấn đề về hiệu suất biểu mẫu phổ biến trong React

Các biểu mẫu trong React có thể có những lo ngại về hiệu suất do số lượng lớn đầu vào của người dùng và những thay đổi mà họ nhận được. Thời gian phản hồi chậm, kết xuất lại không cần thiết và quản lý trạng thái kém là những vấn đề thường gặp.

Những vấn đề này thường được gây ra bởi những điều sau đây:

• Kết xuất lại không cần thiết: Một thành phần có thể làm chậm ứng dụng với các kết xuất lại không cần thiết do các thay đổi trong đạo cụ hoặc biểu thức không ảnh hưởng đến kết quả.
• Tính toán tốn kém: Một thành phần có thể làm giảm hiệu suất của ứng dụng nếu nó thực hiện các phép tính tốn kém cho mỗi kết xuất.
• Quản lý trạng thái không hiệu quả: Quản lý trạng thái không hiệu quả bởi một thành phần có thể dẫn đến các bản cập nhật và kết xuất lại vô nghĩa.

Cách sử dụng móc useRef và useCallback để tối ưu hóa biểu mẫu

Hãy xem xét cách tận dụng các hook useRef và useCallback của React để tăng tốc các biểu mẫu của chúng ta.

Truy cập các phần tử biểu mẫu với useRef

Các sử dụngRef hook cho phép truy cập vào các phần tử biểu mẫu mà không dẫn đến kết xuất lại. Điều này đặc biệt hữu ích cho các thiết kế phức tạp với nhiều thành phần. Đây là một ví dụ:

 import React, { useRef } from 'react';
function Form() {
  const inputRef = useRef(null);


  function handleSubmit(event) {
    event.preventDefault();
    const inputValue = inputRef.current.value;
    console.log(inputValue);
  }


  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

 

Ví dụ này tham chiếu thành phần đầu vào bằng cách sử dụng hook useRef. Bạn có thể truy cập giá trị đầu vào mà không phải kết xuất lại sau khi gửi biểu mẫu.

Tối ưu hóa Trình xử lý sự kiện với useCallback

Các sử dụngCallback hook cho phép bạn ghi nhớ các trình xử lý sự kiện và các chức năng khác mà bạn chuyển xuống các thành phần con dưới dạng đạo cụ. Do đó, có thể không cần thiết phải kết xuất lại các thành phần con. Đây là một ví dụ:

 import React, { useCallback, useState } from 'react';
function Form() {
  const [value, setValue] = useState('');
  
  const handleChange = useCallback((event) => {
    setValue(event.target.value);
  }, []);


  const handleSubmit = useCallback((event) => {
    event.preventDefault();
    console.log(value);
  }, [value]);


  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

 

Ví dụ này sử dụng hook useCallback để ghi nhớ xử lýThay đổi Và xử lýGửi chức năng. Điều này có thể giúp ngăn việc kết xuất lại nút và các thành phần thông tin không cần thiết.

Tối ưu hóa biểu mẫu Với useRef và useCallback Hook

Hãy xem xét một số trường hợp thực tế về cách tăng tốc biểu mẫu trong React bằng cách sử dụng hook useRef và useCallback.

Đầu vào gỡ lỗi

Đầu vào gỡ lỗi là một kỹ thuật tối ưu hóa thường xuyên để cải thiện hiệu suất của biểu mẫu. Nó đòi hỏi phải trì hoãn việc sử dụng một chức năng cho đến khi một khoảng thời gian nhất định trôi qua sau khi nó gọi. Ví dụ sau sử dụng hook useCallback để gỡ lỗi xử lýThay đổi phương pháp. Kỹ thuật này có thể cải thiện tốc độ của phần tử đầu vào và giúp tránh các cập nhật không cần thiết.

 import React, { useCallback, useState } from 'react';
function Form() {
  const [value, setValue] = useState('');


  const debouncedHandleChange = useCallback(
    debounce((value) => {
      console.log(value);
    }, 500),
    []
  );


  function handleChange(event) {
    setValue(event.target.value);
    debouncedHandleChange(event.target.value);
  }


  return (
    <form>
      <input type="text" value={value} onChange={handleChange} />
    </form>
  );
}


function debounce(func, wait) {
  let timeout;


  return function (...args) {
    clearTimeout(timeout);


    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

 

Ví dụ này sử dụng chức năng gỡ lỗi để trì hoãn việc thực hiện xử lýThay đổi phương pháp bằng 500 mili giây. Điều này có thể cải thiện tốc độ của phần tử đầu vào và giúp tránh các cập nhật không cần thiết.

Khởi tạo lười biếng

Khởi tạo lười biếng là một kỹ thuật để trì hoãn việc tạo ra các tài nguyên đắt tiền cho đến khi chúng thực sự cần thiết. Trong ngữ cảnh của biểu mẫu, việc khởi tạo trạng thái chỉ được sử dụng khi biểu mẫu gửi là hữu ích.

Ví dụ sau khởi tạo một cách lười biếng formState đối tượng bằng cách sử dụng hook useRef. Điều này có thể cải thiện hiệu suất của biểu mẫu bằng cách trì hoãn việc tạo đối tượng formState cho đến khi thực sự cần thiết.

 import React, { useRef, useState } from 'react';
function Form() {
 const [value, setValue] = useState('');
 const formStateRef = useRef(null);


  function handleSubmit(event) {
    event.preventDefault();


    const formState = formStateRef.current || {
      field1: '',
      field2: '',
      field3: '',
    };


    console.log(formState);
  }


  function handleInputChange(event) {
    setValue(event.target.value);
  }


  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleInputChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

 

Ví dụ này sử dụng hook useRef để khởi tạo lười biếng đối tượng formState. Làm như vậy có thể cải thiện hiệu suất của biểu mẫu bằng cách trì hoãn việc tạo đối tượng formState cho đến khi nó thực sự cần thiết.

Thực tiễn tốt nhất để sử dụng useRef và useCallback Hook

Để tối đa hóa tiện ích của các hook useRef và useCallback, hãy tuân theo các phương pháp được đề xuất sau:

• Để truy cập các phần tử DOM và tối ưu hóa các tính toán tốn thời gian, hãy sử dụng sử dụngRef.
• Tối ưu hóa trình xử lý sự kiện được thông qua và các phương pháp khác bằng cách sử dụng sử dụngCallback.
• Để ghi nhớ các chức năng và tránh hiển thị các thành phần con hai lần, hãy sử dụng sử dụngCallback.
• Với việc gỡ lỗi, bạn có thể nâng cao hiệu suất của biểu mẫu và ngăn các cập nhật không cần thiết.
• Làm cho các tài nguyên đắt tiền đợi cho đến khi chúng thực sự cần thiết bằng cách sử dụng quá trình khởi tạo lười biếng.

Bằng cách làm theo các phương pháp hay nhất này, bạn có thể tạo các thành phần nhanh chóng, hiệu quả, mang lại trải nghiệm người dùng mượt mà và nâng cao hiệu suất của các ứng dụng React của bạn.

Tối ưu hóa hiệu suất biểu mẫu trong React

Các hook useRef và useCallback là những công cụ tuyệt vời có thể giúp giảm các lần hiển thị lại và cập nhật không cần thiết, điều này có thể cải thiện hiệu suất của các biểu mẫu của bạn.

Bằng cách tận dụng hợp lý các hook này và làm theo các phương pháp hay nhất như gỡ lỗi đầu vào và khởi tạo chậm các tài nguyên tốn kém, bạn có thể phát triển các biểu mẫu nhanh và hiệu quả.

• Tweet
• Share
• Share
• Share
• Share