[討論] 初探 reactjs 疑問

[cyclone350 (老子我最神)]

大家好

最近常常聽到 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://www.ptt.cc/bbs/Ajax/M.1457189813.A.157.html
→ rarex: react只有提供view的部份 後面的架構要看你怎麼搭配
→ rarex: 如果用flux redux這些可能要花時間了解和熟悉一下
→ rarex: 個人覺得react的元件化方式比directive好用太多了...
→ dlikeayu: 你比較的東西是錯誤的...一個是lib一個是framework一個
→ dlikeayu: 是render引擎(較類似於mvvm)
→ dlikeayu: 開發快就coffe+angularjs，但效能的話...
→ dlikeayu: 也有人是玩backbone+reactjs+react-material-ui(或其它)
→ dlikeayu: 但開發就要很熟練要有自己模組，相對輕巧很多
→ dlikeayu: 但兩者一樣都能用gruant或gulp來減少一堆開發環節跟編譯
→ dlikeayu: 上的問題(預轉coffe 預轉jsx)
→ dlikeayu: 如果對flux有興趣，可以先去理解dependency injection
→ dlikeayu: 這是angular最常用到的，這樣比較好比較差別
推 zoko741235: 感謝樓上 剛剛去查了BACKBONE+REACT的應用 很有趣
推 mrbigmouth: ......backbone + react!??  這兩個能一起用???
→ y2468101216: 可以啊
推 TonyQ: reactjs 這種大型 lib performance 不會是最重要的優點
→ TonyQ: 另外你用 angular base 去想的話只會得到 angular 最簡單
→ TonyQ: 但兩者觀念其實有差，你這樣比法會有問題
痾... 已經兩個人說這樣比法有問題

讓我解釋一下

1. 效能

y大給的網址有解釋了

2. 好不好學

關係到工程師一開始使用時的開發成本及維護成本

3. 好不好 trace code

關係到維護成本

4. 開發時程

關係到開發成本


我覺得比這四樣東西沒問題啊，

2, 3, 4 點是很主觀的 (根據團隊不同也許會不一樣結果)

所以詢問有使用過人的經驗



我並沒有把他們的觀念、程式架構、使用方式來做比較。

→ TonyQ: 但你既然也寫了 angular ，沒什麼特別必要的話繼續寫無妨
→ TonyQ: backbone 跟 react 一起用當然可以啊，沒什麼問題。
※ 編輯: cyclone350 (123.193.196.217), 03/09/2016 23:30:02
→ dlikeayu: 要維護喔，先從AMD,CMD開始暸解，然後試著使用
→ dlikeayu: browserify或webpack去做模組管理；最後就是像寫
→ dlikeayu: namespace那樣去分配你檔案位置的結構，基本上就已經夠
→ dlikeayu: 乾淨了
→ mrbigmouth: backbone跟react是怎麼個一起用法?
→ mrbigmouth: react component應該完全取代backbone的view吧?
→ mrbigmouth: collection跟model有辦法塞進state裡面嗎?
→ mrbigmouth: 還是說綁change事件再去set component的state?
→ mrbigmouth: 還是你說的一起用單純指各寫各的?
→ dlikeayu: 為什麼塞不進？無論是在render或onmounted時都可以啊
→ dlikeayu: backbone model本身就有update事件了，官方文件在view
→ dlikeayu: 裏面都只是在綁一層呼叫model那邊的update
推 dlikeayu: 而且你問問題的方式不太像在“問問題”....
→ mrbigmouth: 據我所知react的state必須是immutable object 不能是
→ mrbigmouth: backbone那種物件吧
推 mrbigmouth: 也就是說  react跟backbone一起用  要不就是捨棄react
→ mrbigmouth: 本身的state change=>re render模式  改成用backbone
→ mrbigmouth: 的event觸發react的render (react有辦法這樣改嗎?)
→ mrbigmouth: 不然就是捨棄backbone的event driven機制  單純使用
→ mrbigmouth: model/collection的各種方法以方便render處理
→ mrbigmouth: 我的猜測是這樣  感覺都不太有必要合用  歡迎指正
推 mrbigmouth: 再講清楚一點好了 據我理解 React 跟 Backbone這兩個
→ mrbigmouth: 框架有根本的理念差異  前者是單向資訊流通  後者是全
→ mrbigmouth: 事件導向 因此而來的設計APP方法也不太相同  兩個一起
→ mrbigmouth: 用的結果好像就只能捨棄其中一個(同時捨棄該框架好用
→ mrbigmouth: 的地方) 暫時我是感覺不到兩個框架併有什麼好處
→ mrbigmouth: 這是我的想法  歡迎指正