2018-08-28 小年糕集训营毕业-总结

                                   小年糕集训营毕业总结

       光阴似箭，岁月如梭。来到小年糕已经不知不觉快过去将近两个月的时间， 从刚来时对于组件化懵懂的初学者 到后来能够自己编写出2048 音乐播放器。感谢在这段日子里每一个帮助过我的人 包括茹海波大佬的演讲使我对于一个人的事业展望有了新的认识，感谢琪哥贴心安排的饮食起居，更加感谢我的老师们在这段日子里耐心的教导，用他们丰富老练的工作经验来传授给我们最实用的知识。那么接下来就让我们回顾一下在这两个月里 我们具体都学习了哪些知识。

---

        1.基础的HTML标签 以及简单CSS基础及ES6基础

---

        2.react框架 

       通过npm引入react，react-dom模块 就可以引用react的jsx模板的写法 允许我们编写看起来像 HTML的JavaScript 。

---

        3.组件的构建语法以及组件化的合理拆分

        在引入react后 通过拆分页面 将其拆分成一个个组件 大多数拆分为自顶向下拆分 在拆分时观察哪些组件可以复用 哪些组件的属性可以自治。通过组件的拆分可以使其有合适的解耦性 复用性 以及自治 大大减少了重复代码的书写以及项目变大时难以维护的难题。其通过继承React.Compnent类来自定义组件，通过render()方法返回所需要的元素。通过setState方法来处理各自的数据状态，但是此时父子组件之间的通信还是较为传统的props传递以及事件回调的形式 当多级组件进行嵌套时，将会造成回调地狱等问题

---

        4.引入Redux

        为了解决数据状态分散复杂 难以管理的状态 紧接着便学习了Redux机制 其通过createStore方法来创建一个集中管理组件状态的一个大的仓库Store，再通过与react配合的'react-redux'模块中的Provider来使其与容器组件进行连接 使容器组件可以通过Connect方法来与Store进行连接 提到connect就不得不提及mapStateToProps（state,ownProps）, mapDispatchToProps（dispatch,,ownProps）这两个函数参数 ,这两个函数参数可以将需要的state属性和dispatch方法传递给绑定的组件上作为props（注意：在传递State时要将所需内容传递而不是一股脑将所有state返回而引起没有所需props更新时而造成重新渲染的问题，而且当容器中子组件没有使用纯函数组件时 如果父组件更新 即使子组件所需props没有变化那么也将会更新）注意action对象中最少有一个type属性 多数情况下也应该有一个payload传值属性

---

        5.两个优化结构的工具函数

        一个是combineReducers（{reducer1，reducer2}）：当项目足够大时 一个reducer往往难以清晰的管理所有数据 那么此时就需要将reducer进行拆分使其易于维护可读，那么这个函数就是帮助我们把拆分的所有reducer进行打包合成一个reducer供creatStore方法使用

          另一个是bindActionCreators（actionCreators, dispatch）第一个参数可以是一个 action creator，或者键值是 action creators 的对象。其将actionCreators与dispatch绑定 这样就可以省去每次都写dispatch 而且也省去了将dispatch向下的传递

---

        6.蚂蚁金服UI库 ant-design

        通过npm安装ant-design的UI组件 但是千万不要忘记还要引入antd.css否则其CSS样式将不会显示出来，之后通过官方文档查看组件所需props 以及里面的layout布局结构也是很好用，总体来说使用起来还是较为简单

---

        7.中间件的编写

        首先如要引用中间件 那么需要在createStore中的第二个参数中调用applyMiddleware方法 并将所需中间件按所需顺序作为参数插入到applyMiddleware方法里。在中间件的编写时要注意参数的顺序store=>next=>action=>{....} 而其中next与store中的dispatch方法是有区别的,next(action)后是将其传递给下一个中间件，而store.dispatch方法是将其传递给第一个中间件,也因此要注意中间件插入的顺序，中间件顾名思义是作为加工处理厂一般的存在，常存在于某两个事物之间 其便存在于dispatch触发后与到达reducer进行处理之间 常用中间件的编写时也常常在中间件中引入了promise对象来达到异步的实现

---

        8.react-router

        通过npm安装’react-router‘ 之后通过引入

routeConfig为配置对象来进行无刷新路由跳转 具体参考react-router3中文网 在组件中引入this.props.children便可引入子组件

---

        9.normalizr

        当后端传来的数据错综复杂，层级嵌套很深的时候且可能会有很多复用的数据以及频繁的操作时我们此时便要考虑应该使用normalizr工具函数来进行数据扁平化 在数据扁平化时我们要考虑好哪些作为主键 哪些子属性可以再次进行拆分 其中要注意的是new Schema.Entity()时其是对象，用normalizr函数处理所需数据时要与其类型相对应。如果是数组的话需要将其转换为数组。第一个参数为转换后entities后的属性名，第二个参数是子属性扁平化的规则，第三个为主键的值。之后再通过normalize(handledata,schema.entity)进行处理

---

        10.自定义组件的编写

        在编写自定义组件时，首先要确定此组件哪些属性是应该暴漏出去的。哪些属性是私有的应该自己维护的。并且要注意自定义组件不是完全的自制，有些属性在必要条件下应该由外部传进，通常默认属性用static defaultProps来定义。 为了使提高组件的健壮性，可以引用prop-types来规范所传入的props。

---

        11.数据结构中树的遍历

        在数据的结构为树时 那么尽量采用递归函数的方式来进行组件的渲染 通过判断有无子节点来递归下去，直到叶子节点。注意要有临界返回值 以防造成无限递归

---

         12.eslint规范代码格式

        采用airbnb规范格式 使代码规整有序 利于大型项目中多人协作开发，其特别强调了react组件如果不是必须用到类组件那么必须采用纯函数组件的写法来创建组件，纯函数组件的优点有很多，首先看上去会很简洁。其次纯函数组件中 可以直接定义函数 而引用时无需使用this。最后在纯函数组件中没有生命周期等 react承诺未来会针对其进行优化 在大型复杂项目中将会大大的提高构建的速度。