實戰：React全家桶仿PC端《快看漫畫》(部分)

時間 2019-12-02

標籤實戰 react 全家部分欄目 React 简体版

原文原文鏈接

前言

最近在學習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出漫畫信息，再將對應漫畫項移除。react

部分代碼：

對應漫畫'關注/取消關注'按鈕顯示：

{
    //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));
    }
};
複製代碼