React-全家桶仿簡(jiǎn)書(shū)部分功能

Jinkey 發(fā)布于2019-08-23 13:40 / 1262人閱讀

摘要：全家桶仿簡(jiǎn)書(shū)部分功能前言前段時(shí)間接觸了下，一直想要自己寫一個(gè)小練手。在眾多應(yīng)用中，考慮之后選擇了簡(jiǎn)書(shū)來(lái)模仿，這段時(shí)間就利用了工作之余的時(shí)間進(jìn)行開(kāi)發(fā)。在這里簡(jiǎn)單敘述一下我仿簡(jiǎn)書(shū)部分布局以及功能實(shí)現(xiàn)的過(guò)程，僅做學(xué)習(xí)用途。

React-全家桶仿簡(jiǎn)書(shū)部分功能 前言

前段時(shí)間接觸了下React，一直想要自己寫一個(gè)小Demo練手。在眾多應(yīng)用中，考慮之后選擇了簡(jiǎn)書(shū)來(lái)模仿，這段時(shí)間就利用了工作之余的時(shí)間進(jìn)行開(kāi)發(fā)。主要用到了React+React-Router4+Redux+Redux-thunk+Immutable。然而寫文章也是可以復(fù)盤一下自己的開(kāi)發(fā)過(guò)程，對(duì)自己還是受益良多的。在這里簡(jiǎn)單敘述一下我仿簡(jiǎn)書(shū)部分布局以及功能實(shí)現(xiàn)的過(guò)程，僅做學(xué)習(xí)用途。

技術(shù)棧以及組件庫(kù)

Redux：解決組件數(shù)據(jù)共享問(wèn)題

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

Immutable：保證數(shù)據(jù)的不可變

Loadable：異步加載組件

Transition-group：動(dòng)畫實(shí)現(xiàn)

styled-components：組件化樣式

axios：這個(gè)大家都知道吧-_-

數(shù)據(jù)結(jié)構(gòu)：

文件結(jié)構(gòu)

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

效果預(yù)覽

實(shí)現(xiàn)主要幾個(gè)功能

登錄退出及未登錄攔截

用戶在已登錄狀態(tài)和未登錄狀態(tài)的界面是不同的，有些功能指定要在登錄狀態(tài)下才會(huì)有，因此會(huì)產(chǎn)生狀態(tài)的切換，在一般小項(xiàng)目中我們可以使用localStorage來(lái)存儲(chǔ)狀態(tài)，也可以用Redux，這里我所有的數(shù)據(jù)都是使用Redux進(jìn)行數(shù)據(jù)管理，在進(jìn)入寫文章頁(yè)面調(diào)用了login組件下Redux-login狀態(tài)進(jìn)行判斷,登錄攔截。

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"])
});

點(diǎn)擊加載更多文章

這里在Redux中儲(chǔ)存一個(gè)Page：1的數(shù)據(jù)，在每次點(diǎn)擊加載更多文章時(shí)page+1,然后對(duì)page進(jìn)行改變。使得每次點(diǎn)擊page+1。

頭部熱門搜索獲取及切換

在Home組件獲取到數(shù)據(jù)后儲(chǔ)存到Redux中,然后取出前十條數(shù)據(jù)，儲(chǔ)存到常量中。通過(guò)點(diǎn)擊事件對(duì)數(shù)據(jù)進(jìn)行切換,同時(shí)出發(fā)動(dòng)畫效果。(由于使用了immutable,所以要在循環(huán)的數(shù)據(jù)前將數(shù)據(jù)轉(zhuǎn)換為不同JS數(shù)組)

const { focused, list, page, mouseIn, totalPage, handleMouseEnter, handleMouseLeave, hanleChangePage } = this.props;
    const newList = list.toJS();  //因?yàn)閘ist目前是immutable數(shù)組,所以我們要將他轉(zhuǎn)換為普通JS數(shù)組,toJS是immutable內(nèi)置方法
    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;
    }
  }

文章頁(yè)數(shù)據(jù)

文章頁(yè)數(shù)據(jù)的獲取使用的動(dòng)態(tài)路由，通過(guò)路由傳參將當(dāng)前所點(diǎn)擊文章的ID傳遞到文章頁(yè)。

同時(shí)也可以通過(guò)this.props.location.search 獲取url參數(shù)。

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

class Detail extends PureComponent {
//dangerouslySetInnerHTML是當(dāng)數(shù)據(jù)內(nèi)容是HTML時(shí)使用,不會(huì)被轉(zhuǎn)義為字符串
  render() {
    const { title, content } = this.props;
    return (
      
        {title}
        
      
    )
  }

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

結(jié)語(yǔ)

由于工作比較忙,所以只做了一些基礎(chǔ)的小功能。后面還有很多有待完善，等空余時(shí)間多了出來(lái)回慢慢進(jìn)行完善。由于剛接觸React,所以做的不太好，不足之處還請(qǐng)指教。如果你初次接觸到React，或者對(duì)Demo感興趣的話可以查看我GitHub源碼
如果對(duì)你有幫助，可以star我的項(xiàng)目給我一點(diǎn)點(diǎn)的鼓勵(lì)，也希望有志同道和的可以加入一起討論，我也會(huì)第一時(shí)間幫你解答。

云服務(wù)器 GPU云服務(wù)器桶仿簡(jiǎn)書(shū) 仿簡(jiǎn)書(shū) 家用服務(wù)器全家使用桶仿某魚(yú)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99364.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Jinkey

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

UCloud：推出快傑共享型雲(yún)主機(jī)，內(nèi)蒙古烏蘭察布機(jī)房，新一代AMD Rome EPYC2處理器，C

閱讀 948·2021-09-03 10:42
面試題二

閱讀 1539·2019-08-30 15:56
CSS之BFC

閱讀 1479·2019-08-29 17:27
前端開(kāi)發(fā)測(cè)試題（一）

閱讀 903·2019-08-29 15:25
馬蜂窩 iOS App 啟動(dòng)治理：回歸用戶體驗(yàn)

閱讀 3197·2019-08-26 18:27
一款基于 Vue 的問(wèn)答移動(dòng)端實(shí)戰(zhàn)項(xiàng)目

閱讀 2519·2019-08-26 13:41
vscode 調(diào)試幫助你快遞開(kāi)發(fā)

閱讀 1925·2019-08-26 10:39
模塊中間的拖拽

閱讀 1614·2019-08-23 18:36

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

React-全家桶仿簡(jiǎn)書(shū)部分功能

相關(guān)文章

Vue2.0全家桶仿騰訊課堂（移動(dòng)端）

Vue2.0全家桶仿騰訊課堂（移動(dòng)端）

前端--通用知識(shí) - 收藏集 - 掘金

2017-06-23 前端日?qǐng)?bào)

vue全家桶仿某魚(yú)部分布局以及功能實(shí)現(xiàn)

發(fā)表評(píng)論

0條評(píng)論

Jinkey

男|高級(jí)講師

TA的文章

UCloud：推出快傑共享型雲(yún)主機(jī)，內(nèi)蒙古烏蘭察布機(jī)房，新一代AMD Rome EPYC2處理器，C

面試題二

CSS之BFC

前端開(kāi)發(fā)測(cè)試題（一）

馬蜂窩 iOS App 啟動(dòng)治理：回歸用戶體驗(yàn)

一款基于 Vue 的問(wèn)答移動(dòng)端實(shí)戰(zhàn)項(xiàng)目

vscode 調(diào)試幫助你快遞開(kāi)發(fā)

模塊中間的拖拽

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

React-全家桶仿簡(jiǎn)書(shū)部分功能

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！