Tại sao React không cập nhật trạng thái ngay lập tức

Chiamaka Umeh
Một nhà phát triển giao diện người dùng với niềm đam mê thiết kế giao diện người dùng có độ phản hồi cao cho các ứng dụng di động và web dựa trên JavaScript bằng cách sử dụng React và React Native.

12 tháng 1, 2022

2 phút đọc
707

Bất chấp sự phổ biến của React, một trong những nhược điểm lớn nhất của nó là các thành phần của nó hiển thị quá mức. Khi phát triển các ứng dụng React, bạn có thể nhận thấy rằng các bản cập nhật trạng thái không phản ánh ngay lập tức các giá trị mới sau khi được thay đổi. Trạng thái phản ứng là một đối tượng JavaScript đơn giản chứa thông tin ảnh hưởng đến kết quả hiển thị.

Khi xây dựng dự án của mình, nếu bạn có ý định thay đổi bất kỳ thuộc tính nào của một thành phần React trong tương lai, bạn nên lưu trữ thuộc tính đó ở trạng thái. Trạng thái bắt đầu với giá trị mặc định ban đầu trên mount và sau đó được thay đổi sau đó do hành động của người dùng. Mỗi thành phần React quản lý trạng thái riêng của nó trong nội bộ.

Trong bài viết này, chúng ta sẽ tìm hiểu lý do tại sao React không cập nhật trạng thái ngay lập tức. Chúng tôi sẽ chạy qua một ví dụ và làm rõ những gì bạn nên làm khi bạn cần thực hiện các thay đổi đối với trạng thái mới trong cả thành phần lớp và hàm. Bắt đầu nào!

Cách React thực hiện cập nhật trạng thái

Để cập nhật trạng thái trong các thành phần React, chúng tôi sẽ sử dụng this.setState hoặc hàm cập nhật được trả về bởi React.useState() Hook trong các thành phần lớp và chức năng, tương ứng.

Cập nhật trạng thái trong React là không đồng bộ; khi một bản cập nhật được yêu cầu, không có gì đảm bảo rằng các bản cập nhật sẽ được thực hiện ngay lập tức. Các chức năng của trình cập nhật xếp hàng thay đổi trạng thái thành phần, nhưng React có thể trì hoãn các thay đổi, cập nhật một số thành phần trong một lần chuyển.

Ví dụ: hãy xem xét đoạn mã dưới đây:

//React
const handleClick = () => {
      setName("Amaka")
      setAge(20)
      setAddress("No 3 Rodeo drive")
}

Trong đoạn mã trên, có ba lệnh gọi khác nhau để cập nhật và hiển thị lại thành phần. Gọi lần lượt các hàm của trình cập nhật và hiển thị lại cả thành phần cha và con sau mỗi lần gọi sẽ không hiệu quả trong hầu hết các trường hợp. Vì lý do này, React hàng loạt cập nhật trạng thái.

Không quan trọng là bao nhiêu setState() cuộc gọi đang ở trong handleClick xử lý sự kiện, họ sẽ chỉ tạo ra một kết xuất duy nhất vào cuối sự kiện, điều này rất quan trọng để duy trì hiệu suất tốt trong các ứng dụng lớn. Thứ tự của các yêu cầu cập nhật luôn được tôn trọng; React sẽ luôn xử lý các yêu cầu cập nhật đầu tiên trước.

Giờ đây, chúng tôi đã thiết lập rằng việc trì hoãn đối chiếu các yêu cầu cập nhật để gộp chúng lại là có lợi, nhưng cũng có lúc bạn cần đợi các bản cập nhật để thực hiện điều gì đó với các giá trị được cập nhật. Trong phần tiếp theo, chúng ta sẽ xem cách thực hiện điều đó.

Thực hiện các hoạt động với các thành phần lớp

setState() gọi lại

Tham số thứ hai để setState() là một chức năng gọi lại tùy chọn. Đối số này sẽ được thực thi một lần setState() được hoàn thành và thành phần được kết xuất lại. Chức năng gọi lại được đảm bảo sẽ chạy sau khi áp dụng cập nhật trạng thái:

//React

handleSearch  = (e) => {
    this.setState({
    searchTerm: e.target.value
  },() => {
    // Do an API call with this.state.searchTerm
  });
}

componentDidUpdate

Các componentDidUpdate hàm được gọi ngay lập tức sau khi cập nhật trạng thái xảy ra. Để tránh vòng lặp vô hạn, bạn nên luôn sử dụng câu lệnh điều kiện để đảm bảo rằng trạng thái trước đó và trạng thái hiện tại không giống nhau:

//React

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    // Do something here
  }
}

Thực hiện các hoạt động với các thành phần chức năng

useEffect() Cái móc

Bạn có thể thực hiện các tác dụng phụ trong useEffect Móc khi trạng thái được cập nhật. Biến trạng thái có thể được thêm vào như một phụ thuộc trong Hook này, làm cho nó chạy khi giá trị trạng thái thay đổi. Bạn có thể làm cho useEffect Hook lắng nghe các thay đổi trạng thái:

//React

import React,{useState, useEffect} from 'react';

const App = () => {
  const [count, setCount] = useState(1);

  useEffect(() => {
    if (count > 5) {
      console.log('Count is more that 5');
    } else {
      console.log('Count is less that 5');
    }
  }, [count]);

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

  return (
    <div>
      <p>{count}</p>

      <button onClick={handleClick}>
        add
      </button>
    </div>
  );
};

export default App;

Hàm gọi lại trong useEffect Hook chỉ chạy khi biến trạng thái được cung cấp dưới dạng phụ thuộc thay đổi.

Sự kết luận

Trong React, mọi cập nhật trạng thái đều khiến thành phần được cập nhật hiển thị lại. Vì kết xuất là một hoạt động tốn kém, việc cập nhật trạng thái một cách đồng bộ có thể gây ra các vấn đề nghiêm trọng về hiệu suất, chẳng hạn như tăng thời gian tải hoặc khiến ứng dụng của bạn gặp sự cố. Bằng cách cập nhật hàng loạt trạng thái, React tránh được các kết xuất không cần thiết, tăng hiệu suất tổng thể. Tôi hy vọng bạn thích bài viết này!

Hiển thị đầy đủ các ứng dụng React sản xuất

Gỡ lỗi các ứng dụng React có thể khó khăn, đặc biệt là khi người dùng gặp các sự cố khó tái tạo. Nếu bạn quan tâm đến việc giám sát và theo dõi trạng thái Redux, tự động hiển thị các lỗi JavaScript và theo dõi các yêu cầu mạng chậm và thời gian tải thành phần, thử LogRocket.

LogRocket giống như một DVR cho các ứng dụng web, ghi lại mọi thứ diễn ra trên ứng dụng React của bạn theo đúng nghĩa đen. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về trạng thái ứng dụng của bạn đang ở trạng thái nào khi sự cố xảy ra. LogRocket cũng theo dõi hiệu suất ứng dụng của bạn, báo cáo với các chỉ số như tải CPU của máy khách, mức sử dụng bộ nhớ máy khách, v.v.

Gói phần mềm trung gian LogRocket Redux bổ sung thêm một lớp khả năng hiển thị vào các phiên người dùng của bạn. LogRocket ghi lại tất cả các hành động và trạng thái từ các cửa hàng Redux của bạn.

Hiện đại hóa cách bạn gỡ lỗi các ứng dụng React của mình – .

Thanks for Reading

Enjoyed this post? Share it with your networks.

Get more stuff

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Leave a Feedback!