ReactJS - 分頁：初學者指南

你好，未來的React開發者們！今天，我們將踏上一段令人興奮的旅程，探索ReactJS中的分頁世界。別擔心你從未編過程序——我將成為你的友好指南，一步步解釋一切。所以，來一杯咖啡，我們一起來看看吧！

什麼是分頁？

在我們投入代碼之前，讓我們先了解什麼是分頁。想像你正在讀一本書。書不是一次性展示所有頁面，而是被分成了易於管理的部分。這正是分頁對你的網頁內容所做的！

在網頁開發中，分頁是一種將大量數據分成更小、更易於管理部分的技术。這就像一本有多個頁面的書，每個頁面只顯示內容的一部分。

在React中為什麼要使用分頁？

現在你可能會想，"我為什麼要麻煩使用分頁呢？" 來，讓我給你講一個小故事。

從前有一個React應用程序，試圖在單一頁面上顯示10,000個項目。這個可憐的應用程序掙扎著，嘎吱作響，最終崩潰，讓用戶感到挫敗。但隨後，一位名叫分頁的英雄來救援，將那些10,000個項目分成整齊、易於管理的每頁10個項目的頁面。應用程序運行順暢，用戶感到滿意，從此過上幸福的生活。

這個故事的寓意是？分頁有助於：

1. 改進性能
2. 提升用戶體驗
3. 讓導航變得更容易

在React中開始使用分頁

現在我們理解了"為什麼"，讓我們來動手寫一些代碼吧！

步驟1：設定專案

首先，我們需要創建一個新的React專案。如果你還沒有，請在你的電腦上安裝Node.js和npm（Node包管理器）。然後，打開你的終端並運行以下命令：

npx create-react-app react-pagination-demo
cd react-pagination-demo
npm start

這將創建一個新的React專案並啟動開發服務器。

步驟2：安裝所需的包

在本教程中，我們將使用一個流行的分頁庫叫做react-paginate。讓我們來安裝它：

npm install react-paginate

步驟3：創建一個簡單的分頁組件

現在，讓我們在src資料夾中創建一個新文件叫做Pagination.js並添加以下代碼：

import React, { useState, useEffect } from 'react';
import ReactPaginate from 'react-paginate';

const Pagination = ({ data, itemsPerPage }) => {
const [currentItems, setCurrentItems] = useState([]);
const [pageCount, setPageCount] = useState(0);
const [itemOffset, setItemOffset] = useState(0);

useEffect(() => {
const endOffset = itemOffset + itemsPerPage;
setCurrentItems(data.slice(itemOffset, endOffset));
setPageCount(Math.ceil(data.length / itemsPerPage));
}, [itemOffset, itemsPerPage, data]);

const handlePageClick = (event) => {
const newOffset = (event.selected * itemsPerPage) % data.length;
setItemOffset(newOffset);
};

return (
<>
<div className="items-list">
{currentItems.map((item, index) => (
<div key={index}>{item}</div>
))}
</div>
<ReactPaginate
breakLabel="..."
nextLabel="next >"
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={pageCount}
previousLabel="< previous"
renderOnZeroPageCount={null}
/>
</>
);
};

export default Pagination;

讓我們來分析一下：

1. 我們導入了必要的依賴，包括react-paginate。
2. 我們創建了一個Pagination組件，它接受data和itemsPerPage作為屬性。
3. 我們使用useState钩子來管理當前項目、頁數和項目偏移量。
4. useEffect钩子計算基於當前頁面應顯示哪些項目。
5. handlePageClick函數在用戶點擊頁數時更新偏移量。
6. 我們渲染當前項目和ReactPaginate組件。

步驟4：使用分頁組件

現在，讓我們在App.js中使用我們的Pagination組件：

import React from 'react';
import Pagination from './Pagination';
import './App.css';

function App() {
const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

return (
<div className="App">
<h1>React 分頁 Demo</h1>
<Pagination data={data} itemsPerPage={10} />
</div>
);
}

export default App;

在這裡，我們創建了一個包含100個項目的數組，並將它與itemsPerPage設為10一起傳遞給我們的Pagination組件。

步驟5：添加一些樣式

讓我們添加一些基本樣式來讓我們的分頁看起來更漂亮。將以下代碼添加到你的App.css：

.App {
text-align: center;
font-family: Arial, sans-serif;
}

.items-list {
margin-bottom: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 5px;
}

li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}

li a:hover {
background-color: #ddd;
}

li.active a {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}

結論

以上就是全部内容！你剛剛在React中創建了一個簡單但有效的分頁系統。記住，分頁就像切披薩一樣——它讓你的內容更容易消化和享受。

以下是我們學到的重點：

概念	描述
分頁	一種將大量數據分成更小、更易於管理的部分的技术
react-paginate	一個提供易於使用的分頁組件的React庫
useState	一個在函數組件中管理狀態的React钩子
useEffect	一個在組件中執行副作用操作的React钩子

隨著你繼續在React的旅程中前進，你會發現許多定制和改進分頁的方法。也許你會添加搜索功能，或者也許你會創建一個更複雜的數據抓取系統。可能性無限！

記住，精通React（或任何編程技能）的關鍵是練習。所以，不要害怕嘗試這段代碼，犯錯誤，並從中學習。這是我們所有開發者成長的方式。

快樂編程，願你的React應用程序永遠完美分頁！

Credits: Image by storyset