浅浅的聊一下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都给搞到一起了，这也算是一种回归吧。

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