实战：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为当前项漫画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