突然覺得好難哇，然後就是一個人苦苦用這win系統，然後一回頭看到大家都是linux，感覺被孤立了（再加上一些無奈的原因，又不能重裝系統。順便在開頭表揚一下，剛剛發現這個新的編輯器每隔半分鐘左右似乎開始自動保存了，(*^▽^*)……算了，我還是記着隨時保存吧。順便再提出一個很好的解決強迫症們換行問題的方法，就是先隨手打個字，然後把光標移到字的前面，再按回車就好了）
- 外文名
- React
- 公 司
- 作 用
- 架設Instagram 的網站
- 特 點
- 聲明式設計、高效、靈活
0.預備知識
1.你們最喜歡的Hello World
The easiest way to get started with React is to use this Hello World example code on CodePen. You don’t need to install anything; you can just open it in another tab and follow along as we go through examples. If you’d rather use a local development environment, check out the Installation section.
The smallest React example looks like this:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
目前有哪些流行的組件化框架？
我們現在開發Web應用，一般也不會從0開始，通常是選取一個核心框架（庫），然後在此基礎上確定一些規則，逐步構建外圍體系，現在比較火的有React，Angular，Vue，Polymer等。
“MV*”：Angular，Vue等
“反應式”：React，Reactive等
標準增強：Polymer
幾個流派各自特點是什麼？
MV*: 分層，綁定
React: 組件化，單向數據流
React中一般的組件相當於MVVM流派中的什麼？
以上提到的幾個東西，在組件化這塊，可能爭議最大的是Angular，因爲Angular 1.x的官方指引中，並未在組件化這個方向上作一些指導，也沒有提倡，甚至連建議都沒有，而React和Polymer是天然組件化的，Vue提供的文檔裏以很大篇幅詳細說明了組件化的機制和實踐方式。
但是，這並不是說，Angular 1.x就是與組件化衝突的，它仍然可以通過directive等相關機制，實現自己特色的組件化方案。
Directive可以實現自定義標籤和自定義屬性，這兩者可以理所當然地歸類到組件中，但是，在Angular中，模板本身也可以視爲一種組件，一種輕量級的組件，它不一定就是靜態的，仍然可以有一些簡單的操作和行爲。
Directive和模板相當於MVVM中的View層，它們的運行，一般是離不開ViewModel的支撐的，在Angular中，這就是controller。所以，如果以Angular框架來說，directive和模板、controller，共同形成了視圖層組件體系。推廣到其他MVVM框架來說，也就是View和ViewModel，而React整體就處於視圖層，所以這兩者算是一個對等關係。
這些流派有共同的未來嗎，會是什麼？
無論是哪種框架，在開發Web應用的時候都要面臨一個問題：業務數據層如何設計？
這一層東西，其實目前各路框架都未提出有力的解決方案，大家的重點都還是在做上層UI。
但是從長遠來看，業務數據層會是一個基本沒有框架差異的東西，同一個方案，大家都可以用，比如說之前有人把flux之類的東西放到React之外的框架用，也一樣可以。
而上層UI，其實現過程現在也很明確地是要往Web Components靠攏，實現邏輯都是使用ES新標準，數據綁定機制都是getter setter或者observe，加載方式都在考慮HTTP2之類，一旦某個領域出現了理念突破，很快就會被其他框架吸收融合。
所以總的來說，各框架是趨同的。
上完馬原課，又是好晚了，就簡單更新一點吧
我們會從一個簡單的點贊功能講起。 假設現在我們需要實現一個點贊、取消點讚的功能。
如果你對前端稍微有一點了解，你就順手拈來：
HTML:
<body>
<div class='wrapper'>
<button class='like-btn'>
<span class='like-text'>點贊</span>
<span>爲了模擬現實當中的實際情況，所以這裏特意把這個 button 裏面的 HTML 結構搞得稍微複雜一些。有了這個 HTML 結構，現在就給它加入一些 JavaScript 的行爲：
JavaScript：
const button = document.querySelector('.like-btn')
const buttonText = button.querySelector('.like-text')
let isLiked = false
button.addEventListener('click', () => {
isLiked = !isLiked
if (isLiked) {
buttonText.innerHTML = '取消'
} else {
buttonText.innerHTML = '點贊'
}
}, false)
功能和實現都很簡單，按鈕已經可以提供點贊和取消點讚的功能。這時候你的同事跑過來了，說他很喜歡你的按鈕，他也想用你寫的這個點贊功能。這時候問題就來了，你就會發現這種實現方式很致命：你的同事要把整個 button 和裏面的結構複製過去，還有整段 JavaScript 代碼也要複製過去。這樣的實現方式沒有任何可複用性。