React研習之旅（一）：React基礎與核心

爲什麼寫這個系列

做爲一個寡言少語的人，一直在享受社區的文章分享和幫助，是它們讓我不斷成長，這種分享的熱情是開源社區繁榮昌盛的根基。某雖不才，也有一樣的心情，也想寫點東西。不只僅是個教程系列，也是一個研究學習的過程。近期一直研究React，將本身的一些思考摘錄下來，分享一下，也歡迎有興趣的讀者留言發表本身的觀點，互相探討學習。

---

react簡介

A JavaScript library for building user interfaces：一個用於構建用戶界面的JavaScript庫

官方這句話措辭懇切嚴謹，有兩點須要注意：

• 靈活：react只是個庫，開發者能夠自由靈活地選擇組件模塊。
• 跨平臺：react用於構建用戶界面，而不只僅是web界面。

react由美國臉譜網（facebook）出品，大廠背書，更加可靠，雖然前段時間出了個改協議事件，因爲受到社區的反對，又改了回來，說明其對社區仍是尊重的。

對比Vue框架

由於咱們主題是React，因此咱們會說React的優勢，可能帶有主觀性，也許有失偏頗。但做爲一個寫過Vue和React的人，仍是想談談兩者的一些使用感覺。

綜合起來： Vue封裝度較高，想開發者之所想。 React靈活性好，邊界把控的好。

Vue API設計簡潔優雅。 React API設計嚴謹中規中矩。

做爲一個嚴肅的、喜歡折騰代碼的人，我更喜歡React。

---

接下來挑幾點，說說爲什麼喜歡React:

• 更靈活的組件寫法，Vue推薦 .vue文件，react推薦.jsx文件,就內容而言，.vue導出內容是一個對象,而.jsx自己就是一個合法的js文件，導出內容是一個class，能夠寫成員方法，在class體外定義方法變量，組件之間還能實現繼承。寫法與功能上react更增強大。

• 單向數據流，與之對應的是雙向數據綁定，由angular獨創，它的出現大大提升了開發的效率。而Vue一大特色就在於此：實例加載時將data屬性（或data函數返回對象的屬性）註冊爲響應式。這裏的data屬性更可能是一種應用state的概念，開發者要麼將變量定義爲data屬性，要麼定義在data函數裏，前者可能形成冗餘的響應式，後者形成代碼的晦澀難懂。單向數據流保證了數據流的純淨與簡單。

• 良好簡便的jsx支持 jsx絕對是個很牛掰的發明，在js裏寫html標籤，雖然也有瑕疵，但瑕不掩瑜。這直接賦予了jsUI操做能力，況且React是jsx的原始地。雖然Vue也支持jsx語法，但聲明式視圖註定了不會好用。

• 清晰的state管理，應用到了必定的規模，會用到狀態管理插件，React有redux,Vue有vuex,redux形式store是以props傳入的，所以能夠在生命週期componentDidUpdate裏對props.store做比對處理, 而Vuex形式的store的更改須要在watchers裏監聽才能感知，這可能致使邏輯的混亂。相比之下，React的單一數據流的好處就展現出來了

• 完全的組件化思想，在react裏一些皆是組件，連路由都是。這樣的設計系統而統一，而Vue雖然說也是組件化思想，但界限貌似沒有劃好。

固然了，Vue相比React簡單很多，API設計簡潔優雅，可是雙向數據綁定在小項目中的發揮出色，在邏輯複雜的項目中註定了冗餘與維護困難。在我看來Vue更像一個青春張揚的少年，朝氣蓬勃。而React則是一名成熟穩重的中年，一絲不苟。因此沒有好壞，只是理念不一樣而已。

談談jsx

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display. React堅信渲染邏輯與UI邏輯天生融合：事件處理、狀態隨時間變化、數據的準備與展示，這意味着jsx是React的一個核心設計，由於web應用的核心就是這三個

關於jsx有如下幾點須要注意：

• 本質是對象：jsx會被Rect編譯爲對象，最終再渲染爲html。所以可做爲參數，可做返回值返回，可賦值給某一變量
• 不侷限在組件內，函數、class組件、普通的函數均可以的
• 大括號語法作插值、傳值

再來講說jsx中的標籤及其屬性：

• 天生的html標籤，這個很少說，屬性只能是字符串，注意若是經過大括號傳入非字符串值布爾值、對象、函數該屬性會被忽略。<div className="div">我是一個div</div>
• 大寫的組件標籤<MyCompo lover="someone" married={false} />，屬性可爲任意值。全部屬性合併爲一個對象傳入組件內。可是隻有字符串才能展現，假設傳入了一個布爾值，想做爲文本顯示是不可能的，這顯示出React的嚴謹與專業。有一個特殊的屬性：children表示做爲組件子節點傳入的標籤

//函數組件
function FnCompo(props){
	return (
		<div className={props.className}>
			{ props.children }
		</div>
	)
}
//class組件
class ClassCompo extends React.Component{
	render(){
		<div className={this.props.className}>
			{ this.props.children }
		</div>
	}
}
//分別使用
<FnCompo className="fn">
	<div>我是一個child標籤</div>
</FnCompo>

<ClassCompo className="class">
	<div>我是一個child標籤</div>
</ClassCompo >
複製代碼

看出端倪了嗎？

• 函數組件更適合用於純粹的UI渲染，更加簡便。
• class組件繼承自React.Component有完整的生命週期，更適合編寫有應用狀態的組件

再談談高階組件

來段官方的介紹：

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. 高階組件是一種組件複用技術，不是官方API，只是一種組合模式。

總結就是：

• 拆分+組合 = 複用。這個過程就是HOC發揮威力的過程
• high-order，也是一種按順序過程，高階組件在前，返回組件在後。

舉幾個項目中的例子：

• 路由攔截，先進入封裝的高階組件，再來check，決定視圖流向
• 分發store(redux),提供的provider就是一個高階組件

注意：高階組件、關聯組件的關係跟父子組件關係有很大的不一樣

• 前者便可做props關係，也可做父子關係，後面只能作父子關係。
• 生命週期執行順序不一樣，前面的從外到內，後面的從最裏層開始到最外層
• 須要在全部頁面組件（一個頁面單元）mount完畢後執行一個初始化操做?封裝一個HOC

HOC與關聯組件

class HOC extends Component{
	render(){
		return <this.props.template/>;
	}
	componentDidMount(){
		console.log('我後執行')
	}
}
class Template extends Component{
	render(){
		return <div>我是一個child節點</div>;
	}
	componentDidMount(){
		console.log('我先執行')
	}
}
class App extends Component{
	render(){
		return <HOC template = { Template }/> } } export default App; 複製代碼

畫張草圖鞏固一下

---

小結

本文介紹了React，談了React的優勢，jsx語法、高階組件。其中不可避免有些主觀的成分在。內容有深有淺，不可能面面俱到，不足之處望讀者朋友們見諒。

下一篇咱們會介紹視圖控制器-路由的概念