前端 React

“不知道最近太忙，还是自己太懒，两个月没有更新了。这段时间，公司要做一个网站，前端需要几个人，我就补上去了，立志要做后台的我，内心其实是拒绝的。在正式做之前，在我心中前端就是无数个div，css样式，再加一些js，就差不多了，窃喜，都知道点，也能做。”

项目开始了，一个师傅setup了环境，做好了一个页面，作为样板，开小会，介绍项目，师傅说：本次项目要用到React，redux，saga等前端框架，标签统一使用React-bootstrap官方提供的。这这这，都什么玩意，做前端少，外加做了半年android，对前端的认识仍然停留在大学机房。

简单的看了一下例子，发现react也没有很难，就是封装组件，将样式写在文件里嘛！

第一个task是做一个静态页面，布局文件200行，样式文件200行左右，一天半就做完了，我觉得还不错。push代码，提叫merge请求，马上comments迎面扑来，改，继续comments。最后样式文件改到了150行，布局文件改到150行左右，我决得这已经到我的极限了，最后师傅说这个页面你不用管了，让我来。最后我惊奇的发现，师傅把样式文件改到了50几行，布局文件60，70行。好故事就讲到这。

图暴露出两个要点：

1.代码的逻辑性

2.代码的复用率

提高前端代码复用率的要点：

1.对css层叠样式表的理解：

background：底层

color： 字体颜色

text： 文字

另外，内层的div，或者是标签可以继承外层div的style。明白这一点可以帮助我们减少很多不必要的代码。

2.抽象react的components的能力（提高复用率）

在后台的开发中，我们特别喜欢说，提高代码的复用率，深刻理解面向对象的含义。前端其实也同理。而且前端更容易抽象，因为其可视化，根据设计人员的设计图就可以对其进行抽象。

react视图刷新的过程

当前台view点击某按钮后想去后台请求API获取数据刷新视图时，下面就是具体的流程。始终记住一点，state改变，视图刷新，而state的改变，必须在reducer进行，必须在reducer进行，必须。

终于又更文了。。。