欢迎访问我的 Git , 这篇文章的地址在 这里
这篇文章总结关于React的知识, 主要是对react文档的一些翻译以及redux, react-native的一些总结
(一) 教程
- 占位
- 刘一奇老师的相关资料
- React+Redux系列教程
- GitBook Redux中文翻译
- 阮一峰老师的 React全栈工程师培训教程 <br />
- Redux三部曲
- 阮一峰老师的 技术栈系列教程
- 深入浅出的比较好的redux教程, 地址传送带
- xujinyang的 总结列表 (里面有redux等相关内容)
- LeoMobileDeveloper的 总结列表
- 一篇该概括比较全的博文 关于 React Native，您想知道的都在这里了
- 高质量的React相关文档和翻译
- 知乎上关于 react 的话题:
- 阿里的陈屹大大主创的知乎专栏 pure render 干货满满, 推荐多研究研究.
- 陈屹老师的心血之作《深入react技术栈》中的实例源码 react-book-examples
- 理解 React，但不理解 Redux，该如何通俗易懂的理解 Redux？
- 看漫画，学 Redux
- 阿里的陈屹大大主创的知乎专栏 pure render 干货满满, 推荐多研究研究.
(二) 实例
- 一篇比较好理解的 TodoListDemo
- 基于 react + react-router + redux + webpack + ES6 + less 的完整项目, 对
React和Redux,Router也解释的比较全,
地址在 这里 - 非常好的具有文字展示和评论功能的社区软件, 基于webpack + react + react-router + redux + less + flex.css + ES6 的React版cnode社区, 传送门
- 极简的 Redux实例
(三)语法
- 关于ES6的语法
- 阮一峰老师的开源书[ES6标准入门(第二版)] (http://es6.ruanyifeng.com/#docs/intro) , 感谢阮大大的开源精神.
- 大名鼎鼎的JS高程设计作者Zakas老师也开源了ES6的语法书籍, Understanding ECMAScript 6
本书的介绍的git地址在 这里,
当然, 你可以看 中文译文 , 感谢译者.
- 阮一峰老师推荐的一个语法规范的小册子, 有正反两个实例, 非常值得阅读. 语法简洁之道
- babel 提供的 ES6/ES7 转 ES5 的网站, 不错值得分享. 传送门
(四)其他
-
关于 Web 前端的性能问题
-
存在的问题:如下
阮一峰老师的 也许, DOM 不是答案 提到 web 前端的性能问题Web app的性能瓶颈，主要有以下原因。
（1）Web基于DOM，而DOM很慢。浏览器打开网页时，需要解析文档，在内存中生成DOM结构，如果遇到复杂的文档，这个过程是很慢的。可以想象一下，如果网页上有上万个、甚至几十万个形状（不管是图片或CSS），生成DOM需要多久？更不要提与其中某一个形状互动了。
（2）DOM拖慢JavaScript。所有的DOM操作都是同步的，会堵塞浏览器。JavaScript操作DOM时，必须等前一个操作结束，才能执行后一个操作。只要一个操作有卡顿，整个网页就会短暂失去响应。浏览器重绘网页的频率是60FPS（即16毫秒/帧），JavaScript做不到在16毫秒内完成DOM操作，因此产生了跳帧。用户体验上的不流畅、不连贯就源于此。
（3）网页是单线程的。现在的浏览器对于每个网页，只用一个线程处理。所有工作都在这一个线程上完成，包括布局、渲染、JavaScript执行、图像解码等等，怎么可能不慢？
（4）网页没有硬件加速。网页都是由CPU处理的，没用GPU进行图形加速。
上面这些原因，对于PC还不至于造成严重的性能问题，但是手机的硬件资源相对有限，用户互动又相对频繁，结果跟Native app一比，就完全落在了下风。 -
解决方案:
- FlipBoard 的解决方案 react-canvas
具体实现详见 60 FPS ON THE MOBILE WEB
中文译文
- FlipBoard 的解决方案 react-canvas
-
网友评论