前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >浅浅的聊一下React

浅浅的聊一下React

作者头像
web前端教室
发布2018-02-06 15:59:11
5380
发布2018-02-06 15:59:11
举报
文章被收录于专栏:web前端教室

要写一个组件,当然是从需求开始设计它。但要组件的边界,就是这个组件,它的最多能做什么?一个通用的组件,它也是有倾向性的,不可能适合完全所有的情况,越重,就越不通用。组件这种东西从来都是需求推动的。并不是我们坐在那没什么事就想着写个组件出来。

这方面比较典型的就是React。它是Fackbook搞出来的,早期有人说,它比较适合FB的业务风格,但现在你们看国内业界用的也挺火。

从前端操作的老套路来讲,要搞前端首先就是操作DOM和一些控制&组件的状态,但这些东西又麻烦又不标准,要么用全局变量,要么用本地存储,要么用变量传来传去,很容易出错,难维护不好高度。

于是就有人想,算了,不零碎的搞DOM了,干脆在状态或数据变化的时候,整个的重新渲染UI算了,这样就不用总是手动控制各个开关,也省得用什么本地存储了。

但是操作DOM本身就是一个低效率的操作,一个小组件还可以,如果是一个1000行的大table,如果因为其中某个val的变化,就重新渲染整个表格,也是很难以接受的。所以就想办法只更新有变化的部分,于是Virtual Dom(虚拟DOM)出来了。就是有变化的时候比较一个,只更新不一样的地方。到了这一些,基本所有的都是组件了,因为组件了才好 new Obj嘛,才好操作。

这个时候,你会发现所有的DOM和DATA,还有相关的JS,都在某一个组件中了,整个网页好像只剩下body了,那干脆把HTML也拉进来算了,于是JSX出现了。什么是JSX,自己百度一下。然后UI这个V层的东西它的状态和装载的数据已经是天然的分隔了,所以状态和属性就出现了。到这一步的时候,你会发现React好像一直搞的都是MVC里面的V层?完全正确,网上有一种说法,你把整个React当成一个V层的模板引擎,当成一个可以使用JS特性的HTML模板,这就比较好理解了。

同学们在学习或练习组件化的时候,要时刻注意分清“交互逻辑和数据逻辑的区别”,我在这里提这一句,其实只是提醒你一下。

在之前的先行者课程之中,我经常强调,写组件要么是易于维护,要么是为了复用性。为了达到复用性,必须在组件内部JS中实现DOM、CSS、DATA的处理,和业务逻辑的抽像,而业务逻辑是带有行业性的。你不能想像一个电商的组件也能完全应用在QQ空间那种网站中,业务类型就不同。

JSX还有一点比较“逆”时代而动,这话怎么说呢。前端最早的MVC是HTML是M,CSS是V,JS是C,因为是静态页面嘛,所以HTML就变成M层了。你想想看,做一个页面需要三个文件,明明是一个东西却要分成三份。但JSX通过它不寻常的语法,把JS和HTML,和CSS都给搞到一起了,这也算是一种回归吧。

为什么标题叫浅浅的呢,因为我这刚刚看这本书,没法不浅

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2016-09-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 web前端教室 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档