浅浅的聊一下React

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

这方面比较典型的就是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都给搞到一起了,这也算是一种回归吧。

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

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2016-09-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

【福利】小程序开发资源干货汇总

4223
来自专栏快乐八哥

JavaScript入门

在Web开发日益成熟的过程中,PHP和JavaScript已经成为了Web工程师的必备技能。前者因为LAMP的经典组合,而后者JavaScript在经历过Jav...

1938
来自专栏小程序

云+电商震撼升级,V3惊喜上线!

云+电商重磅升级 ---- 在云+电商全体小伙伴的日夜奋斗下,云+电商在本周日2017年9月10日重磅升级!从V2到V3,从后台优化到前端设计,V3采用最流行全...

4025
来自专栏无原型不设计

如何使用基于组件的设计方法

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。 基于组件的设计方法通常在大型复杂的设计项目中才会谈论到...

2806
来自专栏Youngxj

Lyplayer蓝叶音乐视频播放器-emlog插件

2555
来自专栏腾讯大讲堂的专栏

滑屏 H5 开发实践九问 - 腾讯ISUX

滑屏的交互形式自从在 H5 中流行起来,便广泛应用在产品宣传、广告、招聘和活动运营等场景中,作为微信朋友圈广告惯用的形式,其影响力更是得到了强化与放大。如今滑屏...

5257
来自专栏腾讯社交用户体验设计

滑屏 H5 开发实践九问 - 腾讯ISUX

作为一个 UI工程师,接过很多类似的项目,也曾写过滑屏的插件,在经历了不同的需求的“洗礼”并踩过若干个坑之后,不禁反问自己...

3654
来自专栏互联网杂技

IOS 10锁屏界面不好用?来看这份严肃的交互分析!

以iOS 10的锁屏界面为例,让你知道如何有理有据地分析一个界面交互的好坏。iOS说:“清晰度,咱俩分手吧”。以往的iOS锁屏界面非常简单直接,但是来到今年的i...

3236
来自专栏腾讯社交用户体验设计

顺势而为,HTML发展与UI组件设计进化 - 腾讯ISUX

2407
来自专栏互联网杂技

IOS 10锁屏界面不好用?来看这份严肃的交互分析!

iOS说:“清晰度,咱俩分手吧”。以往的iOS锁屏界面非常简单直接,但是来到今年的iOS10,情况发生非常大的变化,在开始认真严肃地为大家分析(tucao)之前...

3167

扫码关注云+社区

领取腾讯云代金券