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 kỹ thuật phổ biến có thể giúp duyệt lượng lớn nội dung dễ dàng hơn. Nó cũng có thể mang lại trải nghiệm mượt mà hơn cho người dùng, đặc biệt là trên thiết bị di động.
Bạn có thể triển khai tính năng cuộn vô hạn trong React theo một số cách khác nhau. Đầu tiên là sử dụng thư viện như thành phần Reac-infinite-scroll. Thành phần của thư viện này sẽ kích hoạt một sự kiện bất cứ khi nào người dùng cuộn xuống cuối trang. Sau đó, bạn có thể sử dụng sự kiện này làm gợi ý để tải thêm nội dung.
Một cách khác để triển khai tính năng cuộn vô hạn trong React là thông qua các hàm tích hợp sẵn của nó. Một hàm như vậy là “comComponentDidMount”, mà React gọi khi nó gắn kết một thành phần 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, theo sau là chức năng “comComponentDidUpdate” để tải dữ liệu tiếp theo khi người dùng cuộn xuống.
Bạn cũng có thể sử dụng móc React để thêm tính năng cuộn vô hạn.
Có một số cách để sử dụng thành phần Reac-infinite-scroll.
Mục lục
Cài đặt thành phần Reac-infinite-scroll
Để bắt đầu sử dụng, trước tiên bạn cần cài đặt nó qua npm:
npm install react-infinite-scroll-component --save
Nhập thành phần Reac-infinite-scroll vào React
Sau khi cài đặt, bạn cần nhập thư viện cuộn vô hạ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 thành phần React và InfiniteScroll từ thư viện thành phần Reac-infinite-scroll. Sau đó, nó tạo một thành phần có trạng thái và khởi tạo nó bằng một mảng các mục trống và cờ hasMore được đặt thành True.
Đặt thông số
Trong phương thức vòng đời thành phầnDidMount, bạn phải gọi phương thức tìm nạp dữ liệu với tham số trang được đặt thành 1. Phương thức tìm nạp dữ liệu thực hiện lệnh gọi API để tìm nạp dữ liệu. Ví dụ về cuộn phản ứng vô hạn này tạo ra một số dữ liệu giả và tạo ra một mảng gồm 100 mục.
Khi tham số trang đạt tới 100, do không còn mục nào tồn tại nên bạn có thể đặt cờ hasMore thành Sai. Điều này ngăn thành phần InfiniteScroll thực hiện các lệnh gọi API tiếp theo. Cuối cùng, đặt trạng thái bằng dữ liệu mới.
Phương thức kết xuất sử dụng thành phần InfiniteScroll và truyền vào một số đạo cụ. Prop dataLength được đặt thành độ dài của mảng vật phẩm. Prop sau đây được đặt thành phương thức FetchData. Prop hasMore được đặt bằng cờ hasMore.
Loader 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ị prop endMessage dưới dạng một thông báo khi tất cả dữ liệu đã được tải xong.
Bạn có thể chuyển các props khác cho thành phần InfiniteScroll, nhưng đây là những props bạn sẽ sử dụng thường xuyên nhất.
Sử dụng các hàm tích hợp
React cũng có một số phương thức tích hợp sẵn mà bạn có thể sử dụng để triển khai InfiniteScroll.
Phương thức đầu tiên là thành phầnDidUpdate. React gọi phương thức này sau khi nó cập nhật một thành phần. 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 hay chưa. Nếu có, nó sẽ tải nhiều dữ liệu hơn.
Phương thức thứ hai là cuộn, 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. Bạn có thể tải thêm dữ liệu nếu người dùng đã cuộn xuống cuối trang.
Đây là ví dụ cuộn vô hạn React chỉ cho bạn cách sử dụng các phương thức này:
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ác hook useState và useEffect để quản lý trạng thái và các tác dụng phụ.
Trong hook useEffect, nó gọi phương thức getData với trang hiện tại. Phương thức FetchData thực hiện lệnh gọi API để tìm nạp dữ liệu. Trong ví dụ này, bạn chỉ tạo một số dữ liệu giả để minh họa kỹ thuật này.
Vòng lặp for điền vào mảng newItems với 100 số nguyên. Nếu tham số trang là 100, nó sẽ đặt cờ hasMore thành Sai. Điều này ngăn thành phần cuộn vô hạn thực hiện các lệnh gọi API tiếp theo.
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. Bạn có thể tải thêm dữ liệu nếu người dùng cuộn xuống cuối trang.
Hook useEffect thêm 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 của React. Nó 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, điều này cũng có thể dẫn đến việc người dùng bỏ lỡ nội dung vì họ không thể cuộn xuống đủ xa để xem nội dung đó.
Điều cần thiết là phải cân nhắc ư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.
Việc thêm cuộn vô hạn vào trang web hoặc ứng dụng React.js của bạn có thể cải thiện trải nghiệm người dùng. Với khả năng cuộn vô hạn, người dùng không cần phải nhấp vào để xem thêm nội dung. Sử dụng Infinite Scroll trong ứng dụng React.js của bạn có thể giảm số lần tải trang, giúp cải thiện hiệu suất hơn nữa.
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.
