作为一个前端工程师,前端框架是必须会的,所以开始学习React。
学习的方法是:先实践,后图文记录。React官网:https://reactjs.org
React中文网站:https://www.reactjscn.com
Github地址:https://github.com/facebook/react
React 技术栈系列教程:http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html
概念
这是*的概念介绍:https://zh.wikipedia.org/wiki/React
React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript 库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件("data flows down")的模型,数据改变时对HTML文档的有效更新,和现代单页应用中组件之间干净的分离。
它由Facebook、Instagram和一个由个人开发者和企业组成的社群维护。根据JavaScript分析服务Libscore,React当前正在被Netflix、Imgur、Bleacher Report、Feedly、Airbnb、SeatGeek、HelloSign等很多网站的主页使用。
截至2015年1月,React和React Native在GitHub上的加星数量是Facebook位列第二的开源项目,也是GitHub有史以来星标第九多的项目。
历史
React由Facebook 的软件工程师Jordan Walke创建。他受到PHP的HTML组件框架XHP影响。该框架首先于2011年部署于Facebook的 newsfeed,随后于2012年部署于Instagram。它于2013年5月在JSConf US开源。
逐句猜解:2019.01.29
为数据提供渲染为HTML视图的开源JavaScript 库:说React是用来显示数据,是个开源JS库
React视图:这个视图估计是看到的界面效果吧
React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染:可以自定义HTML标签来渲染
提供了一种子组件不能直接影响外层组件("data flows down")的模型:定义的组建是子组件,不影响父类组建
数据改变时对HTML文档的有效更新:效果是这样的,怎么做到的还不明白,,确实做到了数据更新,界面更新
单页应用:所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体验。
单页应用中组件之间干净的分离:组建分离,对比其他不分离的应该能看出来,现在看不出来
它由Facebook、Instagram和一个由个人开发者和企业组成的社群维护:这是说后续更新没问题吧,有大公司在更新维护,不会说凉就凉了。
特点
声明式
React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。
以声明式编写UI,可以让你的代码更加可靠,且方便调试。
逐句猜解:
目的:是创建交互界面,数据改变界面立刻随之改变。
声明式:应该是和命令式相对的,类似what和how的不同
组件化
创建好拥有各自状态的组件,再由组件构成更加复杂的界面。
无需再用模版代码,通过使用JavaScript编写的组件你可以更好地传递数据,将应用状态和DOM拆分开来。
逐句猜解:
组建化,复杂逻辑的有效方法
组件传递数据,不用模板了,,不太理解了。。应用状态和DOM是怎么拆分的啊
一次学习,随处编写
无论你现在正在使用什么技术栈,你都可以随时引入 React 开发新特性。
React 也可以用作开发原生应用的框架 React Native.
逐句猜解:
无论你现在正在使用什么技术栈:适合所有人学,很好React Native:移动端,说明生态好
入门
React 教程_入门视频教程-慕课网:https://www.imooc.com/learn/504
前置知识
Sass快速入门 | Sass中文网:https://www.sass.hk/guide/
概念 | webpack 中文网:https://www.webpackjs.com/concepts/
GRUNT:JavaScript 世界的构建工具
CommonJS规范:http://javascript.ruanyifeng.com/nodejs/module.html
在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
js模块化编程之彻底弄懂CommonJS和AMD/CMD!:https://www.cnblogs.com/chenguangliang/p/5856701.html
JSX
尝试理解React:感觉React所谓的虚拟DOM,其实是个类似HTML的文件,只是没有调用DOM去执行,,每次更新内容,虚拟的DOM文件会对比出你需要更新的内容,,再调用DOM之心