React.js 别闹-（2）

一、简介

首先要定位，react 是一个前端视图构件库。虽然涉及底层重写，但仍旧保持在库的层面。用英文描述就是 library，而 Angular 是 Framework 他们自己也称 Platform。

高下立判！

那么作为一个视图构件，他的形态和行为由数据控制，随数据变化。省去了我们找到并通知其修改的过程。实际上，这可不是 React 的专利，大家都在解决这个问题，他追随大家的思潮而已。他脱颖而出，主要依赖“逆工程化”思路。

就是 jsx ！

没有 MVC 之前的前端开发，最佳实践告知我们尽量把数据视图分离开，解耦合。便于工程化管理和迭代，在组件化开发中，逆气而行，将 JavaScript HTML 及 CSS 全部封装在一个文件中，并将此文件看做构成项目的最小单元。

还是写个例子比较容易说明问题

点赞

效果图如下

图来自 React.js 小书

相信你有前端基础，这个功能非常简单。于是开始动手

.input-group>.btn-group>(button.btn.btn-default + button.btn.btn-default)

为了实现点击效果，你需要添加一个事件监听来 toggle 状态

$('button').on('click',()=>$(this).toggleClass('like'))

实际实现需要调试修改主要思路就是上边这样了。那么，问题来了。如果你的另外一个项目中同样有这样一个点赞功能，那该如何复用呢？（复制粘贴？fckaw）

其实还是有优化的方向和思路的，比如，我把依赖去掉，把 JavaScript 内联到 HTML 里面，这样，下次使用只需要复制这一整段就行了，看上去像是“畅言”的实现方式。实际上，还是很蠢。

• 内联代码可维护性为0
• 内联阻塞，使得你的代码执行效率极差
• 内联代码丑哭了
• 内联无法利用浏览器缓存策略

于是有了框架，把最佳实践整合起来解决这个问题。React 就是其中大刀阔斧改革者。

高级复用

JavaScript 放入 HTML 不合适，那HTML 放入 JavaScript 然后用 innerHTML 吐出来如何呢？

class LikeButton {
  render(){
    return `
      <button id="like">
           <span class="like-text">like</span>
      </button>
    `
  }
}

const like1 = new LikeButton()
const like2 = new LikeButton()
wrapper.innerHTML = like1.render()
wrapper.innerHTML = like2.render()

这种古老的声明式 class 方式虽然也解决了复用的问题，但蠢得让人看着难受。