前端 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进行,必须。

终于又更文了。。。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181109G20XKH00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券