决定用 react hooks 把仿 V2EX 的论坛前端重写一遍

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1745 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近正好有时间就想把之前自己做的仿 V 站论坛前端重新用 React 写一遍。习惯了 DI 和 Angular 那种大包大揽的 frame 模式，现在换成 React 的 library 新学就需要自己选择各种组件，最后用的主要是

React + Hooks + Redux + Redux-thunk + ImmutableJS + React-router + styled-component + material UI

React Hooks 主要是在 19 年非常火，所以自己也尽量在能用 hooks 的地方都在用，比如用 useState 来设置 state 的变量，useEffect() 来控制生命周期(e.g. 从后端获取数据，监听数据变化重新调用函数)，用 redux 提供的 useSelector/useDispatch 来获取 store 里的数据(与 redux-thunk 结合返回 actionCreator)，用 react-router 提供的 useHistory 来进行 navigation 跳转(避免了用 withRouter 来渲染)。前端的设计参考 V 站，具体实现里则只用了 flex 和 gridbox 布局，没有像 V 站一样用 float 也没有太考虑对 IE 的兼容，一些 Button 等组件用的是 material-ui。今天终于把前端页面和基本的架构搭好了

架构是按照标准的 React 组件拆分：

├── App.js
├── _services
│   ├── comment.service.js
│   ├── post.service.js
│   ├── service.js
│   ├── user.service.js
│   └── utils.service.js
├── componnets
│   ├── auth
│   │   ├── index.js
│   │   ├── login.js
│   │   ├── register.js
│   │   └── style.js
│   ├── comment
│   │   ├── commentList.js
│   │   ├── commetBox.js
│   │   ├── index.js
│   │   ├── singleComment.js
│   │   └── style.js
│   ├── post
│   │   ├── abbreviatedPost.js
│   │   ├── createPost.js
│   │   ├── index.js
│   │   ├── postDetail.js
│   │   ├── postList.js
│   │   └── style.js
│   └── utils
│       ├── about.js
│       ├── header.js
│       ├── index.js
│       ├── notification.js
│       ├── pagination.js
│       ├── splitLine.js
│       ├── tagList.js
│       └── topicBar.js
├── index.js
├── layouts
│   ├── HomeLayout.js
│   ├── MainPageLayout.js
│   ├── PostPageLayout.js
│   ├── index.js
│   └── style.js
├── logo.svg
├── routes
│   └── index.js
├── store
│   ├── actionCreators
│   │   ├── index.js
│   │   ├── user.action.creators.js
│   │   └── util.action.creators.js
│   ├── constants
│   │   ├── comment.constants.js
│   │   ├── index.js
│   │   ├── user.constants.js
│   │   └── util.constants.js
│   ├── index.js
│   ├── reducers
│   │   ├── comment.reducers.js
│   │   ├── index.js
│   │   ├── posts.reducers.js
│   │   ├── user.reducers.js
│   │   └── util.reducers.js
│   └── type.js
└── style.js