Cách thêm cuộn vô hạn trong React.js
Bạn đã bao giờ bắt 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? Đâ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 kỹ thuật phổ biến giúp giảm số lần tải trang. Nó cũng có thể mang lại trải nghiệm người dùng mượt mà hơn, đặc biệt là trên thiết bị di động.
Có một số cách khác nhau để bạn có thể triển khai cuộn vô hạn trong React.js. Một cách là sử dụng một thư viện như react -finity-scroll-component. Thư viện này cung cấp một thành phần sẽ kích hoạt một sự kiện khi người dùng cuộn xuống cuối trang. Sau đó, bạn có thể sử dụng sự kiện này để tải thêm nội dung.
Một cách khác để thực hiện cuộn vô hạn là sử dụng các chức năng có sẵn mà React cung cấp. Một trong những hàm như vậy là “componentDidMount” mà React gọi khi một thành phần được mount lần đầu tiên.
Bạn có thể sử dụng chức năng này để tải lô dữ liệu đầu tiên và sau đó sử dụng chức năng “componentDidUpdate” để tải thêm dữ liệu khi người dùng cuộn xuống. Bạn cũng có thể sử dụng React hook để thêm tính năng cuộn vô hạn.
Để sử dụng react-vô hạn-scroll-component, trước tiên bạn cần cài đặt nó bằng npm:
npm install react-infinite-scroll-component Sau đó, bạn có thể nhập nó vào thành phần React của mình.
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ã này bắt đầu bằng cách nhập React và thành phần InfiniteScroll từ thư viện Reac-infinite-scroll-component. Sau đó, nó tạo một thành phần có trạng thái và khởi tạo trạng thái bằng một ô trống mặt hàng mảng và một cóThêm cờ được đặt thành đúng.
Trong phương thức vòng đời componentDidMount, bạn gọi fetchData phương pháp với một trang tham số của 1. Phương thức fetchData thực hiện một lệnh gọi API để lấy một số dữ liệu. Ví dụ này chỉ tạo ra một số dữ liệu giả. Sau đó, nó tạo ra một mảng gồm 100 mục.
Nếu tham số trang là 100, không còn mục nào nữa, vì vậy hãy đặt cờ hasMore thành false. Điều này sẽ ngăn thành phần InfiniteScroll thực hiện thêm các lệnh gọi API. Cuối cùng, thiết lập trạng thái bằng cách sử dụng dữ liệu mới.
Phương thức kết xuất sử dụng thành phần InfiniteScroll và chuyển vào một số đạo cụ. dataLength prop được đặt thành độ dài của mảng items. Chỗ dựa tiếp theo được đặt thành phương thức fetchData. Giá đỡ hasMore được đặt thành cờ hasMore. Bộ nạp prop làm cho thành phần hiển thị nội dung của nó dưới dạng chỉ báo tải. Tương tự như vậy, nó sẽ hiển thị endMessage prop dưới dạng thông báo khi tất cả dữ liệu đã tải xong.
Ngoài ra còn có các đạo cụ khác mà bạn có thể chuyển đến thành phần InfiniteScroll, nhưng đây là những đạo cụ bạn sẽ sử dụng thường xuyên nhất.
Sử dụng chức năng tích hợp
React cũng có một số phương thức tích hợp mà bạn có thể sử dụng để triển khai cuộn vô hạn.
Phương pháp đầu tiên là thành phầnDidUpdate. React gọi phương thức này sau khi một thành phần được cập nhật. Bạn có thể sử dụng phương pháp này để kiểm tra xem người dùng đã cuộn xuống cuối trang chưa và nếu có thì hãy tải thêm dữ liệu.
phương pháp thứ hai là cuộn, mà React gọi khi người dùng cuộn. Bạn có thể sử dụng phương pháp này để theo dõi vị trí cuộn. Nếu người dùng đã cuộn đến cuối trang, thì bạn có thể tải thêm dữ liệu.
Đây là một ví dụ về cách bạn có thể sử dụng các phương pháp này để triển khai 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 móc useState và useEffect để quản lý trạng thái và tác dụng phụ.
Trong móc useEffect, nó gọi phương thức tìm nạp dữ liệu với trang hiện tại. Phương thức fetchData thực hiện lệnh gọi API để lấy một số dữ liệu. Trong ví dụ này, bạn chỉ đang tạo một số dữ liệu giả để chứng minh kỹ thuật.
Vòng lặp for điền vào mảng newItems 100 số nguyên. Nếu tham số trang là 100, hãy đặt cờ hasMore thành false. Điều này sẽ ngăn thành phần InfiniteScroll thực hiện thêm các lệnh gọi API. Cuối cùng, thiết lập trạng thái với dữ liệu mới.
Phương thức onScroll theo dõi vị trí cuộn. Nếu người dùng đã cuộn đến cuối trang, bạn có thể tải thêm dữ liệu.
Móc useEffect thêm một trình xử lý sự kiện cho sự kiện cuộn. Khi sự kiện cuộn kích hoạt, nó gọi phương thức onScroll.
Có những ưu và nhược điểm khi sử dụng cuộn vô hạn. Nó có thể giúp cải thiện giao diện người dùng, mang lại trải nghiệm mượt mà hơn, đặc biệt là trên thiết bị di động. Tuy nhiên, nó cũng có thể dẫn đến việc người dùng thiếu nội dung vì họ có thể không cuộn xuống đủ xa để xem nội dung đó.
Điều quan trọng là phải cân nhắc những ưu và nhược điểm của kỹ thuật cuộn vô hạn trước khi triển khai nó trên trang web hoặc ứng dụng của bạn.
Thêm cuộn vô hạn vào trang web hoặc ứng dụng React.js của bạn có thể giúp cải thiện trải nghiệm người dùng. Với cuộn vô hạn, người dùng không cần phải bấm để xem thêm nội dung. Sử dụng Infinite Scroll trong ứng dụng React.js của bạn cũng có thể giúp giảm số lần tải trang, điều này có thể cải thiện hiệu suất.
Bạn cũng có thể dễ dàng triển khai miễn phí ứng dụng React của mình lên các trang Github.