作者cyclone350 (老子我最神)
看板Ajax
標題[討論] 初探 reactjs 疑問
時間Sat Mar 5 22:56:49 2016
大家好
最近常常聽到 reactjs，聽說很不錯用很多優點之類的，然後執行速度很快
所以今天簡單看一下 reactjs 的介紹說明及 Hello World
看完後有幾個疑問讓我很困擾
1. reactjs 速度很快...
從下面兩個地方看了說明
http://www.slideshare.net/JustinWu13/j-queryreact-js
http://andyyou.logdown.com/posts/234130-reactjs-reactjs-decrypt
主要理解是 reactjs 有 virtual dom，他會把一系列的 dom 更新先存在 virtual dom
，
最後由 reactjs 統一更新到 dom 底下。
但是，我對 angularjs 理解也是有差不多的概念，我們異動一般的 js 物件
當 js 物件產生變化後，angularjs 將這些異動部分更新到 dom (所謂的$apply)
既然 angularjs 跟 reactjs 都一樣是統一幫使用這將異動值更新到 dom
那為什麼 reactjs 會比較快?
是 reactjs 更新 dom 時有進行最佳化嗎? 如果是這樣，那 angularjs 的 $apply
有做最佳化的話，是否就可跟 reactjs 一樣?
想了這些之後，直接去 google，看到一篇文章
http://blog.500tech.com/is-reactjs-fast/
嗯? 文章大意是說是在 reactjs conf 2015 時用的範例比較不那麼公平
事實上只要簡單修改 angularjs demo 的程式碼，就會發現他們速度其實差不了多少
看了這篇文章後更懷疑了 reactjs 是比較快的說法了...
2. reactjs 很簡單很好學
就我的理解，reactjs 很像是 angularjs 的 directive...
reactjs 有用 jsx，這樣的混搭的語法糖對熟悉 js 的人也許很好用
但真的好學嗎? 這也許有點主觀... 但是我真的沒感覺可以很簡單上手
3. trace code 方便嗎?
因為比起撰寫程式，我們更常閱讀程式
所以能夠快速地看懂程式碼並且找到 bug 是很重要的
這樣請問各位有用過 reactjs 的前輩了
相較於 jQuery 與 angularjs， reactjs 的閱讀性如何?
4. 開發時程
相較於其他 js framework，reactjs 開發時程是花更多時間還是更少時間? (開發時
間含測試程式)
因為本人沒實際用過，也沒特別深入了解相關機制
想請問各位前輩用 reactjs 的心得
還是我在觀念的理解上有誤? 也歡迎指證
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.193.192.133
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1457189813.A.157.html
1F：→ rarex: react只有提供view的部份 後面的架構要看你怎麼搭配 03/06 23:56
2F：→ rarex: 如果用flux redux這些可能要花時間了解和熟悉一下 03/06 23:56
3F：→ rarex: 個人覺得react的元件化方式比directive好用太多了... 03/06 23:57
4F：→ dlikeayu: 你比較的東西是錯誤的...一個是lib一個是framework一個 03/07 02:48
5F：→ dlikeayu: 是render引擎(較類似於mvvm) 03/07 02:52
6F：→ dlikeayu: 開發快就coffe+angularjs，但效能的話... 03/07 02:54
7F：→ dlikeayu: 也有人是玩backbone+reactjs+react-material-ui(或其它) 03/07 02:57
8F：→ dlikeayu: 但開發就要很熟練要有自己模組，相對輕巧很多 03/07 02:57
9F：→ dlikeayu: 但兩者一樣都能用gruant或gulp來減少一堆開發環節跟編譯 03/07 02:58
10F：→ dlikeayu: 上的問題(預轉coffe 預轉jsx) 03/07 02:58
11F：→ dlikeayu: 如果對flux有興趣，可以先去理解dependency injection 03/07 03:04
12F：→ dlikeayu: 這是angular最常用到的，這樣比較好比較差別 03/07 03:07
13F：推 zoko741235: 感謝樓上 剛剛去查了BACKBONE+REACT的應用 很有趣 03/08 02:30
14F：推 mrbigmouth: ......backbone + react!?? 這兩個能一起用??? 03/08 16:11
15F：→ y2468101216: 可以啊 03/08 16:23
16F：推 TonyQ: reactjs 這種大型 lib performance 不會是最重要的優點 03/09 18:23
17F：→ TonyQ: 另外你用 angular base 去想的話只會得到 angular 最簡單 03/09 18:24
18F：→ TonyQ: 但兩者觀念其實有差，你這樣比法會有問題 03/09 18:24
痾... 已經兩個人說這樣比法有問題
讓我解釋一下
1. 效能
y大給的網址有解釋了
2. 好不好學
關係到工程師一開始使用時的開發成本及維護成本
3. 好不好 trace code
關係到維護成本
4. 開發時程
關係到開發成本
我覺得比這四樣東西沒問題啊，
2, 3, 4 點是很主觀的 (根據團隊不同也許會不一樣結果)
所以詢問有使用過人的經驗
我並沒有把他們的觀念、程式架構、使用方式來做比較。
19F：→ TonyQ: 但你既然也寫了 angular ，沒什麼特別必要的話繼續寫無妨 03/09 18:24
20F：→ TonyQ: backbone 跟 react 一起用當然可以啊，沒什麼問題。 03/09 18:25
※ 編輯: cyclone350 (123.193.196.217), 03/09/2016 23:30:02
21F：→ dlikeayu: 要維護喔，先從AMD,CMD開始暸解，然後試著使用 03/12 03:19
22F：→ dlikeayu: browserify或webpack去做模組管理；最後就是像寫 03/12 03:20
23F：→ dlikeayu: namespace那樣去分配你檔案位置的結構，基本上就已經夠 03/12 03:20
24F：→ dlikeayu: 乾淨了 03/12 03:20
25F：→ mrbigmouth: backbone跟react是怎麼個一起用法? 03/15 18:10
26F：→ mrbigmouth: react component應該完全取代backbone的view吧? 03/15 18:10
27F：→ mrbigmouth: collection跟model有辦法塞進state裡面嗎? 03/15 18:10
28F：→ mrbigmouth: 還是說綁change事件再去set component的state? 03/15 18:10
29F：→ mrbigmouth: 還是你說的一起用單純指各寫各的? 03/15 18:11
30F：→ dlikeayu: 為什麼塞不進？無論是在render或onmounted時都可以啊 03/16 02:28
31F：→ dlikeayu: backbone model本身就有update事件了，官方文件在view 03/16 02:29
32F：→ dlikeayu: 裏面都只是在綁一層呼叫model那邊的update 03/16 02:29
33F：推 dlikeayu: 而且你問問題的方式不太像在“問問題”.... 03/16 02:33
34F：→ mrbigmouth: 據我所知react的state必須是immutable object 不能是 03/16 10:43
35F：→ mrbigmouth: backbone那種物件吧 03/16 10:43
36F：推 mrbigmouth: 也就是說 react跟backbone一起用 要不就是捨棄react 03/16 10:51
37F：→ mrbigmouth: 本身的state change=>re render模式 改成用backbone 03/16 10:52
38F：→ mrbigmouth: 的event觸發react的render (react有辦法這樣改嗎?) 03/16 10:52
39F：→ mrbigmouth: 不然就是捨棄backbone的event driven機制 單純使用 03/16 10:53
40F：→ mrbigmouth: model/collection的各種方法以方便render處理 03/16 10:54
41F：→ mrbigmouth: 我的猜測是這樣 感覺都不太有必要合用 歡迎指正 03/16 10:55
42F：推 mrbigmouth: 再講清楚一點好了 據我理解 React 跟 Backbone這兩個 03/16 11:02
43F：→ mrbigmouth: 框架有根本的理念差異 前者是單向資訊流通 後者是全 03/16 11:03
44F：→ mrbigmouth: 事件導向 因此而來的設計APP方法也不太相同 兩個一起 03/16 11:03
45F：→ mrbigmouth: 用的結果好像就只能捨棄其中一個(同時捨棄該框架好用 03/16 11:04
46F：→ mrbigmouth: 的地方) 暫時我是感覺不到兩個框架併有什麼好處 03/16 11:04
47F：→ mrbigmouth: 這是我的想法 歡迎指正 03/16 11:05