一、简介
首先要定位，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 方式虽然也解决了复用的问题，但蠢得让人看着难受。
