任务总结

本周主要完善了自己参与的公司校园号管理系统的整体页面的布局结构，导航和边栏，实际项目中，经老大指点发现了自己的许多问题，并有真正学习到和了解到一些原先未实践过的东西，以下便是对这次实践经历各方面的知识总结：

---

一. 项目主要采用react+react-router+webpack+antDesign+less作为整体技术栈，可能后序会引入新的技术，这里只对目前的技术来说。因为来公司实习之前自己有折腾过除了antDesign之外的其他技术，但还是首次以实际项目的方式来运用这些新东西，我觉得实际项目和自己私下折腾还是有很大不同的。

1.react作为一种js框架，在MVC结构中主要体现了V这一层面，并不像jquery和其他直接操作dom节点的框架那样，而是采用virtualDom的方式实现间接对节点的一些操作，并且它的jsx语法可以让我们像写html页面结构那样，不需要像原生js那样先createElement，然后在appendChild到父元素。然后，react确实很好的实现了组件的复用。

2.组件间的通信机制。首先是父组件向子组件传递数据是通过props来实现，很简单，当然，各个组件可以通过getDefaultProps()实现默认的传递数据，就是如果父组件并没有向该组件传值或者值为空，那么这个组件就会默认为使用getDefaultProps()的値。根据官方文档，如果组件里面某个值是this.props.xxx，那么就需要为该値设置类型propTypes，如果该值是必须的，那么便是类似于React.propsType.string.isRequired.按照官方说法，这么写是为了防止因为接受的値和传递的値类型不同造成不必要并且难以发现的程序员死敌（bug）。子组件向父组件传递数据方式一般是：采用refs方式进行调用。貌似我负责的这部分没有碰到父组件需要调用子组件，不过，我看到侧边的导航部分，因为每个主路由模块下的侧边导航sideBar数据是不同的，所以每一个路由模块都有一个对应的包含相关数据的jsx文件，通过extends SideBarLayout，实现数据的传递，觉得这种方式和之前看到的statelessFunction有相同作用，statelessFunction 顾名思义就是一个组件分为类似一个数据文件，一个容器文件，数据传递给容器，容器用来渲染。好吧，上面什么sideBar的文件结构是老大规制的，我还是空有理论（赶快学习……）。

3.最后还有什么this.state.xxx，setState什么什么，就是前面的设置状态，后一个用来改变当前状态。

---

二、初次体验antDesign。antDesign作为一种react的UI框架，帮助减轻了许多工作量吗？（应该是）可能我这部分需要用到的很少，主要就侧边导航用了Menu ，SubMenu ，Icon这些组件。通过官方API提供的方法，可以做些简单的“定制”修改。

---

三、这一点我主要写在css布局的方面。首先，我必须要说的是，侧边导航和内容等高问题，当然，我没有完全做成等高，因为，要实现侧边栏竖跨屏幕哦！实现这点第一次做的尝试是给两块内容的父级盒子display：table,position：relative；子盒子display：table-cell，然后，左侧导航盒子设置最小高度，后面确实出现问题了，导航内容会跟着右侧内容跳动，pass。最终方案是，两侧盒子均设置float:left,margin-bottom:-2000px,padding-bottom:2000px; 这是等高的另一种策略，符合需求。

---

四、css-Modules的使用。多人开发过程中，确实有点不好避免样式类名相同造成不必要的错乱问题。css-modules很好解决了这一问题，它是一种css in js的思想，比如有一个样式文件，有个类名为normal，那么在引入该文件的jsx文件中，如果某个标签需要用到该样式，那么类似如下写法

，那么在编译之后，这个类名会被自动加上唯一的一组序列号，很好地规避了样式冲突的风险呢！

---

当然还是有很多东西有学习到，并且需要注意，期待后面的不断学习……