react全家桶实现论坛项目文案

最近写了一个论坛项目，写篇文章记录一下开发路程。

相关技术：

   React,React全家桶(redux,react-router-dom)

开始任何项目第一步都是先搭建项目架构，虽然前期耗的时间长，后期就很轻松了。

---

第一步：项目加入Redux

大家可以看看我之前写的一篇有关redux搭建的文案，方便你理解跟使用redux：React+Antd+Redux实现待办事件 - 个人文章 - SegmentFault 思否

那怎么在我们的react中用到redux呢：

安装：yarn add react-redux

react-redux中有Provider组件，并且传入store，在它包揽的所有组件中就能够访问到store里面的数据了。

组件怎么访问到store数据呢？

通过react-redux中的connect来与store建立连接 : export  default  connect(mapStateToProps, mapDispatchToProps)(yourComponent)  

因为reduce中的状态是不可改变，我们可以用immutable.js将状态转成immutable对象。

处理异步数据:

redux-saga:集中处理action，多API调用

redux-thunk:分散处理action,简单API调用

似乎我们忽略了一个问题：创建一个reducer是没问题，但是多个怎么办呢？

combineReducers 

---

 第二步： 初始化设置 

安装：yarn add styled-componets

使用createGlobalStyle全局加载reset.cssCSS Tools: Reset CSS

接下来的所有样式都是用到styled-components来写

---

第三步：调取接口

安装：yarn add axios;

---

第四步：集成react-router

安装：yarn add react-router-dom

为什么不是安装react-router?

react-router-dom加入很多功能Link组件，BrowserRouter和HashRouter组件等。

加载优化也是用到了react-loadable,可以去githuub看看,可以让你按需加载而不会一下子全部加载。

withRouter:访问到location,param,historsy中的熟悉。

路由传参数：动态路由：/detail/1    建议使用，可以直接获取到参数。

GET传参数:/detail/?id=1    不建议使用，只能得到？id=1，还需要自己对获取到的参数做处理。

---

第五步:优化

组件继承PureComponent，可以优化性能，为什么呢？

我们都知道当我们的state，props改变时，因为会进行对比，如果返回true,页面是会刷新的，这样就比较耗性能.其实我们也是可以在shouldComponentUoodate()中进行操作来控制页面重绘。

不重写shouldComponentUoodate()，直接组件继承PureComponent也是可以优化性能的，因为它内部会进行一个浅比较，比较props和state是否改变。如果props和state都没有改变，但是引用对象变了，也会触发更新，只要引用对象没变就不会触发更新，这时候就可以用到Immutable了，对immutanle进行各种操作都会immutable对象，也就是说引用类型不会改变，就不会总是重绘。

想要源代码，或者有什么疑问都可以提出来。加油！！！