React开发简书总结

最新推荐文章于 2024-08-08 10:51:45 发布

王大锤_code

最新推荐文章于 2024-08-08 10:51:45 发布

阅读量551

点赞数 1

分类专栏： react 文章标签： javascript react

本文链接：https://blog.csdn.net/weixin_44809439/article/details/110299833

版权

本文介绍了使用React开发简书网的过程，包括技术栈、项目运行、功能实现、项目拆分和组件管理。重点讲解了如何运用styled-components、React Transition Group、combineReducer、redux-immutable和react-router-dom等技术，以及优化性能的策略，如使用PureComponent和react-loadable实现异步加载。

摘要由CSDN通过智能技术生成

React 简书网开发

github地址

技术栈

what	way
React	创建组件
Redux	管理数据
react-redux	方便使用 redux
redux-thunk	让store有能力接收函数，用来做异步数据获取与复杂逻辑
immutable.js	保证 redux 的 state 不被修改
react-router	路由管理
react-loadable	实现异步组件，而不是所有代码都打包在一起
styled-components	模块化 CSS
react-transition-group	动态改变 class 属性值实现 react 动画

运行本项目

注意：这里默认给您写的是cnpm哦，如果不支持请修改第三行为 npm install

git clone https://github.com/Wangdachui110/jianshu.git
cd jianshu
cnpm install
npm start

我做了哪些功能？

首页的样式与布局，没有做响应式
页面头部搜索栏的动画与推荐
页面头部：登陆与退出的跳转
页面头部：写文章的权限验证，没有登陆会跳到登陆页面
登陆页的简单布局。没有验证哈
文章详情的跳转，虽然点每一个跳过去都是同一篇文章，但发送的ajax请求不同
注：所有的mock数据放在puclic/api

项目是如何拆分的？

按照页面进行拆分。 src/pages 目录下的每一个文件夹代表一个页面
每一个页面的文件夹下管理它自己的数据与状态通过 combine-reducer ，可以将庞大的state分割到多个文件中，在每一个代表页面的文件夹中各自管理各自的数据，可以极大的降低合作成本，并让代码清晰
将通用组件或一个不属于某一个路由的组件如header部分放到src/common文件夹中，尽可能提高服用度
在src/App.js中管理路由
在src/store/reducer中合并所有的reducer

项目结构

│  App.js                         根组件
│  index.js                       项目入口
│  style.js                       注入到全局的样式, 重置默认样式
├─store   
|      index.js                   唯一的store
|      reducer.js                 合并各组件的reducer
|
├─common                          通用组件文件夹
│  ├─header                       头部组件，它独立于页面之外，却又较为复杂，所以单独抽出
│  │  │  index.js                 组件入口，布局与逻辑
│  │  │  style.js                 组件使用标签以及样式
│  │  │
│  │  └─stroe                     header区域所有的数据
│  │          actionCreators.js   统一管理action
│  │          constants.js        用常量替代所有的action的type值
│  │          index.js            导出actionCreators与reducer
│  │          reducer.js          根据不同的action修改state
│  │
│  └─tools                        存放所有的小组件
│      │  index.js                导出所有的工具组件
│      │
│      ├─components               放置通用组件
│      │  └─backTop               回到顶部组件
│      │          index.js        
│      │          style.js        
│      │
│      └─store                    这里打算用一个文件夹来管理所有通用组件的数据，↓
│              actionCreators.js  因为通用组件主要是样式，逻辑是少数
│              contants.js
│              index.js
│              reducer.js
│
├─pages                           所有的页面
│  │
│  ├─home                         主页
│  │  │  index.js                 主页入口
│  │  │  style.js                 主页样式
│  │  │
│  │  ├─components                首页被划分为下列组件
│  │  │      List.js              列表组件
│  │  │      Recommed.js          推荐组件
│  │  │      Topic.js             话题组件
│  │  │      Writer.js            作者组件
│  │  │
│  │  └─store
│  │          actionCreators.js   统一管理action
│  │          constains.js        用常量替代所有的action的type值
│  │          index