前言
最近在学习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为当前项漫画id
isLogin && 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 ++) {
// 集合已关注漫画项id
arr.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
