一卷雕、簡介
首先要定位节猿，react 是一個前端視圖構(gòu)件庫。雖然涉及底層重寫，但仍舊保持在庫的層面滨嘱。用英文描述就是 library峰鄙，而 Angular 是 Framework 他們自己也稱 Platform。
高下立判太雨！
那么作為一個視圖構(gòu)件吟榴，他的形態(tài)和行為由數(shù)據(jù)控制，隨數(shù)據(jù)變化囊扳。省去了我們找到并通知其修改的過程吩翻。實際上，這可不是 React 的專利锥咸，大家都在解決這個問題狭瞎，他追隨大家的思潮而已。他脫穎而出搏予，主要依賴“逆工程化”思路熊锭。
就是 jsx ！
沒有 MVC 之前的前端開發(fā)雪侥，最佳實踐告知我們盡量把數(shù)據(jù)視圖分離開碗殷，解耦合。便于工程化管理和迭代速缨，在組件化開發(fā)中锌妻，逆氣而行，將 JavaScript HTML 及 CSS 全部封裝在一個文件中旬牲，并將此文件看做構(gòu)成項目的最小單元仿粹。
還是寫個例子比較容易說明問題
點贊
效果圖如下
相信你有前端基礎，這個功能非常簡單引谜。于是開始動手
.input-group>.btn-group>(button.btn.btn-default + button.btn.btn-default)
為了實現(xiàn)點擊效果牍陌，你需要添加一個事件監(jiān)聽來 toggle 狀態(tài)
$('button').on('click',()=>$(this).toggleClass('like'))
實際實現(xiàn)需要調(diào)試修改主要思路就是上邊這樣了。那么员咽，問題來了毒涧。如果你的另外一個項目中同樣有這樣一個點贊功能，那該如何復用呢贝室？（復制粘貼契讲？fckaw）
其實還是有優(yōu)化的方向和思路的，比如滑频，我把依賴去掉捡偏，把 JavaScript 內(nèi)聯(lián)到 HTML 里面，這樣峡迷，下次使用只需要復制這一整段就行了银伟，看上去像是“暢言”的實現(xiàn)方式你虹。實際上，還是很蠢彤避。
- 內(nèi)聯(lián)代碼可維護性為0
- 內(nèi)聯(lián)阻塞傅物，使得你的代碼執(zhí)行效率極差
- 內(nèi)聯(lián)代碼丑哭了
- 內(nèi)聯(lián)無法利用瀏覽器緩存策略
于是有了框架，把最佳實踐整合起來解決這個問題琉预。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 方式雖然也解決了復用的問題卒暂，但蠢得讓人看著難受。
