前言
最近在學習React，為了在學習的同時鞏固一下所學內容，決定仿一個《快看漫畫》的網頁；由於學習進度及時間問題，我只實現了網站的部分功能：登入與退出、對應漫畫關注/取關、關鍵詞搜尋等。
專案寫了一個星期，寫的時候覺著自己寫了好多呀；寫完之後就發現怎麼才這麼點。。。但是就這麼一點點我也厚著臉皮寫文章了，希望能給新手起到參考作用；同時虛心向各路大佬請教。
——by不會寫文章的前端小白
詳細介紹
1. 技術棧與元件庫
- react-reudx: 解決元件間通訊
- redux-thunk: 非同步操作中介軟體
- reac-router-dom: SPA單頁面開發
- axios: 非同步獲取資料
- react-transition-group: 實現簡單動畫樣式
- immutable.js: 讓資料型別不可變
- styled-components: 樣式編寫庫
2. 目錄列表
├── ...
├── ...
├── ...
├── public
│ ├── api // 模擬資料存放目錄
├── src // 開發目錄
│ ├── common // 公共元件
│ ├── pages // 頁面
│ │ ├── detail // 詳情頁
│ │ ├── home // 首頁
│ │ ├── login // 登入頁
│ ├── statics // 靜態圖片資源
│ ├── store // 總儲存倉庫目錄
├── App.js
├── index.js
├── style.js // 樣式檔案
├── ...
├── ...
├── ...
複製程式碼3. 功能介紹
'登入/退出' 功能:
通過設定登入狀態(true or false)來判斷是否登入，同時通過ref屬性取到使用者名稱，傳給User元件將使用者名稱渲染到頁面。
'關注/取消關注' 功能：
點選關注時獲取相應漫畫id並集合成陣列；點選取消關注時獲取當前項漫畫id，通過indexOf找到對應id後dispatch出漫畫資訊，再將對應漫畫項移除。
對應漫畫'關注/取消關注'按鈕顯示：
{
//this.followItem獲取當前已關注列表，this.list.id為當前項漫畫id
isLogin && this.checkFollowed(this.followItem, this.list.id) ?
<Follow
className="btn other"
onClick={() => cancleFollowed(this.list.id, this.followItem)}
>
取消關注
</Follow> :
<Follow
className="btn other"
onClick={() => followCartoon(this.props.list, this.list.id, isLogin)}
>
關注
</Follow>
}
----------------------------------------------------------------------
checkFollowed(newList, id) {
const arr = [];
for(let i = 0; i < newList.length; i ++) {
// 集合已關注漫畫項id
arr.push(newList[i].id)
}
// 若當前項漫畫id存在於id集合中 返回true 顯示'取消關注'
if(arr.indexOf(id) >= 0) return true;
}
複製程式碼點選'取消關注'移除對應漫畫項：
// 派發action，傳入當前項漫畫id及'已關注'漫畫陣列
cancleFollowed(id, list) {
dispatch(actionCreators.cancleFollowed(id, list));
}
-----------------------------------------------------------------------------
export const cancleFollowed = (id, list) => {
return dispatch => {
const arr = [];
for (let i = 0; i < list.length; i++) {
// 判斷當前項漫畫是否存在於'已關注'列表
// 若有則移除當前項並將新列表陣列派發給reducer
// reducer接受新列表陣列並更新state，完成漫畫取關
if (list[i].id !== id) {
arr.push(list[i]);
}
}
dispatch(searchFollowed(arr));
}
};
複製程式碼關鍵詞搜尋功能：
可以通過漫畫名及作者來搜尋相應漫畫（當然都是假資料），頁面上顯示的漫畫我都做了其他的我就沒做了哈。
這部分邏輯與'關注/取關'相似，也是通過獲取input的value值，用indexOf()方法判斷是否存在於關鍵詞列表裡(事先寫好的假資料，包括作品名和作者)；再dispatch出對應項id，根據id集合對應漫畫項資訊，然後就可以渲染到介面上。
結束語
寫這篇文章的目的就是記錄一下我的學習情況，鼓勵自己繼續往下學，還想要整理一下我的思路（其實挺亂的吧），對這個專案感興趣的小夥伴可以去檢視我的專案地址（貼在下面啦）。
本人前端新手，希望各位小(da)夥(lao)伴多給我一點意見，感謝！
歡迎交流٩(๑❛ᴗ❛๑)۶
微信：LYX0_0TXRY
QQ：295510545
附上我的專案地址：Lesta