与jQuery对比来初探React

任务：利用React编写一个Tweet Box。

要求：

• 没有文字输入，tweet按钮不可点击；未添加图片时图片按钮显示Add Photo,添加图片后显示Photo Added。
• 另外，只要添加了图片，tweet按钮就可以点击，即使未输入文字。
• 一张图片相当于23个文字的长度，这儿仅用toggle来模拟添加图片就好；
• 超出文字部分高亮显示（在这儿，我们把多余字符拿到textarea外面高亮了，简单一些）；

效果图是这个样子滴 （关于丑陋的样式大家就先别计较了）

---

先来用jquery实现一下

  


    
    
    
    
    



 
    

        

        Oops! Too Long: ...
        
        
        Tweet
        Add Photo
        140
    

从以上代码中大家可以看出，tweet按钮的点击与字数超出后的警示都是和剩余字数相关的，而剩余字数又和textarea和add photo按钮有关，因此这两个事件严重耦合在一起，每次为实现需求做条件判断时，几乎每次都要把另外一个事件对剩余字数的影响考虑进来。这个功能还算是比较简单的，如果耦合的事件再多一些，那么我们在每一个事件发生时，都要做很多判断，然后再去操作对应的DOM，这真的是个体力活儿。

而 react,在这方面就做的比较让人省心了，它仅仅需要我们去关注当前的状态。它就像是一个有限状态机，我们只需对于不同状态去设置相应的表现就好，而不用像jquery那样时时刻刻去记着其它事件带来的影响。
下面是react的实现：

本案例摘抄自：http://www.th7.cn/web/js/201508/118318.shtml ，这里对两种做了详细的分析对比，值得一看。

为什么使用React?

虽然在这个例子中，是用react在代码量上对比jquery没有看出优势，但是要记得，react可是为不断扩大的项目而生的。对于逻辑复杂的组件来说使用react是相当方便的，因为在这个过程中我们只用去考虑组件当前的状态和可能的改变，而不是像jquery去不断的操作DOM，不断去判断各种情况，然后在几个方法之间来回穿梭。react的逻辑很符合我们对现实世界的认知，状态改变之后，会自动的去render，从而改变展示。

• 简单 ：只要表达出这个程序在该段时间应该长什么样，当底层数据变化时，React会自动处理所有界面的更新。
• 声明式：数据变化后，会自动刷新，但只更新变化的部分。

特性：

虚拟DOM机制，每当数据变化，React会重新构建整个DOM树，将当前DOM树和上一次的作比较，这一过程都通过虚拟DOM进行，最后将需要变化的部分进行实际渲染更新。

组件化【React对你的唯一要求】：

和MVC思想的框架不同，每个组件独立封装，功能独立，我们只需关心自己部分的逻辑。与单一功能原则相同：独立的组件应该只做一件事情。

预渲染特性——Pre-rendering

虚拟DOM不依赖浏览器，可以在任何javascript环境执行。所以在后端运行代码也能渲染整个DOM，生成HTML字符串，返回给浏览器。这样，页面SEO和首次打开速度都可以解决。

rails项目中只要使用react-rails gem 就可以在rails后端渲染前端React组件。