实战：React全家桶仿PC端《快看漫画》(部分)

前言

最近在学习React，为了在学习的同时巩固一下所学内容，决定仿一个《快看漫画》的网页；由于学习进度及时间问题，我只实现了网站的部分功能：登录与退出、对应漫画关注/取关、关键词搜索等。

项目写了一个星期，写的时候觉着自己写了好多呀；写完之后就发现怎么才这么点。。。但是就这么一点点我也厚着脸皮写文章了，希望能给新手起到参考作用；同时虚心向各路大佬请教。

——by不会写文章的前端小白

详细介绍

1. 技术栈与组件库

react-reudx: 解决组件间通信
redux-thunk: 异步操作中间件
reac-router-dom: SPA单页面开发
axios: 异步获取数据
react-transition-group: 实现简单动画样式
immutable.js: 让数据类型不可变
styled-components: 样式编写库

2. 目录列表

├── ...
├── ...
├── ...
├── public
│   ├── api                         // 模拟数据存放目录
├── src                             // 开发目录
│   ├── common                      // 公共组件
│   ├── pages                       // 页面
│   │   ├── detail                  // 详情页
│   │   ├── home                    // 首页
│   │   ├── login                   // 登录页
│   ├── statics                     // 静态图片资源
│   ├── store                       // 总存储仓库目录
├──  App.js
├──  index.js
├──  style.js                       // 样式文件
├── ...
├── ...
├── ...

3. 功能介绍

'登录/退出' 功能:

通过设置登录状态(true or false)来判断是否登录，同时通过ref属性取到用户名，传给User组件将用户名渲染到页面。

'关注/取消关注' 功能：

点击关注时获取相应漫画id并集合成数组；点击取消关注时获取当前项漫画id，通过indexOf找到对应id后dispatch出漫画信息，再将对应漫画项移除。

部分代码：

对应漫画'关注/取消关注'按钮显示：

{//this.followItem获取当前已关注列表，this.list.id为当前项漫画idisLogin && this.checkFollowed(this.followItem, this.list.id) ? <Follow className="btn other" onClick={() => cancleFollowed(this.list.id, this.followItem)}>取消关注</Follow> :<Follow className="btn other"onClick={() => followCartoon(this.props.list, this.list.id, isLogin)}>关注</Follow>
}----------------------------------------------------------------------
checkFollowed(newList, id)  {const arr = [];for(let i = 0; i < newList.length; i   ) {// 集合已关注漫画项idarr.push(newList[i].id)}// 若当前项漫画id存在于id集合中  返回true 显示'取消关注'if(arr.indexOf(id) >= 0) return true;
}

点击'取消关注'移除对应漫画项：

// 派发action，传入当前项漫画id及'已关注'漫画数组
cancleFollowed(id, list) {dispatch(actionCreators.cancleFollowed(id, list));
}
-----------------------------------------------------------------------------
export const cancleFollowed = (id, list) => {return dispatch => {const arr = [];for (let i = 0; i < list.length;  i  ) {// 判断当前项漫画是否存在于'已关注'列表// 若有则移除当前项并将新列表数组派发给reducer// reducer接受新列表数组并更新state，完成漫画取关if (list[i].id !== id) {arr.push(list[i]);}}dispatch(searchFollowed(arr));}
};

关键词搜索功能：

可以通过漫画名及作者来搜索相应漫画（当然都是假数据），页面上显示的漫画我都做了其他的我就没做了哈。

这部分逻辑与'关注/取关'相似，也是通过获取input的value值，用indexOf()方法判断是否存在于关键词列表里(事先写好的假数据，包括作品名和作者)；再dispatch出对应项id，根据id集合对应漫画项信息，然后就可以渲染到界面上。

结束语

写这篇文章的目的就是记录一下我的学习情况，鼓励自己继续往下学，还想要整理一下我的思路（其实挺乱的吧），对这个项目感兴趣的小伙伴可以去查看我的项目地址（贴在下面啦）。

本人前端新手，希望各位小(da)伙(lao)伴多给我一点意见，感谢！

欢迎交流٩(๑❛ᴗ❛๑)۶

微信：LYX0_0TXRY

QQ：295510545

附上我的项目地址：Lesta