Cách thêm cuộn vô hạn trong React.js

Bạn đã bao giờ gặp một trang web hoặc ứng dụng tải và hiển thị nhiều nội dung hơn khi bạn cuộn chưa? Đây là những gì chúng tôi gọi là cuộn vô hạn.

Cuộn vô hạn là một phương pháp ngày càng phổ biến có thể tạo điều kiện thuận lợi cho việc xem xét khối lượng dữ liệu đáng kể và nâng cao trải nghiệm tổng thể của người dùng, đặc biệt là trên các thiết bị di động.

Triển khai Infinite Scroll trong React.js

Có một số phương pháp có sẵn để triển khai tính năng cuộn vô hạn trong ứng dụng React, một trong những phương pháp đó liên quan đến việc sử dụng thư viện có tên Reac-infinite-scroll-comComponent. Thành phần của thư viện cụ thể này giám sát hành vi cuộn của người dùng và phát ra sự kiện khi họ đến cuối trang. Bằng cách tận dụng sự kiện này, bạn có thể bắt đầu tải nội dung bổ sung.

Để kết hợp phiên bản cuộn vô hạn trong ứng dụng React, người ta có thể tận dụng các chức năng vốn có do khung cung cấp. Trong số các tính năng này có phương thức “comComponentDidMount”, được React kích hoạt khi khởi tạo một thành phần.

Bạn có thể sử dụng chức năng này để tải tập dữ liệu ban đầu và sau đó sử dụng phương thức “comComponentDidUpdate” để tìm nạp thông tin bổ sung khi người dùng cuộn xuống sâu hơn trên trang.

React Hook có thể được sử dụng để triển khai chức năng cuộn vô hạn trong ứng dụng của bạn, mang lại trải nghiệm người dùng liền mạch khi nội dung tải liên tục mà không bị gián đoạn.

Sử dụng Thư viện thành phần cuộn phản ứng vô hạn

Một số cách tiếp cận có thể được sử dụng khi sử dụng Thành phần cuộn vô hạn React.

Cài đặt thành phần Reac-infinite-scroll

Để bắt đầu sử dụng, bước đầu tiên bao gồm việc cài đặt nó thông qua Trình quản lý gói nút (npm).

 npm install react-infinite-scroll-component --save 

Nhập thành phần Reac-infinite-scroll vào React

Sau hành động gắn kết, cần kết hợp thư viện cuộn vô hạn trong phần tử React của bạn.

 import React from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
 
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      items: [],
      hasMore: true
    }
  }

  componentDidMount() {
    this.fetchData(1)
  }
 
  fetchData = (page) => {
    const newItems = []
 
    for (let i = 0; i < 100; i\+\+) {
      newItems.push(i )
    }
 
    if (page === 100) {
      this.setState({ hasMore: false })
    }
 
    this.setState({ items: [...this.state.items, ...newItems] })
  }
 
  render() {
    return (
      <div>
        <h1>Infinite Scroll</h1>
        <InfiniteScroll
          dataLength={this.state.items.length}
          next={this.fetchData}
          hasMore={this.state.hasMore}
          loader={<h4>Loading...</h4>}
          endMessage={
            <p style={{ textAlign: 'center' }}>
              <b>Yay! You have seen it all</b>
            </p>
          }
        >
          {this.state.items.map((item, index) => (
            <div key={index}>
              {item}
            </div>
          ))}
        </InfiniteScroll>
      </div>
    )
  }
}
 
export default App

Mã nhập cả thành phần React và InfiniteScroll từ thư viện thành phần Reac-infinite-scroll, sau đó tạo thành phần có trạng thái. Trạng thái ban đầu của thành phần bao gồm một mảng “items” trống và cờ “hasMore” được đặt thành true.

Đặt tham số

Trong phương thức vòng đời ComponentDidMount , bắt buộc phải gọi hàm fetchData với tham số page được đặt thành 1. Thủ tục fetchData thực hiện yêu cầu API để truy xuất dữ liệu. Phiên bản cuộn vô hạn React này tạo ra dữ liệu hư cấu và xây dựng một mảng chứa một trăm phần tử.

Khi đạt được giá trị 100 cho tham số trang, cho biết rằng không có mục bổ sung nào, bạn nên đặt cấu hình cờ “hasMore” là sai, do đó ngăn chặn mọi lệnh gọi tiếp theo của thành phần InfiniteScroll. Sau đó, việc cập nhật trạng thái với tập dữ liệu mới thu được sẽ là một hành động hiệu quả.

Phương thức render tận dụng thành phần InfiniteScroll , cung cấp một số thuộc tính nhất định làm đối số. Cụ thể, thuộc tính dataLength được gán giá trị tương đương với độ dài của mảng item. Ngoài ra, hàm fetchData đóng vai trò như một thuộc tính được cung cấp khác. Cuối cùng, thuộc tính hasMore được đặt bằng giá trị của cờ hasMore .

Thuộc tính trình tải hoạt động bằng cách hiển thị nội dung của thành phần dưới dạng chỉ báo tải. Tương tự, sau khi hoàn tất quá trình tải dữ liệu, thuộc tính endMessage được hiển thị dưới dạng thông báo trong thành phần.

Khi sử dụng thành phần InfiniteScroll, việc sử dụng một số đạo cụ nhất định thường được sử dụng là điều bình thường. Tuy nhiên, người ta cũng có thể cung cấp thêm đạo cụ nếu cần.

Sử dụng các hàm có sẵn

React cung cấp một tập hợp các chức năng vốn có cho phép triển khai InfiniteScroll thông qua việc sử dụng các phương thức sẵn có của nó.

Phương thức vòng đời ComponentDidUpdate trong React được framework gọi ra sau khi cập nhật một thành phần. Cách tiếp cận theo hướng sự kiện này cho phép các nhà phát triển triển khai logic tùy chỉnh để phát hiện thời điểm cần tìm nạp dữ liệu mới dựa trên vị trí cuộn của người dùng. Về bản chất, phương pháp này đóng vai trò như một cơ chế để xác định xem có nên tải nội dung bổ sung dưới ngưỡng khung nhìn hiện tại hay không khi phát hiện rằng người dùng đã xem đến cuối phần hiển thị của trang.

React cung cấp một cơ chế tích hợp có tên scroll, được kích hoạt bởi hành động cuộn của người dùng, cho phép các nhà phát triển giám sát và duy trì nhận thức về vị trí cuộn hiện tại trong ứng dụng của họ. Cách tiếp cận theo hướng sự kiện này cho phép tải động nội dung bổ sung khi người dùng đến cuối phạm vi trang hiển thị, đảm bảo trải nghiệm duyệt web tối ưu.

Mã được cung cấp minh họa một ví dụ về việc sử dụng các kỹ thuật nói trên trong ngữ cảnh của ứng dụng React, đặc biệt liên quan đến việc triển khai chức năng cuộn vô hạn.

 import React, {useState, useEffect} from 'react'
 
function App() {
  const [items, setItems] = useState([])
  const [hasMore, setHasMore] = useState(true)
  const [page, setPage] = useState(1)
 
  useEffect(() => {
    fetchData(page)
  }, [page])
 
  const fetchData = (page) => {
    const newItems = []
 
    for (let i = 0; i < 100; i\+\+) {
      newItems.push(i)
    }
 
    if (page === 100) {
      setHasMore(false)
    }
 
    setItems([...items, ...newItems])
  }
 
  const onScroll = () => {
    const scrollTop = document.documentElement.scrollTop
    const scrollHeight = document.documentElement.scrollHeight
    const clientHeight = document.documentElement.clientHeight
 
    if (scrollTop \+ clientHeight >= scrollHeight) {
      setPage(page \+ 1)
    }
  }
 
  useEffect(() => {
    window.addEventListener('scroll', onScroll)
    return () => window.removeEventListener('scroll', onScroll)
  }, [items])
 
  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>
          {item}
        </div>
      ))}
    </div>
  )
}
 
export default App 

Mã này sử dụng cả hai hook useState và useEffect để tạo điều kiện thuận lợi cho việc quản lý trạng thái cũng như triển khai các tác dụng phụ mong muốn trong ứng dụng.

Trong phạm vi của hook useEffect , lần lặp hiện tại của hàm sẽ gọi phương thức fetchData bằng cách chuyển trạng thái hiện tại của phân trang dưới dạng tham số. Sau đó, phương thức đã nói sẽ thực hiện một yêu cầu HTTP để lấy thông tin từ nguồn bên ngoài. Chỉ nhằm mục đích minh họa, trong trường hợp này, chúng tôi đang mô phỏng việc tạo ra một số dữ liệu giả định để minh họa cho khái niệm đang được thảo luận.

Vòng lặp for lặp đi lặp lại việc nối thêm một loạt phần tử vào mảng newItems , tăng dần giá trị cho đến khi đạt tới một trăm. Đồng thời, nếu giá trị được xác định trước của tham số page vượt quá một trăm, thì biến boolean hasMore được đặt thành false, do đó sẽ tạm dừng mọi yêu cầu bổ sung được thực hiện bởi cơ chế cuộn vô hạn.

Cuối cùng, thiết lập trạng thái hiện tại dựa trên thông tin cập nhật.

Phương thức onScroll duy trì bản ghi về vị trí cuộn hiện tại và khi đến cuối trang, nó sẽ tự động tải nội dung hoặc dữ liệu bổ sung để đáp ứng tương tác tiếp theo của người dùng với giao diện.

Việc sử dụng useEffect Hook tạo điều kiện thuận lợi cho việc bổ sung trình nghe cho sự kiện cuộn. Để phản hồi sự kiện nói trên, phương thức được chỉ định là onScroll sẽ được gọi.

Ưu và nhược điểm của Infinite Scroll trong React

Việc triển khai cuộn vô hạn của React thể hiện cả ưu điểm và nhược điểm. Một mặt, tính năng này nâng cao giao diện người dùng tổng thể bằng cách cung cấp trải nghiệm điều hướng liền mạch, đặc biệt trên nền tảng di động nơi không gian màn hình bị hạn chế. Ngược lại, tồn tại nguy cơ tiềm ẩn là người dùng có thể bỏ qua nội dung nằm ngoài quan điểm ban đầu của họ vì họ có thể chưa cuộn đủ để xem tất cả các mục.

Điều quan trọng là phải đánh giá cẩn thận những ưu điểm và nhược điểm liên quan đến việc sử dụng kỹ thuật cuộn vô hạn trong thiết kế web, vì cách tiếp cận này có thể có ý nghĩa quan trọng đối với trải nghiệm và mức độ tương tác của người dùng.

Cải thiện trải nghiệm người dùng với tính năng cuộn vô hạn trong React.js

Việc kết hợp cơ chế cuộn vô hạn trong ứng dụng React.js có thể nâng cao trải nghiệm người dùng tổng thể bằng cách loại bỏ nhu cầu nhấp chuột bổ sung để truy cập nhiều nội dung hơn. Cách tiếp cận này cũng có khả năng làm giảm tổng số yêu cầu trang được thực hiện, từ đó nâng cao hiệu quả và hiệu suất của ứng dụng.

Triển khai ứng dụng React lên Trang GitHub là một quá trình đơn giản và không cần đầu tư tiền bạc.