React 记录(1)

时间:2020-12-26 05:35:02

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

前置知识

React 记录(1)


Sass快速入门 | Sass中文网:https://www.sass.hk/guide/

React 记录(1)


概念 | webpack 中文网:https://www.webpackjs.com/concepts/

React 记录(1)

React 记录(1)


GRUNT:JavaScript 世界的构建工具

React 记录(1)


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

React 记录(1)

JSX

尝试理解React:感觉React所谓的虚拟DOM,其实是个类似HTML的文件,只是没有调用DOM去执行,,每次更新内容,虚拟的DOM文件会对比出你需要更新的内容,,再调用DOM之心