深入react+redux的一些使用心得

关于react使用的一些体会如下

1.尽量少使用refs，react玩的是组件，也就是虚拟DOM，refs会得到一个DOM对象的引用，这样破坏了react理念。

2.组件尽量应该分成UI组件和容器组件,容器组件负责传递数据给UI组件，UI组件负责拿到父亲的数据进行渲染。这样有利于我们构建一个更大的组件（比方说一个page，他包含了这些组件），因为把组件分为ui组件和容器组件会很好的得到维护，你不需要关心那些UI组件（省了很多麻烦，这种组件一般不少），因为他们的数据都是从容器组件得到的，日后你进行维护的，就仅仅是这些容器组件了，不需要去关心UI 组件。（各司其职会好些，你觉得呢，因为react本身只是view，view最关心的就是数据了，能管理好数据不用关心UI挺好的，不是吗？）

3.尽量使用react-router去布局，这样会很方便组件化开发。一般这个在路由中导航不同的page组件，这样易于管理。每个page组件下就是UI组件和容器组件了。

4.通过2，可以很方便迁移到redux。redux就是这么区分组件的

5.高阶组件和闭包很适合react组件的封装和增强。（见我上编文章，嘻嘻…………(●'◡'●)）。

6.propTypes这东西只会给你报警告，无法阻止传值（感觉这东西是给开发人员看的，不是特别了解），但是需要注意，不要以为他们阻止给你的state传值。

7.为事件绑定一个匿名函数会导致内存泄漏（每次都是新的匿名函数）。使用bind过多代码会不优雅，可以自定义bind方法去一次绑定所有方法。我喜欢箭头方法，推荐这个吧，简单明了。

8.官方推荐的函数节流和防抖很有用。因为这样可以保证容器组件的state是正确的，性能也会有提升（有些方法调用次数非常频繁）。react性能本身就很高，不过他的性能依赖diff算法（官方译为协调），所以优化主要从他下手，说白了就是一个组件是否需要更新依赖diff算法。（重新render），所以你需要考虑性能的时候从shouldComponentUpdate下手。

关于redux使用的一些体会如下：

1：关于容器组件和UI组件
一般是用户能发起action的那个最小组件，例如一个input,一个button的click这些
都应该是UI组件，也就是说，这些组件不应该有自己的逻辑处理能力，说白了就是没有自己的
state，他也不应该有；至于容器组件，只要是负责包括了一些类似的功能的
UI组件的话，他就应该能够处理他手下这些小东西（UI组件），他的数据处直接从store
中获取就行，所以每个容器组件都应该使用connect连接store，这种容器组件也有可能拥有
很少自己的state，不完全使用store的数据（很少，尽量用）；
总结：区分他们，就看他们能不能自理，或者说需不需要直接从store中拿API；
关于容器组件的connect(mapStateToProps , mapDispatchToProps)(App)
mapStateToProps(state , ownProps)//state表示传入store中的state, ownProps自身props
mapDispatchToProps(dispatch , ownProps){
    return {
        ...bindActionCreators(action, dispatch)
    }
}
//例如下面的例子，仅仅是为了让组件感觉不到这2个方法（increase 和 decrease）的存在
const mapDispatchToProps = {
} = (dispatch, ownProps) => {
  return bindActionCreators({
    increase: action.increase,
    decrease: action.decrease
  }, dispatch);
}
/* 返回跟上面一样的object，上和下自己喜欢哪个就用哪个咯 */
{
   increase: (...args) => dispatch(action.increase(...args)),
   decrease: (...args) => dispatch(action.decrease(...args)),

}

2：store一旦发出了dispatch，是否就已经更新了自己？
一旦reducer接受到了这个action，立马就会做出相应动作，如果是同步的，就会立即更新
state或者返回原state(未知的action，基本没这种情况)，如果是异步的，会在请求开始的时候发送一个
action更新state，请求成功或者失败后也会调用dispatch去分发一个状态，之后就是和同

步干一样的事情了

3：关于action的使用地方
毫无疑问。reducer方法中需要action的type，
其次，一般UI组件应该是不需要这个东西的，UI组件只负责渲染从父亲（容器）拿过来的数据
，因此，在处理逻辑的时候，在容器组件中，他需要去处理他自己
所渲染的UI组件的各种逻辑处理（类似onChange,onClick....），因此，容器组件在处理
自身事件（实际来自于UI组件），容器组件中会去调用他自己设置在UI组件上的监听方法，从

而抵用store的dispatch（），去更新state

4关于获取异步网络数据
在钩子方法中componentDidMount,在这里获取store的dispatch()方法,调用dispatch(ascnyFn)分发一个
action,ascnyFn方法可以接受一个参数，并且返回值是一个函数，其实就是dispatch一个方法而不是action，这个函数会接受dispatch
和getState()作为参数，你可以在这里异步请求，得到请求结果后返回一个
dispatch（//这里包含异步请求回来的数据），这样就完成了一个异步请求并且得到数据更新
state()。这里的异步请求最好是dispatch（requestFn(something)），在requestFn先发出一个
dispatch(requestFn（something）//告诉请求开始了)，然后调用fetch返回出去这个数据给
上个函数去分发这个请求到结果之后的action。官方文档是说最少需要3种action,
一种通知 reducer 请求开始的 action ,一种通知 reducer 请求ok的 action，
一种通知 reducer 请求失败的 action，每一次请求最好都先判断是否需要请求，，

不过需要注意的是，redux本身并不支持异步，需要引入中间件redux-thunk

5：关于什么是中间件
中间件是指可以被嵌入在框架接收请求到产生响应过程之中的代码；
它提供的是位于 action 被发起之后，到达 reducer 之前的扩展点；你可以利用 Redux middleware

 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等

6：关于store和state
我的理解是redux中的state指的是 store 中当前的数据，可以这样理解，combineReducer（{}）这个
方法的参数，每一个参数代表一部分的state,多个参数构成了一个大的state，就是store
初始化state一般有2种方式，1：createStore()中传入第二个参数，2：每个reducer都写默认state