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

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

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

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

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

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

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

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

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

Loadable：異步加載組件

Transition-group：動畫實現(xiàn)

styled-components：組件化樣式

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

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

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

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

效果預(yù)覽

實現(xiàn)主要幾個功能

登錄退出及未登錄攔截

用戶在已登錄狀態(tài)和未登錄狀態(tài)的界面是不同的，有些功能指定要在登錄狀態(tài)下才會有，因此會產(chǎn)生狀態(tài)的切換，在一般小項目中我們可以使用localStorage來存儲狀態(tài)，也可以用Redux，這里我所有的數(shù)據(jù)都是使用Redux進(jìn)行數(shù)據(jù)管理，在進(jìn)入寫文章頁面調(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"])
});

點擊加載更多文章

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

頭部熱門搜索獲取及切換

在Home組件獲取到數(shù)據(jù)后儲存到Redux中,然后取出前十條數(shù)據(jù)，儲存到常量中。通過點擊事件對數(shù)據(jù)進(jìn)行切換,同時出發(fā)動畫效果。(由于使用了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();  //因為list目前是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;
    }
  }

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

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

同時也可以通過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時使用,不會被轉(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);
    //使用動態(tài)路由獲取idthis.props.getDetail(this.props.match.params.id);
  }
}

結(jié)語

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

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

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