React-全家桶仿簡書部分功能

Jinkey 發布于2019-08-23 13:40 / 1251人閱讀

摘要：全家桶仿簡書部分功能前言前段時間接觸了下，一直想要自己寫一個小練手。在眾多應用中，考慮之后選擇了簡書來模仿，這段時間就利用了工作之余的時間進行開發。在這里簡單敘述一下我仿簡書部分布局以及功能實現的過程，僅做學習用途。

React-全家桶仿簡書部分功能 前言

前段時間接觸了下React，一直想要自己寫一個小Demo練手。在眾多應用中，考慮之后選擇了簡書來模仿，這段時間就利用了工作之余的時間進行開發。主要用到了React+React-Router4+Redux+Redux-thunk+Immutable。然而寫文章也是可以復盤一下自己的開發過程，對自己還是受益良多的。在這里簡單敘述一下我仿簡書部分布局以及功能實現的過程，僅做學習用途。

技術棧以及組件庫

Redux：解決組件數據共享問題

Redux-thunk：Redux中間件，允許action可以返回函數

Immutable：保證數據的不可變

Loadable：異步加載組件

Transition-group：動畫實現

styled-components：組件化樣式

axios：這個大家都知道吧-_-

數據結構：

文件結構

┣━ build   // 打包文件
┣━ public   // 打包文件
  ┣━ api   //假數據統一存儲
    ┣━ detail.json   //文章頁數據
    ┣━ headerList.json   //頭部熱門搜索數據
    ┣━ home.json   //首頁統一數據
    ┣━ homeList.json   //首頁加載更多文章數據
    ┣━ login.json   //登錄數據
┣━ src //開發目錄
  ┣━ common   //公用組件
    ┣━ header   //頭部組件
      ┣━ store   //Redux文件
        ┣━ actionCreators.js   //action創建
        ┣━ constants.js   //action.type常量文件
        ┣━ index.js   //入口文件
        ┣━ reducer.js   //reducer處理
      ┣━ store   //UI組件
      ┣━ store   //頭部樣式
  ┣━ pages   //頁面
    ┣━ detail   //文章頁
      ┣━ ...
    ┣━ detail   //首頁
      ┣━ ...
    ┣━ detail   //登錄頁
      ┣━ ...
    ┣━ detail   //寫文章
      ┣━ ...
  ┣━ statics   //靜態文件
    ┣━ ...
  ┣━ store   //Redux數據
    ┣━ ...
  ┣━ App.js   //入口及路由
  ┣━ index.js   //js文件入口
  ┣━ style.js   //全局樣式
┣━ .gitignore   //git忽略上傳文件
┣━ package.json   //模塊的描述文件
┣━ README.md   //說明文件
┣━ yarn.lock   //模塊的描述文件

效果預覽

實現主要幾個功能

登錄退出及未登錄攔截

用戶在已登錄狀態和未登錄狀態的界面是不同的，有些功能指定要在登錄狀態下才會有，因此會產生狀態的切換，在一般小項目中我們可以使用localStorage來存儲狀態，也可以用Redux，這里我所有的數據都是使用Redux進行數據管理，在進入寫文章頁面調用了login組件下Redux-login狀態進行判斷,登錄攔截。

class Write extends PureComponent {
  render() {
    const { loginStatus } = this.props;
    console.log(loginStatus)
    if(loginStatus) {
      return (
        寫文章
      )
    }else{
      return 
    }
  }
  componentDidMount() {
  }
}

const mapState = (state) => ({
  loginStatus: state.getIn(["login","login"])
});

點擊加載更多文章

這里在Redux中儲存一個Page：1的數據，在每次點擊加載更多文章時page+1,然后對page進行改變。使得每次點擊page+1。

頭部熱門搜索獲取及切換

在Home組件獲取到數據后儲存到Redux中,然后取出前十條數據，儲存到常量中。通過點擊事件對數據進行切換,同時出發動畫效果。(由于使用了immutable,所以要在循環的數據前將數據轉換為不同JS數組)

const { focused, list, page, mouseIn, totalPage, handleMouseEnter, handleMouseLeave, hanleChangePage } = this.props;
    const newList = list.toJS();  //因為list目前是immutable數組,所以我們要將他轉換為普通JS數組,toJS是immutable內置方法
    const pageList = [];

    if(newList.length){
      for(let i = (page -1) * 10; i < page * 10; i++){
        pageList.push(
          {newList[i]}
        )
      }
    }

    if(focused || mouseIn) {
      return (
        
          
            熱門搜索
             hanleChangePage(page,totalPage,this.spitIcon)}>
               {this.spitIcon = icon}} className="iconfont spin">
              換一批
            
          
          
            {pageList}
          
        
      )
    }else {
      return null;
    }
  }

文章頁數據

文章頁數據的獲取使用的動態路由，通過路由傳參將當前所點擊文章的ID傳遞到文章頁。

同時也可以通過this.props.location.search 獲取url參數。

這里注意由于使用了異步組件，路由的文件引入路徑要做修改import Detail from "./pages/detail/loadable";，不然獲取不到路由所傳遞的參數。

class Detail extends PureComponent {
//dangerouslySetInnerHTML是當數據內容是HTML時使用,不會被轉義為字符串
  render() {
    const { title, content } = this.props;
    return (
      
        {title}
        
      
    )
  }

  componentDidMount() {
    let idPage = this.props.location.search;
    const id = idPage.substring(4)
    this.props.getDetail(id);
    //使用動態路由獲取idthis.props.getDetail(this.props.match.params.id);
  }
}

結語

由于工作比較忙,所以只做了一些基礎的小功能。后面還有很多有待完善，等空余時間多了出來回慢慢進行完善。由于剛接觸React,所以做的不太好，不足之處還請指教。

如果你初次接觸到React，或者對Demo感興趣的話可以查看我GitHub源碼

如果對你有幫助，可以star我的項目給我一點點的鼓勵，也希望有志同道和的可以加入一起討論，我也會第一時間幫你解答。

云服務器 GPU云服務器桶仿簡書仿簡書家用服務器全家使用桶仿某魚

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99364.html

Vue2.0全家桶仿騰訊課堂（移動端）

摘要：最近在學習覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正持續更新中。的使用的狀態存儲是響應式的。需要注意類似于，不同在于提交的是，而不是直接變更狀態。最近在學習vue,覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正（持續更新中）。效果預覽 ?在線預覽：點我！！！在線預覽，手機瀏覽或切換瀏覽器移動調試 ?源碼地址：Github??求你的小星星～...

zorro 2019-08-29 12:48 評論0 收藏0
Vue2.0全家桶仿騰訊課堂（移動端）

摘要：最近在學習覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正持續更新中。的使用的狀態存儲是響應式的。需要注意類似于，不同在于提交的是，而不是直接變更狀態。最近在學習vue,覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正（持續更新中）。效果預覽 ?在線預覽：點我！！！在線預覽，手機瀏覽或切換瀏覽器移動調試 ?源碼地址：Github??求你的小星星～...

anquan 2019-08-01 17:01 評論0 收藏0
前端--通用知識 - 收藏集 - 掘金

摘要：閉包有多重前端知識點大百科全書前端掘金，，技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 Vue全家桶實現還原豆瓣電影wap版 - 掘金用vue全家桶仿寫豆瓣電影wap版。最近在公司項目中嘗試使用vue，但奈何自己初學水平有限，上了vue沒有上vuex，開發過程特別難受。于是玩一玩本項目，算是對相關技術更加熟悉了。原計劃仿寫完所有頁面，礙于豆瓣的接口API有限，實現頁面也有...

王笑朝 2019-08-20 16:57 評論0 收藏0
2017-06-23 前端日報

摘要：前端日報精選大前端公共知識梳理這些知識你都掌握了嗎以及在項目中的實踐深入貫徹閉包思想，全面理解閉包形成過程重溫核心概念和基本用法前端學習筆記自定義元素教程阮一峰的網絡日志中文譯回調是什么鬼掘金譯年，一個開發者的好習慣知乎專 2017-06-23 前端日報精選大前端公共知識梳理：這些知識你都掌握了嗎？Immutable.js 以及在 react+redux 項目中的實踐深入貫徹閉包思...

Vixb 2019-08-20 17:28 評論0 收藏0
vue全家桶仿某魚部分布局以及功能實現

摘要：在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做學習用途。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，也完全能夠為復雜的單頁面應用提供驅動。可以進行確認收貨后刪除訂單。前言每次寫文章時，總會覺得比寫代碼難多了，可能這就是我表述方面的不足吧，然而寫文章也是可以復盤一下自己的開發過程，對自己還是受益良多的。在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做...

dreamGong 2019-08-23 11:01 評論0 收藏0