redux 並不是只和 react 結合使用的,它也可以和其他的很多類庫結合起來一起使用,即使你還未開始深入使用,你也可以閱讀文中的部分內容。
在深入 redux 、testing 或是其他更高階的使用之前,我們還是先開始 react 吧。
sudo npm install create-react
-gcreate-react
cd react-demo
&& npm install
npm start
reactdom.render
使用 setstate 來改變元件的狀態 state
元件生命週期相關的方法
事件和表單
幾種建立元件的方式
復合元件 composeable
高階元件的使用和定義 hoc
在你遇到應用的狀態管理問題之前,你可以通過擴充套件應用的方式來解決,或是你在你的應用中壓根就沒遇到過這樣的問題,因為你可以使用 setstate 來很好的管理你的應用。但其實 setstate 也不是那麼高效,畢竟它也不是萬能的。也許你會發現你已經在忙於處理太多的元件內部狀態,那麼,該是時候引入類似 redux 等狀態管理庫了,不過有幾個事情需要注意:
在學習 redux 前得先學好 react
可以閱讀以下you might not need redux
不是所有的狀態都需要放在 redux 的 store 中,也不能完全取代 setstate
一般地,會有三種不同的方式來宣告乙個元件:
react.createclass 使用這個api來定義元件
react es6 class components 使用 es6 的class 來定義元件
functional stateless components 通過函式直接定義無狀態元件
// react.createclass
var todoitem = react.createclass()
// react es6 class
class todoitem extends react.component
// functional stateless component
function todoitem()
那什麼時候該用什麼方式來定義呢
無狀態元件:適合用來宣告沒有元件生命週期方法並且沒有內部狀態的元件。這種寫法很簡單,就是乙個純函式,乙個狀態輸入,輸出就是elements。
(state) => view
這是一種最輕便最高效的元件宣告方式,這種元件沒有任何的內部狀態,使用的時候也無法訪問到元件的屬性,所以一般建議能用這種方式宣告元件的時候就盡量採用這種方式。
如果你需要使用元件生命週期方法,並且需要去處理元件內部狀態(this.state) ,或者需要獲取這個元件(this.ref)。那麼,這個時候建議你使用es6的 class 來宣告元件。
另外,建議還是別用react.createclass這種方式宣告元件了,facebook 官方在react v0.13版本的時候就說過,以後的目標是使用es6 classes的方式來定義,會完全廢棄react.createclass
should-i-use-react-createclass-es6-classes-or-stateless-functional-components(
react-create-class-versus-component(
輕量級的函式式無狀態元件
專案中一定需要去宣告很多元件,我們可以一起來完成乙個 todolist 元件:
function todolist()
)} );
}我們還可以按函式的方式將其拆分
function todolist()
); }function todoitem() ; }
這個例子有些簡單,無法很直接的看到這種定義方式的好處,但是當我們將元件拆分後將更具有可讀性、可復用性以及可維護性。這種方式很靈活,而且很輕鬆就可以宣告多個元件,一口氣不費勁,推薦使用。
簡潔的函式式無狀態元件
我們可以使用 es6 的 arrow functions 讓元件的定義更加的清新。假如我們有乙個這樣的元件:
function button()
); }
我們可以將其用 es6 的語法改寫公升級一下:
const button = () =>
); }
還可以再簡單嗎,我們來試一試:
const button = () =>
但這種方式就只允許我們的元件只有 props 作為輸入,elements 作為輸出。但如果我們希望在這中間做一些業務邏輯呢,我們可以將其再修改一下:
const button = () =>
); }
木偶元件presenter component和容器元件container component
好吧,這兩個詞聽起來實在是彆扭,聽我慢慢道來。
react 中的元件其實也只是應用狀態的一種表現方式,這讓我們可以非常清晰的通過 (state) => view 這樣的方式來理解。並且,元件內由處理程式來改變 state,從而改變不同 view 的展示。
那麼,木偶元件和容器元件有什麼區別或是怎麼理解呢。
當專案中使用了redux的時候,container component 有個更好理解的名字,就是connected component。這類元件和redux的store進行了連線,並且獲取到store的資料之後進行一些操作後傳遞給子元件。
container components容器元件關注事情是怎麼做的,presenter components木偶元件關注怎麼展現,各司其職,其樂融融。
什麼時候該用 container components 容器元件呢
前面聊完,我想你應該知道兩者的區別和使用場景了,但也許你還不太確定什麼時候該用什麼型別的元件。你可以定義乙個container components,然後把一些presenter components都作為他的子元件,這樣父元件關注如何工作,子元件關注如何展現。
但慢慢的,你發現父元件需要給子元件傳遞的properties和callbacks越來越多了,咋辦呢,現在是時候來介紹兩者如何結合使用了。
一般地,有個很好的原則:堅持presenter components不變,只新增一系列的container components去適應業務邏輯的改變。
把container component放到什麼地方呢
父元件container component只關注state如何處理,現在你可以評估一下你的preenter component下面的子元件了。也許你會注意到preenter component下面的子元件沒有被其他元件使用,那麼找到這個元件的父元件,給它新增乙個用於管理狀態的container component,這樣,父級的container component就能夠變得更加清晰輕量,因為它沒有必要去處理這些所有的狀態。
很多presenters component也許只是包含一些只是為他們自己使用的props和callbacks,那麼,也給他們加上乙個container component去處理這些邏輯,把這些邏輯放到container component,這樣將使父級的container component 再次變得輕量。
寫出你的第乙個高階元件hoc吧
想象一下你需要展示一列內容,但是你不得不首先通過非同步的方式獲取這些內容項。現在你需要乙個載入指示器來顯示目前正在傳送請求中,等請求完成後,你再展示獲取到的內容項。
不過你可以更進一步來學習hoc了,乙個高階元件hoc將會返回乙個增強的函式。
// 定義乙個高階元件
function withloadingspinner(component) ) {
if (!isloading) {
return
分配時間的一些建議
一 儘量減少做無用功。勿衝動,再好的想法也不要衝動,做完了才發現白做了就晚了。勿求全,不要把目標定的太高,就像裝修房子,每個人都恨不得精益求精,最後花費巨大的錢財和時間,很多事情夠用就好。另外要學會放棄,人生可以做的事情很多,不必貪多,猴子掰玉公尺,最後一無所獲。這樣也許可以節約你80 的時間,還省...
IT職場生存的一些建議
對大部分人來說,工作都是生活不可缺少的部分 一方面工作的收入可以解決我們生存的問題,另一方面我們在工作中可以實現自我價值。人的一生最美好的時光大都花費在工作上或與工作有關的事情上,因此把工作做得漂亮一點,收入高一點,職位公升的快一點,從而使你在工作中有一種愉悅的心情是很重要的,這大概也是人這一輩子快...
關於答辯的一些建議
本文出自 4月只寫了兩篇部落格,主要原因在於畢業設計,然後做了很多想做的事。五月就從這篇部落格開始 我們那個教室很嚴,掛了很多人,作者也就勉強通過。先說說哪類人容易掛 1.堅持 是自己寫的然後乙個技術問題也答不上來 2.答辯語無倫次,答非所問,也就是表達問題 3.在 導師質疑批評你是時,跟導師搞起來...