Làm cách nào để kích hoạt trang làm mới?

Bạn có thể làm mới trang web bằng cách sử dụng vị trí JavaScript. phương pháp tải lại. Mã này có thể được gọi tự động khi có sự kiện hoặc đơn giản khi người dùng nhấp vào liên kết. Nếu bạn muốn làm mới trang web bằng cách nhấp chuột, thì bạn có thể sử dụng đoạn mã sau -

Refresh Page

Để hiểu nó theo cách tốt hơn, bạn có thể Làm mới Trang

Tự động làm mới

Bạn cũng có thể sử dụng JavaScript để tự động làm mới trang sau một khoảng thời gian nhất định. Đây setTimeout[] là một hàm JavaScript tích hợp có thể được sử dụng để thực thi một hàm khác sau một khoảng thời gian nhất định

Ví dụ

Hãy thử ví dụ sau. Nó cho biết cách làm mới một trang sau mỗi 5 giây. Bạn có thể thay đổi thời gian này theo yêu cầu của bạn

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về cách làm mới một trang hoặc thành phần trong React với sự trợ giúp của các ví dụ

Làm mới một trang

Để làm mới một trang, chúng ta cần sử dụng phương thức window.location.reload[] trong React

Theo mặc định, phương thức này tải lại trang từ bộ nhớ cache, nếu chúng ta chuyển ____6_______ làm đối số thì nó sẽ tải lại toàn bộ trang từ máy chủ thay vì bộ nhớ cache

Hãy xem một ví dụ

Trang chủ. js

import React from "react";

function Home[] {

  const refreshPage = []=>{
     window.location.reload[];  }

  return [
    
      {Math.random[]}
      Refresh    
  ];
}

Trong đoạn mã trên, chúng tôi đang làm mới trang bằng cách nhấp vào nút refresh

Làm mới một thành phần

Nếu bạn muốn làm mới thành phần cụ thể thay vì toàn bộ trang, bạn cần gọi phương thức this.setState[] với một đối tượng trống

Ứng dụng. js

import React from "react";

class App extends React.Component {

  handleRefresh = [] => {
    // by calling this method react re-renders the component
    this.setState[{}];  };

  render[] {
    return [
      
        {Math.random[]}
        Refresh component      
    ];
  }
}

export default App;

Bằng cách gọi đây. setState[] với một đối tượng trống phản ứng sẽ nghĩ rằng một cái gì đó được cập nhật ở trạng thái và thành phần cần được làm mới [hoặc kết xuất lại] với giao diện người dùng mới

Để làm mới một trang trong React, bạn không cần React, chỉ cần JavaScript đơn giản. Bạn cần gọi window.location.reload để kích hoạt tải lại toàn bộ trang

export const App = [] => {
    const refresh = [] => window.location.reload[true]

    return [
        Refresh
    ]
}

Chức năng làm mới trong React

Đã sao chép vào khay nhớ tạm. Sao chép

Điều này hoạt động chính xác như một nút làm mới. Lưu ý rằng chúng tôi đã chuyển true cho phương thức reload. Đây là một tính năng không chuẩn chỉ được hỗ trợ trong Firefox. Nó yêu cầu trình duyệt bỏ qua bộ đệm và thực hiện tải lại lực lượng

Việc sử dụng tham số boolean cho location.reload bị bỏ qua đối với tất cả các trình duyệt khác, ngoại trừ Firefox

Điều tương tự cũng có thể được thực hiện bằng cách sử dụng trình xử lý nội tuyến onClick theo cách sau

 window.location.reload[true]}>Refresh

Đã sao chép vào khay nhớ tạm. Sao chép

Tuy nhiên, trong hầu hết các trường hợp, bạn có thể chỉ muốn cập nhật trạng thái của mình thay vì thực hiện tải lại toàn bộ trang. Điều này dẫn đến trải nghiệm người dùng tốt hơn. Do đó, chỉ sử dụng giải pháp trên khi bạn đặc biệt muốn tải lại toàn bộ trang