资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/React-全家桶仿简书部分功能

React-全家桶仿简书部分功能

Jinkey / 1177人阅读

摘要：全家桶仿简书部分功能前言前段时间接触了下，一直想要自己写一个小练手。在众多应用中，考虑之后选择了简书来模仿，这段时间就利用了工作之余的时间进行开发。在这里简单叙述一下我仿简书部分布局以及功能实现的过程，仅做学习用途。

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云服务器 桶仿简书 仿简书 家用服务器 全家使用 桶仿某鱼

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99364.html

相关文章

  • Vue2.0全家桶仿腾讯课堂（移动端）

    摘要：最近在学习觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正持续更新中。的使用的状态存储是响应式的。需要注意类似于，不同在于提交的是，而不是直接变更状态。 最近在学习vue,觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正（持续更新中）。 效果预览 ?在线预览：点我！！！在线预览，手机浏览或切换浏览器移动调试 ?源码地址：Github✨✨求你的小星星～...

    zorro 评论0 收藏0

  • Vue2.0全家桶仿腾讯课堂（移动端）

    摘要：最近在学习觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正持续更新中。的使用的状态存储是响应式的。需要注意类似于，不同在于提交的是，而不是直接变更状态。 最近在学习vue,觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正（持续更新中）。 效果预览 ?在线预览：点我！！！在线预览，手机浏览或切换浏览器移动调试 ?源码地址：Github✨✨求你的小星星～...

    anquan 评论0 收藏0

  • 前端--通用知識 - 收藏集 - 掘金

    摘要：闭包有多重前端知识点大百科全书前端掘金，，技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 Vue全家桶实现还原豆瓣电影wap版 - 掘金用vue全家桶仿写豆瓣电影wap版。 最近在公司项目中尝试使用vue，但奈何自己初学水平有限，上了vue没有上vuex，开发过程特别难受。 于是玩一玩本项目，算是对相关技术更加熟悉了。 原计划仿写完所有页面，碍于豆瓣的接口API有限，实现页面也有...

    王笑朝 评论0 收藏0

  • 2017-06-23 前端日报

    摘要：前端日报精选大前端公共知识梳理这些知识你都掌握了吗以及在项目中的实践深入贯彻闭包思想，全面理解闭包形成过程重温核心概念和基本用法前端学习笔记自定义元素教程阮一峰的网络日志中文译回调是什么鬼掘金译年，一个开发者的好习惯知乎专 2017-06-23 前端日报 精选 大前端公共知识梳理：这些知识你都掌握了吗？Immutable.js 以及在 react+redux 项目中的实践深入贯彻闭包思...

    Vixb 评论0 收藏0

  • vue全家桶仿某鱼部分布局以及功能实现

    摘要：在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅做学习用途。另一方面，当与现代化的工具链以及各种支持类库结合使用时，也完全能够为复杂的单页面应用提供驱动。可以进行确认收货后删除订单。 前言 每次写文章时，总会觉得比写代码难多了，可能这就是我表述方面的不足吧，然而写文章也是可以复盘一下自己的开发过程，对自己还是受益良多的。在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅做...

    dreamGong 评论0 收藏0

发表评论

登陆后可评论

0条评论

Jinkey

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<