From 100a5488c9215d672f01649766db29c39bfec675 Mon Sep 17 00:00:00 2001 From: liscott327 Date: Wed, 24 Aug 2016 11:51:11 +0800 Subject: [PATCH 1/8] add virtual_dom --- SUMMARY.md | 1 + react/virtual_dom.md | 31 +++++++++++++++++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 react/virtual_dom.md diff --git a/SUMMARY.md b/SUMMARY.md index 44b1613..8945f21 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -42,3 +42,4 @@ * [realtime todo](./sailsjs/3_realtime_todo.md) - Week4 * [上課用練習](./react/week4_class_example.md) + * [Virtual Dom](./react/virtual_dom.md) diff --git a/react/virtual_dom.md b/react/virtual_dom.md new file mode 100644 index 0000000..0524ae3 --- /dev/null +++ b/react/virtual_dom.md @@ -0,0 +1,31 @@ +#Virtual DOM + +###為何要使用Virtual Dom? + +DOM的處理在像jQuery這些的函式庫出現後，變得容易許多，但具有愈來愈多資料的應用程式網站，整個網頁的DOM結構變得愈來愈複雜而且龐大，但有些時候我們只是僅僅只做耶些小更動就要全部重繪，這樣太浪費效能，而Virtual DOM會透過標記找到真正需要重繪的部分，有效節省不必要重繪部分的效能。 + + +* 從Virtual DOM 生成DOM 帶來了一些好處 + +* 標籤之間的空格從一開始就被排除，不會帶來意外的空白元素的字符串被自動轉義，不會那麼容易導致代碼注入 +* JSON 的Tree 很容易組合，組件化很自然就實現出來了 +同時，JavaScript 可以在Node.js 和瀏覽器同時運行，能夠共享代碼同時得益於DOM 會自動完成Diff 和Patch，DOM 樹就能夠自動隨著數據改變進行更新，更新DOM 。就像是MVC 描述的那樣，Model 被更新，View 就跟著更新，就這麼簡單 + + +###Virtual DOM + +* 是一份純資料的 Tree 物件，對應到實際的 DOM + +* 是自定義 Component 提供了中介的虛擬層，讓開發者能描述 UI 樣貌與邏輯 + +我們透過定義 Component 來表達「UI 什麼情況該如何呈現」。而「要用什麼手段來達到這個畫面改變（如何操作 DOM）」 ，React 則會自動幫你做，而且絕大多數情況下都比你自己來要做的更好 + +###Single Source of Truth +* UI 要長得如何，應當是取決於當時的 Model 資料以及 UI 狀態而決定 + +* 把畫面全部洗掉重新再畫，顯示結果通常一定是正確的 + +* 每次都重繪全部的實體 DOM 顯然是不可行，但是重繪 VDOM 則相對高效許多 + + +當畫面需要改變時，根據最新的 UI 狀態重繪出新的 VDOM Tree並與改變前的舊 VDOM Tree 進行全面式的比較與計算，其中新舊差異的地方，才真的會在實際的 DOM 上發生操作改變 From 4121737decd48625c3a52ad9500bb3de7b271d97 Mon Sep 17 00:00:00 2001 From: liscott327 Date: Wed, 24 Aug 2016 12:38:32 +0800 Subject: [PATCH 2/8] add week5,week6 --- SUMMARY.md | 4 + react/week5_class_example-copy.md | 4 + reactnative/style.md | 259 ++++++++++++++++++++++++++++++ 3 files changed, 267 insertions(+) create mode 100644 react/week5_class_example-copy.md create mode 100644 reactnative/style.md diff --git a/SUMMARY.md b/SUMMARY.md index 8945f21..7fae601 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -43,3 +43,7 @@ - Week4 * [上課用練習](./react/week4_class_example.md) * [Virtual Dom](./react/virtual_dom.md) +- Week5 + * [上課用練習](./react/week5_class_example.md) +- Week6 + * [style](./reactnative/style.md) diff --git a/react/week5_class_example-copy.md b/react/week5_class_example-copy.md new file mode 100644 index 0000000..2d86bcf --- /dev/null +++ b/react/week5_class_example-copy.md @@ -0,0 +1,4 @@ +# 上課用練習 +請各位先將以下兩個專案 __fork 到自己的 github__，然後 `git clone` 並都 `npm install` + * [React Router Practice](https://github.com/tz5514/hellojs-react-router-practice) + * [Redux Practice](https://github.com/tz5514/hellojs-redux-practice) diff --git a/reactnative/style.md b/reactnative/style.md new file mode 100644 index 0000000..5a4f3e6 --- /dev/null +++ b/reactnative/style.md @@ -0,0 +1,259 @@ +##樣式變換 + +目標:按按鈕變換按鈕顏色 + +* 建立樣式 + +* 先在下方const styles內新增樣式blue和green,如下 + +``` +const styles = StyleSheet.create({ + blue:{ + backgroundColor: 'blue' + }, + green:{ + backgroundColor: 'green' + } +}); +``` + +* 建立按鈕 + +* 事件需匯入TouchableOpacity來產生按鈕,如下 + +``` +import { + TouchableOpacity +} from 'react-native'; +``` + +* 按鈕功能判斷 + +* 點擊改變true或false來判斷是否點擊來做顏色的變換 +在constructor(props)中設定active初值,如下 + +``` +constructor(props) { + super(props) + this.state = { + active: false, + } + } +``` + +* 設定onPress功能的狀態變化 + +``` + onPress = () => { + this.setState({active: !this.state.active}); + } +``` + + * 在render中顯示button的按鈕 + +``` + + + button + + +``` + +* 在onPress={this.onPress}加入樣式的變化判斷 + +``` +style={[styles.blue, this.state.active && styles.green]} +``` + +程式碼整段會變成如下 + +``` + + + button + + +``` + +說明```style={[styles.blue, this.state.active && styles.green]}``` + + 1. 畫面預設會先執行styles.blue + + 2. 按下按鈕後this.state.active成立變成true就會執行styles.green + + 3. 再按一下this.state.active變成false就會回到預設styles.blue + +所有程式碼 + +要複製直接套用記得把裡面有`app2`的改成你的檔名 + +``` +import React, { Component } from 'react'; +import { + AppRegistry, + StyleSheet, + Text, + View, + TouchableOpacity +} from 'react-native'; + +class app2 extends Component { + constructor(props) { + super(props) + this.state = { + active: false, + } + } + onPress = () => { + this.setState({active: !this.state.active}); + } + + render() { + return ( + + + + button + + + + style 樣式練習{'\n'} + 按按鈕變換按鈕顏色 + + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, + instructions: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, + blue:{ + backgroundColor: 'blue' + }, + green:{ + backgroundColor: 'green' + } +}); + +AppRegistry.registerComponent('app2', () => app2); +``` + +##使用Flexbox布局 + +排版方向，預設是 column +flexDirection 方向排版比例 + +將以下加入到render中 +畫面中會變成垂直2:1的顏色條(亮藍色:亮綠色) + +``` + + + View1 + + + View2 + + +``` + +###justifyContent & alignItems + +* justifyContent + + flexDirection方向的子元素排版 + + 能用的值:flex-start, center, flex-end, space-around, space-between + + +* alignItems + + 垂直 flexDirection 方向的子元素排版 + + 能用的值:flex-start, center, flex-end, stretch + +如果只要設定自己元素的排版用alignSelf +例如:alignSelf:flex-start +這是設定靠上對齊 + +畫面中的分割 + +以下所有程式碼 + +``` +import React, { Component } from 'react'; +import { + AppRegistry, + StyleSheet, + Text, + View +} from 'react-native'; + +class app3 extends Component { + render() { + return ( + + + + {/*左邊(由左而右)*/} + 左邊 + + + {/*中間這一塊(由左而右)*/} + + {/*中間裡面包含上面一塊(由上而下)*/} + 中上 + + + {/*中間裡面包含下面一塊(由上而下)*/} + 中下 + + + + + {/*右邊(由左而右)*/} + 右邊 + + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + flexDirection:'row', //這裡設定由左而右排,若未設定預設是從上而下 + justifyContent: 'center', + alignItems: 'stretch', + backgroundColor: '#F5FCFF', + }, + welcome: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, + instructions: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, +}); + +AppRegistry.registerComponent('app3', () => app3); +``` From 594da027334825ed687ac69c1aa790a3b9daed39 Mon Sep 17 00:00:00 2001 From: liscott327 Date: Wed, 24 Aug 2016 13:51:25 +0800 Subject: [PATCH 3/8] update --- reactnative/style.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/reactnative/style.md b/reactnative/style.md index 5a4f3e6..3c23819 100644 --- a/reactnative/style.md +++ b/reactnative/style.md @@ -1,3 +1,39 @@ +##StyleSheet.create + +駝峰式的 CSS 屬性名稱 + +``` +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, +}); + +``` +類似CSS的樣式程式碼撰寫方式 + +##使用樣式 + +* 單樣式使用方式 + + `` + +* 使用多個樣式 + + `` + + 與 Object.assign 相同，若有衝突，右邊優先 + +* 以條件選擇樣式 + + `` + + 預設執行前項`styles.base`樣式，當後面`this.state.active`狀態改變為true或成立時執行後項`styles.active`的樣式 + + ##樣式變換 目標:按按鈕變換按鈕顏色 From 97f60d9f85fee97b41876059a16cb55ed02b12fe Mon Sep 17 00:00:00 2001 From: liscott327 Date: Wed, 24 Aug 2016 22:08:45 +0800 Subject: [PATCH 4/8] add pic --- reactnative/pic.png | Bin 0 -> 22548 bytes reactnative/style.md | 12 ++++++++---- 2 files changed, 8 insertions(+), 4 deletions(-) create mode 100644 reactnative/pic.png diff --git a/reactnative/pic.png b/reactnative/pic.png new file mode 100644 index 0000000000000000000000000000000000000000..df85d79b2647719ab3725007a6fc3990b0b6ff0c GIT binary patch literal 22548 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 literal 0 HcmV?d00001 diff --git a/reactnative/style.md b/reactnative/style.md index 3c23819..49091c1 100644 --- a/reactnative/style.md +++ b/reactnative/style.md @@ -186,7 +186,9 @@ AppRegistry.registerComponent('app2', () => app2); ##使用Flexbox布局 -排版方向，預設是 column +目標：畫面佈局與分割 + +* 排版方向，預設是 column flexDirection 方向排版比例 將以下加入到render中 @@ -225,10 +227,12 @@ flexDirection 方向排版比例 能用的值:flex-start, center, flex-end, stretch 如果只要設定自己元素的排版用alignSelf -例如:alignSelf:flex-start -這是設定靠上對齊 -畫面中的分割 +例如:alignSelf:flex-start這是設定靠上對齊畫面中的分割 + +以下範例圖示 + +![](pic.png) 以下所有程式碼 From 1e43a4e06cf108693098c2bb1f37a378b9f99e73 Mon Sep 17 00:00:00 2001 From: liscott327 Date: Wed, 24 Aug 2016 22:10:30 +0800 Subject: [PATCH 5/8] update pic --- reactnative/pic.png | Bin 22548 -> 15690 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/reactnative/pic.png b/reactnative/pic.png index df85d79b2647719ab3725007a6fc3990b0b6ff0c..9be8f3b6a3c299907a49d1946e380ff68aa4fc2e 100644 GIT binary patch literal 15690 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
G^2?`6v5?b3|C3ki&y<% zcw_`QJgWD$pi4a{b5RM?ZOSJ{0=q53+_2kbm1O+aZLHxS;Y z`uJ)+@w?IaEHrW+7&{~)C#Eh3nCXTTKcFLT*q(>dl>y{{AP+4cDUZBgbIc-^>l>mSxx|M+2i{&Rivg=UQNN7g6$)n$1UrNe#IW)^p7 zDLB|$HU%Bld~E*q>8Z~IeGO8&rR7t~v*X`!9_-kfOE=?q#J;Ducbs{t{md-!kBs9j`=0L6eVeVl!y<9=%--RBPY>$u zbKSVa#$IgH#YT^8;Kc@ZZt%zkA#R9+4WYCl8aD*={|jb28#6L(v8`7zre*m+BA{ObCfiScfm>~H5-}oeud15h1bhpfrD9E*K{`!l% zsy@G?_M-rZ(me<S86ryOKnx90+$7Caa&Ldp`T(uK-`$SEeB8a~j`ZjncRsl?GxW z0WnI-4K(?}Dt2eal3=pqbbUOUK2b(07o-Y_BcS++bT9iU!zhj)Ox9Nh@=@)MdvIpm z&{dz%!p{@CiJ{(fkMF{LKwJ7|iO!@@=3gMF1&}+wDO1c0Hn^IHi%|y(x#-?$MU}kv7U)s-rtwNnP zs&%KU66iwT|9$ts!--yZIHoXJA;!jxW%^|W(kB*S|A4oSa-%GxIh`;i1 z)66LLQ@ravzy2tj8Dcv35p&0Cp8Cvy2itfRP82cANQGd7{2`oy_(~Jv!I$j% zCJP@ZwxvSFv6&ZD3!#IC$-7vV%Wu?wJTi{r6ca;}=X`p1{^!g3Xh-*7pRDP!lxKYJ zM~||6Qd`k3eynoa4j$<-I|&vMvGYUKU-0OhjU|6D_a7%%jw-)^mO`(nTm&$SI?@MIE-?xF7ycODG!xi|9QzpH6$ z!G<~C2r4#0n~n5oBYoOPpElB`jr3_FecDK${%4W7G11wWZvFo^ri1>NsJKY}rp6Z% zg|!d5C^=ak<;xVVazroJ9lWIUyoi;nt<_}r%m49J@&EX)pa!z@cjYntf*J9+i){{pgLHEaL? literal 22548 zcmeIaXEdB`)HW==5mMBs(IQ%m=q(|LXwf^78AOX9dYL-~!DypSv=F`bZYCkd3}T{p zf)hu)_ObW5j~)J8N1f&>%T+2WDjJQa zPxPs%&MH$;ool{)7WhO;G!R5ZWip}hQsbX27oMvT|F3d$^x zl+S4Jr}JoveA2J3?0Rar`dlzm? zxEdRdYt?j z-6HYRtn$8Fed-)m&EBr}sWg09`V)DSKnL(xYIgYs-AqNo-i;X6yd)IxPIlc%8Ue$l z7W@K6KeUF2kU=MXU)7Tn5`@faUXh7MwaKx`nKMT%-OXuGJ5a)c84 z^^SA!L?dU)?pCOPuCb933&%WK>51Q9@#$jD>t751iO0sD?5{Wb?bu^e9M5s}IsE!4ZfJL}`OOx?T60tHj zHug3=$n{zs{;C!QZ{{9A9@~TAl_HEmC954A-QA+nb7zb13l7VZQujpV^^FR#rorwS z)nx9^nX+{is;fmRm%5FGrzJeQzOSc7Z`~5OFW@whRbV&KHoP7={`Q{JL}lR4c&Vs@ z{?d(JB46&$OHoM_#)P^8c~k4UKyq2VjY5s5vx;O4>aPKWpoyCb!c=Ghx3nx}=h z+X25RfB5^urR%J*a4c-ajlAdvvENy%#<9!3z1P0`H1F{(ew~C>Mh1qw`e#U;>-=3K z3kwTXu@MnhkMb=`8yZZJ7B_fDw5Fbw@i7O?hA`H>b{+kcmdrn!_Q3Z2!?kpuX=d5C z1(Pk)FssA9GL9y-4gUh`d7D)hhlkL{p_BAdLkF!5?{ZN}$%3PUhU2tup3v&=cLW+i z6Y_3xz;t@jY^bn$#>7rtGa>RB;p$bD$F|nCv(Y1&W@J)oZlOdOVkXCNvz(ZHRG810 zkkDngOEOB}7)AMSM{p2PRrJ@QTSA)BFH%L{!v30S^js1wZ>a(d*PqhK0SyGqOTekK z`$4*sgh|JH&402Zd1P=(lt7PvL{!kPTla?RTqp8$D?SdsI@p-HBk5vV|2kdBEbpy; zXO5|UI)kt|hFEA(|C&wqZEQKO3$|4MT3jgUuv6(ZhAl4qHztl-&U>xl#rLz}8@b8W zO%N>n*a6J3?!Rp#ZXBCAl2gGcy8dMn`GG#sLq!EmxEkpXU2rJv3@QlRY5J*4@;{g? z>{yrcX_(7fB&o02RJ-&kS$V%Yh(3NTXtr{UEq{7pVHIB1dd;F{j6BZaTvuKjWQd z+d}kjBc`#`8jDW)UH$#~g(mTQ+WVU`q9&vDZZp8vtEabjTTxdD3!!SibBxxs-PqTX`$z~9eO<7 z$0){v(&{plZ8y_`4D3E0Tu3iN=C0-=t6aM_lPM>R@tOq9&x?$ShDpgrNh8}PuUjcc zsPVMzSy}Pn*(#hjYBt)+4RwD;w#IqFX2a^S?Z_%6cYZ<2C3q2Oq(pLBjN$>#1RO?y z7sTr-n(6nITGZ!hr-qJxkZ>L*Zup?&-v0TOA_mq`BJBb$giX^LXJ85ZoZW*KY5J3m z5O)x-e>|`IY&eT?eB=&!6_+uuZ@yPC!*FZ zhYQIz(*SDdr4vL1oCfluw7U7UQhouhG6;`nY{xg(;taK-Irtd)Mv^}x_s5-6rQDJP z%RA5nnppZ^jry2$nX2l^MF+&HrPq)VFE8)1 zYMhJwPLDX~N_^-~g!objqxC&O!D9LG9hR42YSFBI0ERQr)AK^b_!zrJF43|lV3SJh zChA-XwU+&5R&rM|Ai72IY3C3v7Dj%4N7Xn*L4#s$@>I%XAn|b9gOqITFR+I+P)`(V z44ATzIzj)iy(xY~;b163G}=4wz_as0E>w@W&Uk*Ygyy}pwobhg9{@edApCSTncO=F zSZp;Kt#XY)o#2eW_D&towF^Rtxj+bv7eqpzS2pAjzLC2Kq*_M6v{e!NjMfA5!zH*Ddiq2s+io@)_uo={TV%OdsKl8|T6Um9|avCOnm*s8c)#y2B2LkyoAbE&2&2Kh&g;2=jdJ*KKg zOjE5>672!56DHQydVbHE7jIT)zkk2PP#*9no&J*G{T%Bg)SY;^7vP@Rb!_^{E~$jk z70R*NIZBxzq}Q}Xd|k9DZ#AFN2#^8%*|A<>Xp7rACAj?MW*jsSLj7o?Ful@eCdfpM zsP|P3i&s15qLDk8^ptWLec-b(`6YG9BJKe1+w``OSZ`8pT}1-~!+`A$#sxx;57&{ngV|>xC=eVa?4xLKDMH0&dbW=4 zvm56w>8_6N?|@HCLW-E3>!#&gHO8{8b|WIP8?5rnpeLfjp_yJU+Pg@C4D>axhWvXj z1Tf;J4@Yq`N9%{gcE6N<~4?#uk)XO6Yh{`{~IKp!AJ?E(Y~f=3>&6f=ri%LDHA<)3)ldsx7IRK+mZrFNw0W z5`O|73s}sW7*I)UX~D&;Lj4c+1-;i=SBH))4%iO6P15z^^ zH%Tg={QOj1<*py%_^*AgHzy_*?~C|1b9G~5E8)>om&kZszoQG=X=MK5`}grkiRJO) zO&^Z?uf|p^H9VXJb=Qgrf6 zh4ZjrH!?tFfsE1-nb2ye8Brqs`L(g`sU%)jMEsP=ZQuqFm8$`h-X_hS<)g=Q+{M9! z1yn|fsM3tah|kI7`lVsvOlWtA(Is*A)FINT0U_+((|${diHQJDdbKuMNeFqUl_yO) zIY<`Gf!u6d9>~XKD$N{L3V;Mxrdv-EO{@hJG*|9w%K2`6F%&+MufV4l;FS?!3j3pA z=iw6U8~t!gv;Na)#IE3vslx_}HM*`BvrV}OA-y_}^4~VSev&zZYF=3mai-0!dz@PN zzMnzC?d0+5Hi!8^D#euY+jfZ~X`g-a#D?6QGl1QBomK(;8K7=y7{na!XPpTp8C9R* zHm1z2re+>{9c!CY%Y7YDBJrSdmWiU)&ynt4p&{{NR5AiGt5%B-LA09FjVg-{prA2; zDV?L0=cJGZ^A#oRx)Ol&F>x-fw3Sq^UWr z_{{#r!3-379I!G{|MSBo+N9wwYW<}6+0l8uR>>renETWI=zk)*ia1cnKNV8p^^i3R zsba4oa<#`avz%1b06y@O%4miD?B^CKnugUn@ps3;N{`AXq)4;Sez%+A`v%z2_ZA}3 z6}Cosnb8aC*Qm_mT1dY~U+t|7;pBI;fEWnyFCK&jye{a(8#`*CtHA5YU5>M32SGjw zDanj{1(-^1ZmvG4Fz#dNDMnZ?YcKL*w90%or{Q9a;Q&ElPnzulK>x@)%wD^UeRwBJ zMo@BnEHhcLrkM6V!)3TPtMZXEa7JM_W z%}sw5Id11o*-4Z;Nq2nhCKVis4+a|S9I&cAIS97kVXmg4Rd zTLe~@Na#{#ju|Ej%H+ojw-|5qsW00={+O2mU(IM<(xMNDJTgU5dvyRtUm58&n2Y>p& zKm`Qwp&sBh#W~ouSomx(Ey8}q(V;Gh5UpW27uZVl*fcp(Y53dN=y?97%|Tmx6O5M- zsY!@Wzb6O`CT; zfB*%eooH|e1K^&N6wRT81Q4bW7y8=QYyk<>JPMF7FZq*x9S0i*_3a*RzeJ)NNi)VZ za2+A*pxhV@J0tC$quzG7^in+`&}H#PeLj%8rpx*0v{FcY=Jl_qfUvVdOwx+E8llM| z2{Qo_=>nH;GXhI@f$|j#O;1jl^)je5clMfFPqqW&|5DeAZO1TCafY3iz^-d{j~<1! z@`HZ8sgG(dwHojqo4$(ADYa;)4Sr!mtyqCfN~%QhgP;3v$BXW}Oo>leyi2QjsVYq& zy11Q>R@cagPRUhtWIpM1aTE6#9z>;&7i*WhxLxq*CoI?!4}pg~OqT%upIf%JAg0fty^!Jd7Ej_t=F?`IPR zE5zaNA1-Y+t(Jw~;*VyPA-rO=u(l4SkPZMgax@ny+I#v{W=*>VAYvb3_q&;8JO zrtad5C?mFDTMctGS!RPvbx$Y@lvm98kx1tqwxx5qgA4Y$hNeuGNI7yJlD7Vd@(T`y zO$DE<0~t6Abhmtda|T73A+OK)@2%`D>q2EGd~QUkf+Sx(_hYsBJh;PZi8Nx*l<3~7 z5&md{#n872M>Xn!{;het|s!dd^bGbwnk6NYU zGRA^So}(^EiN?Zy0?F#iV4;Mf;oPq*mDAMB65v%O`!sGqWrw;vKm(0Dnc94YE<=%z zU1n4tG9aR8SP#7~qiARGbczPfyE1fbx-ZQY>6MeEk69yg6GPn_)x!E-ei``sWk=08BFDv_9uiL)9?5e^P+*ALi6cz_r^R3^Cyv7SQ$kXy8 zA1wi)HbJp-yxIXbAEP8Z(V#Wk8x==yc#;x@@PY1e`!Ct?_!1f}J{{aI4;im_xT5?Pvl;#TG-9`zdw zt3LBE*C%^k5C@AJZB4!lMbbBt+xChT&o(~T(EKpB>J)CrRT3Sbidxb1{^20cHm~=G zg*la@J`Bdz$q?kO7sMa z6E))I;NeW4qg;Oy-E=fgN2d%4@zK(8A0Nou+m_Jt3l^8wX{Ac{kJPLv81qTi2>}OPb#_GHn;>V6V;jL$&ep*4C7(!->ULAo$GxFRN z?TEia;kqts#}%j)yp53l=o%Hb%Gz1$JcrR|j&bO{I-6N!BcXw**z-uc~R> zo>aQjp|J8O(7#6M4uc`s$Ew)T z1LQ$#5A(@>JxZAQWCBH+_!p6|rYKZPLxph0A9wvd&F6{khVU6;Os+y}XrL*M48$t?AKx&w-5TVa({-;hb4|S;2K2+&5luPLB_f+sgQUO(&+~ zXjo!fqVZ%-0$1oDW8_|(ht`v zmq}JlZ#As$FTkgf9+*!n^l8zFVsm`6 zHwL>juO(=Mtdv!xrA}!h%SvHg4m) z<>hbKflI*s3Ab|6_-RUZTBQnFwV1gJ=6Dn4;9_!FDU!RRR?Gy%e=;|_`NV`9966^X z8j;wwWny>Gp)qt}`^$p*{FiF3jP%1<>Eo6g$w{or1x3O0#k+|c(aaX?ZRt@*d9=R@ z#lc)j_E332hoHTlaFc+DLNS>he76TAAnEFFB`r7Yh%GhI(nq-Eh>CcZp@BrAjj#VSxX;v|hJ3 zF^I7sm@s*?v2yeaHRzw4wSVOR6}benqR(XGKR2EsJ+_i4=}{U{-xZ^R?JO?eR}MUD zO{Y8aG(F^AbtOj!#)>|MjdxS$L|Oi1n@GoJf6}Myx@T8%zqk5eSeEiYPY#Ubc(NJ8 ze^)Yc>5ylWPEK*Xv72lvhxi_&)jhG{OI7W+rva-4_UaM(3$PZ@G4TOdqyV-s_9L>MD zI(PQu$9!4~j^qxo{E!Al;TWtyp;vM1c3O1yXhy;Zcm6SJ5^i|gZiLU#q#(kxd|fQ~ z$dM6w;~*(`kJWRUX@>B%bGDf|T6`boI##tn3q5S_O_y_?G!_vR5qUjQwvjw@S{Kxa z=d(MRZqG4BE6dNXj+rJ$*OnohGwGeUdbUTEAe zbrdLyfLcs(A*Ix#WHKR}jlM48X1_6q2`&52Kg~Z5g)JKzQ6^>nAwGVI8{L>{&ezRE zy3HWJn!5oxD}5$9eEyjg^FUz<+4n(t^@B;qPw3wnVu74?7*n9=1&&dW3_RQdZg=gi zpW4|i^p#18cI~%@h1;OFzCS_#=2Aib(}Q7h!7$0kiUE*68Y||@34YEEuHXW10sF6p zexZW?{SNjx3idq|_Wd052NvcJG|V3^fi6mbF5UrMq=isBL8v7m)a)3h!M|VhcaQ#_ zqrWcl7e@Xf?~9{)`t{;$c7!a7E@Hz%5W>gvzRIAQ}XkksnC z_Ki7x;>3JSiC=&DSOAwgjgA_BCPamL|KHF5|1g0tYUbk0vz2tAVc(7p3vT_JV*;Pa zF|~~-H$40(E-qrLetDCXjuORTX%pHkS)^*2%4oAVCk}2zef*z?1-Rtz zDC6iN29Uhfm3CZjsk5}lL*Pv`Tx-;`0qUPM<0@~l|F^PT7|GzW_5jk0^P`+fgY?IN z0g(il0$Uq3=pyK%AdnR=GdFX8gx9zY9gUkB$@d>#WCl`adgc#dYClc8=@gljS6yb* zAKv^gg^v1M*~*o6yN!O^NGi?uza$zc&fcH@=n`~!UPW5;Bf}W7dQ0`+T%1b*oIE6J zuw6-~bB&7>e}fk+KFKb;N**pI{lbbk!&c80#Oy&N)z9C`Ej-!IQXUpZLrB<-VbZHQj6wHyz*S)ugf z*2boMmpFa>$1N1s+SOU`wy^x0vz-4{2x1{FewQ^>qz|_I^n={gc;|*oI)k>UuB@G-@Y#znlFuru@Nayl>m`)?o!H3s&#Xz{nO z^S5U8x32fMWcjzO`?q5Kx2pg5!s73x&foj0zju0nuPgsv>HaUb)j19&0d-OrWt@K; z|Jr?iTEi$5dWfJ`vkwrAZMMc$i=LzU$At?_^$#l`AOGLV)BnG1yxjli53=Z4Tc66} zj~S@~Mt=9Z?t6L z>w|-UhAQhtYtS~_pN3uD7f>?*{n|<83lh%TF9Lh;__ z3zfp1N18W%k#*4`Ycd4nj17h7N zYy28$c0YXFw~|%{koQ}N13c~z(At!^G)340RJ6h5oy>BJ`sidS9T)6Byq=DS{#e|2?Z4t#oQr<*ll5C0xw;@XK%G6hHQNqMAuu;L|2*09<;x>v zt@}J0kjD9-Va!zpz%k%e=c^9d)Qi_D5d~Df;P^^F%3BCD_*a#kcJo6@bRZ>JaH~2S zRIt>v?^l=&0rxXiYQ__%u-SUR9xxPsUxF9dCy+Y_E)k5%1^>4C&;1_p*M;@YX4U&bS+ zL?=5@ivXdoGWDz51uTgII?4b6fVQN-gIKmp(LW8fhVL>r19Cd7=|xD%V+e;+Uv`Is z;tpa!M@~C5<=my~lTZq&97XmAxkyZ3|4IH#kDU=ZSRMe>y<$Np``W#!y1~B)12eVG z$yz926a<$+E}NV;(*Qi92k?s1^E+6e2a<^|=S{+5qxxmc`r1OS@!D6dtWVT;v!|?I zT0ZY11TQ`5Wu_!ps#wk+{VV*I>T~iH4M%o z6&Vo$(HU;`*#v+CV-E;bWM!OfBvrf{0hAIpt@u5HB1?#NO2YA`?sdZ%#IF20p4iHZ zoM3g%fEam3XJ8+#YMq8A@AAk7n4kxemkI@M(TSC^dase zaDjY+)naDLnxd_{Co>d9FZ1V|V46p0kcRiy#~&_Ed2|Z{YFUqT*v3K0)vz3(+uff3wLDhb9h*XI$Ymg;;L>EoWw3KhD3QeA3cW=Kz+!9?PJ=Q_ zY22y&cXmQV1GzNJ>o_WIJtH(rdf+h@ZmklK`G)M0?bCSxA7~YsilDpiU=mc!a_{l< zk-C9%x4x>!=q#RqqJa|$u8!odeuw8p(9ImrzPrR8t0yrL({)8q0SsV>e&k@*yh{{Y zp#m^5;xJ!{^5gr5?66H9Z7y{xyKQgx#&mPWFJg zaDHj`J~rkPPHwPF1dJ^N@5IX7fMIk0%ll{59gy=t;3UUlK{^l17Xsn#MJ#{z22dB^gnSdZo~#kGF4p1 zcmc1qcG#05?@0cmuJpO3y_H(x9c;)0598%{%B9o?=;*=@o8R^XSK2}0Pg_X)6Icyg z6_|~myJ}4z;3UZ1eoceSDlX=U3R@L$xnXwjgloMrn3t&fqO^zlN-MME}g`VzHEw^qZZ)}o9{Ob3bH<1C;Eq(|$RrGCOv&Xg( zm4jY~?juY0?7?2a^}z8YtR@^6e4|ssXV=uc-JEX4KE{lnDwA_G;(@US9PYl_pgLe& z$oLGL7vlj;c`z|HPO`mHD^*^1IvM3x1z^qNJOiu)xob4eR;DTzul;Ml#LCpP0kHHg zEkzr8tr${CxQ7KB&Aha`QpGw}0mS3wmEv;6g#-h9+tJPvWsVW`R3}F3x?5KW0mm}2 znNo@WT2}`s)n+%k%Sn|o;A%ZPU-6=nc(zcV?N^4i;(P&Zl``iOWxyCA19T`YhX}X; z_MDKK_HY@H6<^sd^#Epi@H5H#R>%)q)VahV-UV{q3IQl5An#Hu6GeG|3a|^y;2P=% z4~y`$N#n8#K%@&y0T?!GuI`o949>>h%Y?OIi$a8;02iwgX|!ax>u6T-;<5ha ze{Jl(StRU4V*kqWJC_fWr&I#;BIK~m0<^3JJ<>+tz67Q`h2T|g zsK~chKq+L8e7vkez<$CGjL{vJIe8h1w+KEZg z$%AQlK|Y;^I6w;oOpg&r#vJmZl;QPwVdteD1oziBpt>$zFd7yoW9$)HA82y_?o6V? zL#%Xans_Srt$a9dC!~W+bg?EpZj#6_;HQrh1;poUjqleKPRI1nBn@HP3{36- zLy0W4MYPcF;SsQLj~ICJD*hPDqs0JU^Q^k3vH9r+cg}f@b-XPzfUiBdd;spN>MEYq z8|FRGVUNHY6LcF<0K0#trsW60XA)|ABzSSyd@T)@+)spGQ-EdR`hLE4!XDwoJYLkr zs&xH>T|duI7?$Q#Z{28v9m_B5UQqVC$ayC-5Q8B81JMLjd*X90P?4Dis z0vB8pZ=7}P7(qOpA2T*xnbE z&#*{O#Hja5w>?(%i&nC2`v}A^QRWmlZFnpUTX27XJKUHM$4mIrP5cTVHXr~lqV~gv z5Cr+_6A`iUA+*~yDu}SwZS)Ykril?6i@uk3kJO_sPvQ2aZiBlZA@9bzB})>A`9r<0nOdmX|#vPq|182 z17v~Zps^e41yPFUuB}3<|b4xukv+t~F(z6m4FsI_*%eQt-HNls|c4 zIZ8-)2Y@&rPIeIydu`z+f`w1%t7or_Ix>kP$cetye-Ey$&3<=G2l23bC){vI znL3pyP2SB{VpEDw`Kr$i9y`AL`)BT$3p zyXn9kZD!N>c})-=n`3IP1j>DyuE@{GmuV$96jy#a$bmbU@Gibk5R;8}MlcK>i5G8= zr_?-KbO7=XZU0zSh4@^rwNbtO7Kj$D7#MUh*Uj1$E{15whUVI+E8lgEz0>6ZukVR1 z!%W`w%0^k<```;GsB>Mbz5`F4!=_}A)h~nQ6DE68rF11l8x8uo8nIDQ)AwvJE08Nd zE*k$WX63JUDxrJ)vGSfG#i z=8+He`{8NtxdO5RrGj>x;$c{=rvwDj+N=cf=snj$tlg(QMeC|`2?h~e z0sQ0csrd*l#U0E(AM4|29dA!%54@6vbNQz#5)+;&2)&5Q%w+jw7s~Y^x#xiskqWMx zl5q4+OCsk{eli0B6AGykOPq9MD$gux0}FShYcEtVc~F9G|+ z!#jWmD?nW2cqLF&>5>+y&c+jOFTYNQ3MQqs8QP%X zs=S@&fH5STdw`%Ock%|Jv}-pPh{)wFglE7Z1=g$44pe5Qf#2rns5|vQRNIZf;Maii z3PH9YWxN9NEM1;lwe37orfn?y_RsUiRG^5kz;yW^Ap+L4+Wu#+;>p@lCKQSEsBs#4 zc9qLSx+q!18B&4_!E6aTC#&V@Z2z*;LOWysso{}XvTnL-65FT~bPbq1^PJ>w>e1jf z_ahu0f0|uC%Zcb56_vRXKqg9z;0fzbpI%tw;-mX$E!2-6vA^doywq zIj^=mzR!6cM~9-j`}jQ9=;es??;wg)t=-)l=kHv*Bk|j-G4ZP7W;=4ycJwEoCh^;! z6Nc|=y}fCOxScg@Z(1t~#s5pd%~CP4^XN!s`)W>jTabyv$TeXm$KIBxYKk;tU)qu;-u zx!2{=I59S6>(oUoxE%j&bZTnq)x)byU#nkGPkgM5ilTX0-gEW3@9?^JKr8zNrbh)D zPY=dq;)J`a^8U0xsB3Kv^7RGMGk^d78)xH6ONCjR*stAq^xH^ORJ477Elq&yf{UQ} zSX$>OnXLFL8~!c4wpOAcH~*Qe{!MT|KtRH*a_x2cKa9!WB!$m@)X2}ze;yCA{jLD} zJ|$?`4c6-36_XAYyz}AFd6kL+)zG(%Q?KVqXF{(6y6|5$31qVmKcM7HZ6-5!JCz`U5? z@ZGFx)|?DqeuSObaQ;gBgV30Bh7Uqhs4qp``cX;1uD7t}?q8pGi0Apvc#aCwSy(Y8 zT`rFXC4PJG{$lpK)YLmVSexV@Oo^{dM2FvVq$%>vetGx0;koAMcij9ucStxw`u!@S zCLg)rX{Ap7hclMSn=FN#k1@ON(k%GqqE%{ZL+mNQUF5r>7qP&i|3up6~nqIJ}e6Grbj{*H{amiF-QxH){-QTpr0@v&^;Z_jt{sy4%(J%}kkA0nO^Wo2ViZ(i!( z8ZDPpy(m5%qiXTuBKz}{awtX9b#}P%LHvnLA!pWE_Dq!f#@qNaFsU9r;or9RUeL~e z8`TddSm_A|UT``85K&8pU3_e9>ha$8heB777L9-W^+|tU-(R1uG*RWfin+nir9*uZ zf3>?ZUgHM(VO9@gU{TIkn1G6fyA74hpSj@oSzoMr_0hWBLfyxppYg7$)-ErjsaZ3F zW3D>?5icLZ-`6QL{nQ`PGX2BATrR&l3!b82&~xporu==!r{5P2{hcs2A%(1cXEhZ9 zB0ZC}TArvgozESmdzqLmT$WUReB0h0*(+SVY!S&dKL`a$1Z&56n9Z^pfn%JXa0ip^lxe(e6vv45yQ&))W$d2-0f~$E)jU z?Bop+-_1Ypp=q1#DLaZ%PqGWr4Jz-+x5*2?wgLE32{1Rw9%hzgCtMLMfHpQUajrFo z^8_b>&5~+=9p^Gt1Lgz;M1& From 82fb47389ad0a40f43652265a8a5f5243a2e5e35 Mon Sep 17 00:00:00 2001 From: liscott327 Date: Thu, 25 Aug 2016 21:31:52 +0800 Subject: [PATCH 6/8] update --- reactnative/style.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/reactnative/style.md b/reactnative/style.md index 49091c1..5009484 100644 --- a/reactnative/style.md +++ b/reactnative/style.md @@ -1,4 +1,4 @@ -##StyleSheet.create +I##StyleSheet.create 駝峰式的 CSS 屬性名稱 From 0f701f0f9d8143d5373ef82d0c46f308f2f39b97 Mon Sep 17 00:00:00 2001 From: liscott327 Date: Thu, 25 Aug 2016 21:36:10 +0800 Subject: [PATCH 7/8] update --- react/virtual_dom.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/react/virtual_dom.md b/react/virtual_dom.md index 0524ae3..ec2a6c8 100644 --- a/react/virtual_dom.md +++ b/react/virtual_dom.md @@ -1,18 +1,21 @@ #Virtual DOM -###為何要使用Virtual Dom? +##為何要使用Virtual Dom? -DOM的處理在像jQuery這些的函式庫出現後，變得容易許多，但具有愈來愈多資料的應用程式網站，整個網頁的DOM結構變得愈來愈複雜而且龐大，但有些時候我們只是僅僅只做耶些小更動就要全部重繪，這樣太浪費效能，而Virtual DOM會透過標記找到真正需要重繪的部分，有效節省不必要重繪部分的效能。 +DOM 操作的效能成本非常的高，React 為了解決開發者在手動操作 DOM 時可能造成的效能低落或失誤，建立了一套虛擬 DOM（ Virtual DOM，以下簡稱 VDOM）的機制，程式記憶體中將有一份對應真正 DOM 的 VDOM 物件，以代管 UI 儲存的資料與邏輯。當一個 UI 因為資料改變而需要進行畫面變動的時候，React 會根據新的 UI 狀態重繪一份新的 VDOM Tree，並且與變動前的舊 VDOM Tree 以高效率的 Diff 演算法進行比對，然後其中的差異才會真正的由 React 自動幫你更新到實際的 DOM 上，反應出畫面的變更。 +透過 VDOM 的機制，開發者將不必煩惱如何操作 DOM，而可以專心於撰寫 UI 的定義與互動邏輯。並且由於 React 能夠自動去最佳化的處理 DOM 操作，前端 UI 程式將可以有效的降低操作成本而達到優秀的效能。 -* 從Virtual DOM 生成DOM 帶來了一些好處 + +###從 Virtual DOM 生成DOM 帶來了一些好處 * 標籤之間的空格從一開始就被排除，不會帶來意外的空白元素的字符串被自動轉義，不會那麼容易導致代碼注入 + * JSON 的Tree 很容易組合，組件化很自然就實現出來了 -同時，JavaScript 可以在Node.js 和瀏覽器同時運行，能夠共享代碼同時得益於DOM 會自動完成Diff 和Patch，DOM 樹就能夠自動隨著數據改變進行更新，更新DOM 。就像是MVC 描述的那樣，Model 被更新，View 就跟著更新，就這麼簡單 +同時，JavaScript 可以在 Node.js 和瀏覽器同時運行，能夠共享代碼同時得益於 DOM 會自動完成Diff 和 Patch，DOM 樹就能夠自動隨著數據改變進行更新，更新 DOM 。就像是 MVC 描述的那樣，Model 被更新，View 就跟著更新，就這麼簡單 -###Virtual DOM +###Virtual DOM * 是一份純資料的 Tree 物件，對應到實際的 DOM @@ -21,6 +24,7 @@ DOM的處理在像jQuery這些的函式庫出現後，變得容易許多，但 我們透過定義 Component 來表達「UI 什麼情況該如何呈現」。而「要用什麼手段來達到這個畫面改變（如何操作 DOM）」 ，React 則會自動幫你做，而且絕大多數情況下都比你自己來要做的更好 ###Single Source of Truth + * UI 要長得如何，應當是取決於當時的 Model 資料以及 UI 狀態而決定 * 把畫面全部洗掉重新再畫，顯示結果通常一定是正確的 @@ -29,3 +33,4 @@ DOM的處理在像jQuery這些的函式庫出現後，變得容易許多，但 當畫面需要改變時，根據最新的 UI 狀態重繪出新的 VDOM Tree並與改變前的舊 VDOM Tree 進行全面式的比較與計算，其中新舊差異的地方，才真的會在實際的 DOM 上發生操作改變 + From 2e9b38f52fe0999e94292e117b7a31b8733eff3c Mon Sep 17 00:00:00 2001 From: liscott327 Date: Fri, 9 Sep 2016 21:03:44 +0800 Subject: [PATCH 8/8] fix conflict --- SUMMARY.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/SUMMARY.md b/SUMMARY.md index 811871d..bbf282f 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -42,13 +42,11 @@ * [realtime todo](./sailsjs/3_realtime_todo.md) - Week4 * [上課用練習](./react/week4_class_example.md) -<<<<<<< HEAD * [Virtual Dom](./react/virtual_dom.md) - Week5 * [上課用練習](./react/week5_class_example.md) - Week6 * [style](./reactnative/style.md) -======= * [SASS](./SASS/sass.md) - Week5 * [Redux](./redux/redux.md)