React 记录(1)

作为一个前端工程师，前端框架是必须会的，所以开始学习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之心