歡迎訪問我的 Git , 這篇文章的地址在 這里
這篇文章總結(jié)關(guān)于React的知識, 主要是對react文檔的一些翻譯以及redux, react-native的一些總結(jié)
(一) 教程
- 占位
- 劉一奇老師的相關(guān)資料
- React+Redux系列教程
- GitBook Redux中文翻譯
- 阮一峰老師的 React全棧工程師培訓(xùn)教程 <br />
- 深入淺出的比較好的redux教程, 地址傳送帶
- xujinyang的 總結(jié)列表 (里面有redux等相關(guān)內(nèi)容)
- LeoMobileDeveloper的 總結(jié)列表
- 一篇該概括比較全的博文 關(guān)于 React Native，您想知道的都在這里了
- 高質(zhì)量的React相關(guān)文檔和翻譯
- 知乎上關(guān)于 react 的話題:
- 阿里的陳屹大大主創(chuàng)的知乎專欄 pure render 干貨滿滿, 推薦多研究研究.
- 陳屹老師的心血之作《深入react技術(shù)棧》中的實(shí)例源碼 react-book-examples
- 理解 React玛迄，但不理解 Redux齿穗，該如何通俗易懂的理解 Redux哪痰？
- 看漫畫泽论，學(xué) Redux
- 阿里的陳屹大大主創(chuàng)的知乎專欄 pure render 干貨滿滿, 推薦多研究研究.
(二) 實(shí)例
- 一篇比較好理解的 TodoListDemo
- 基于 react + react-router + redux + webpack + ES6 + less 的完整項(xiàng)目, 對
React和Redux,Router也解釋的比較全,
地址在 這里 - 非常好的具有文字展示和評論功能的社區(qū)軟件, 基于webpack + react + react-router + redux + less + flex.css + ES6 的React版cnode社區(qū), 傳送門
- 極簡的 Redux實(shí)例
(三)語法
- 關(guān)于ES6的語法
- 阮一峰老師的開源書[ES6標(biāo)準(zhǔn)入門(第二版)] (http://es6.ruanyifeng.com/#docs/intro) , 感謝阮大大的開源精神.
- 大名鼎鼎的JS高程設(shè)計(jì)作者Zakas老師也開源了ES6的語法書籍, Understanding ECMAScript 6
本書的介紹的git地址在 這里,
當(dāng)然, 你可以看 中文譯文 , 感謝譯者.
- 阮一峰老師推薦的一個(gè)語法規(guī)范的小冊子, 有正反兩個(gè)實(shí)例, 非常值得閱讀. 語法簡潔之道
- babel 提供的 ES6/ES7 轉(zhuǎn) ES5 的網(wǎng)站, 不錯(cuò)值得分享. 傳送門
(四)其他
-
關(guān)于 Web 前端的性能問題
-
存在的問題:如下
阮一峰老師的 也許, DOM 不是答案 提到 web 前端的性能問題Web app的性能瓶頸夺蛇，主要有以下原因步做。
（1）Web基于DOM副渴，而DOM很慢。瀏覽器打開網(wǎng)頁時(shí)全度，需要解析文檔煮剧，在內(nèi)存中生成DOM結(jié)構(gòu)，如果遇到復(fù)雜的文檔将鸵，這個(gè)過程是很慢的勉盅。可以想象一下顶掉，如果網(wǎng)頁上有上萬個(gè)草娜、甚至幾十萬個(gè)形狀（不管是圖片或CSS），生成DOM需要多久痒筒？更不要提與其中某一個(gè)形狀互動(dòng)了宰闰。
（2）DOM拖慢JavaScript。所有的DOM操作都是同步的簿透，會堵塞瀏覽器移袍。JavaScript操作DOM時(shí)，必須等前一個(gè)操作結(jié)束老充，才能執(zhí)行后一個(gè)操作葡盗。只要一個(gè)操作有卡頓，整個(gè)網(wǎng)頁就會短暫失去響應(yīng)啡浊。瀏覽器重繪網(wǎng)頁的頻率是60FPS（即16毫秒/幀）戳粒，JavaScript做不到在16毫秒內(nèi)完成DOM操作，因此產(chǎn)生了跳幀虫啥。用戶體驗(yàn)上的不流暢蔚约、不連貫就源于此。
（3）網(wǎng)頁是單線程的⊥孔眩現(xiàn)在的瀏覽器對于每個(gè)網(wǎng)頁苹祟，只用一個(gè)線程處理。所有工作都在這一個(gè)線程上完成，包括布局树枫、渲染直焙、JavaScript執(zhí)行、圖像解碼等等砂轻，怎么可能不慢奔誓？
（4）網(wǎng)頁沒有硬件加速。網(wǎng)頁都是由CPU處理的搔涝，沒用GPU進(jìn)行圖形加速厨喂。
上面這些原因，對于PC還不至于造成嚴(yán)重的性能問題庄呈，但是手機(jī)的硬件資源相對有限蜕煌，用戶互動(dòng)又相對頻繁，結(jié)果跟Native app一比诬留，就完全落在了下風(fēng)斜纪。 -
解決方案:
- FlipBoard 的解決方案 react-canvas
具體實(shí)現(xiàn)詳見 60 FPS ON THE MOBILE WEB
中文譯文
- FlipBoard 的解決方案 react-canvas
-
