diff --git a/13-React基础/01-React介绍.md b/13-React基础/01-React介绍.md new file mode 100644 index 0000000..8a2d7cd --- /dev/null +++ b/13-React基础/01-React介绍.md @@ -0,0 +1,215 @@ + + + +## React 介绍 + +### React 是什么 + +- Facebook 开源的一个JS库。 + +- 一个用于动态构建用户界面的JS库。 + +### React 的特点 + +- Declarative（声明式编码） + +- Component-Based（组件化编码） + +- Learn Once, Write Anywhere（支持客户端、服务器端渲染） + +- 高效 + +- 单向数据流 + +### React高效的原因 + +- 虚拟(virtual)DOM，不总是直接操作DOM + +- 高效的DOM Diff算法，最小化页面重绘（即“局部渲染”）。 + +虚拟DOM指的是：在真实DOM的上一层**映射**一层虚拟DOM。我们操作的是映射关系，而不是真实的DOM。假设页面的样式做了修改（比如新增了一个标签），此时修改的是虚拟DOM的样式，真实的DOM并未发生变化。那什么时候，真实的DOM会发生变化呢？ 当我把所有的内容操作完之后，转化为真实的DOM，此时要打包统一的渲染页面，于是真实的DOM发生变化，然后渲染一次。 这样做的话，可以减少页面的渲染次数。 + +### 相关网址 + +- 官网： + +- GitHub 地址： 截至2019-02-08，React项目已经有 121k 的star。 + +官网截图： + +20190208_1057.png + +上方截图中，有一个特性是“Learn Once, Write Anywhere”。这里的 “Anywhere” 其实指的是两个地方：一个是浏览器端，一个是服务器端。后者指的是，**React支持在服务器端渲染页面**。 + +## React 模块化、组件化 + +### 模块 + +- 理解：向外提供特定功能的js程序, 一般就是一个js文件 + +- 理由：js代码更多更复杂 + +- 作用：简化js的编写，阅读，提高运行效率 + +### 组件 + +- 理解：用来实现特定功能效果的代码集合(html/css/js) + +- 理由：一个界面的功能更复杂 + +- 作用：复用，简化项目编码，提高运行效率 + +### 模块化与组件化 + +- 模块化：当应用的js都以模块来编写的, 这个应用就是一个模块化的应用 + +- 组件化：当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用 + + +### 面相对象与面向过程的区别 + +面向对象编程： + +- 重点是对象 + +- 更加关心的是干活的人 + +面向过程编程： + +- 更加关心的是干活的过程 + +- 谁去干活儿不关心 + + + +## Hello World + + +### 引入相关的js库 + +为了通过 React 写一个Hello World程序，我们需要先引入以下 JS 库： + +- react.js: React的核心库 + +- react-dom.js: 提供操作DOM的扩展库 + +- babel.min.js: 解析JSX语法代码转为纯JS语法代码的库 + + + +如果是本地引入的话，可以这样写： + +```html + + + + + +``` + + +如果是通过CDN的方式引入的话，可以使用网站 提供的CDN链接。 + +### 代码举例 + +```html + + + + + + + Document + + + + + + + +
+ + + + + + +``` + + +代码运行后，页面上的DOM结构如下： + +```html +
+
Hello, React!
+
+``` + + +**代码解释**： + +render的中文含义是“渲染”。render 方法的语法如下： + + +```javascript + ReactDOM.render(虚拟DOM对象, container); +``` + + + + + +```javascript + +``` + + + +```javascript + +``` + + + +```javascript + +``` + + + + +```javascript + +``` + + + + +```javascript + +``` + + + + +```javascript + +``` + + + + + + + + + diff --git a/13-前端面试/00-准备.md b/14-前端面试/00-准备.md similarity index 100% rename from 13-前端面试/00-准备.md rename to 14-前端面试/00-准备.md diff --git a/13-前端面试/01-页面布局.md b/14-前端面试/01-页面布局.md similarity index 100% rename from 13-前端面试/01-页面布局.md rename to 14-前端面试/01-页面布局.md diff --git a/13-前端面试/02-CSS盒模型及BFC.md b/14-前端面试/02-CSS盒模型及BFC.md similarity index 100% rename from 13-前端面试/02-CSS盒模型及BFC.md rename to 14-前端面试/02-CSS盒模型及BFC.md diff --git a/13-前端面试/03-DOM事件的总结.md b/14-前端面试/03-DOM事件的总结.md similarity index 100% rename from 13-前端面试/03-DOM事件的总结.md rename to 14-前端面试/03-DOM事件的总结.md diff --git a/13-前端面试/04-HTTP协议.md b/14-前端面试/04-HTTP协议.md similarity index 100% rename from 13-前端面试/04-HTTP协议.md rename to 14-前端面试/04-HTTP协议.md diff --git a/13-前端面试/05-01.创建对象和原型链.md b/14-前端面试/05-01.创建对象和原型链.md similarity index 100% rename from 13-前端面试/05-01.创建对象和原型链.md rename to 14-前端面试/05-01.创建对象和原型链.md diff --git a/13-前端面试/05-02.面向对象：类的定义和继承的几种方式.md b/14-前端面试/05-02.面向对象：类的定义和继承的几种方式.md similarity index 100% rename from 13-前端面试/05-02.面向对象：类的定义和继承的几种方式.md rename to 14-前端面试/05-02.面向对象：类的定义和继承的几种方式.md diff --git a/13-前端面试/06-跨域通信类.md b/14-前端面试/06-跨域通信类.md similarity index 100% rename from 13-前端面试/06-跨域通信类.md rename to 14-前端面试/06-跨域通信类.md diff --git a/13-前端面试/07-安全问题：CSRF和XSS.md b/14-前端面试/07-安全问题：CSRF和XSS.md similarity index 100% rename from 13-前端面试/07-安全问题：CSRF和XSS.md rename to 14-前端面试/07-安全问题：CSRF和XSS.md diff --git a/13-前端面试/08-算法问题.md b/14-前端面试/08-算法问题.md similarity index 100% rename from 13-前端面试/08-算法问题.md rename to 14-前端面试/08-算法问题.md diff --git a/13-前端面试/09-01.浏览器渲染机制.md b/14-前端面试/09-01.浏览器渲染机制.md similarity index 100% rename from 13-前端面试/09-01.浏览器渲染机制.md rename to 14-前端面试/09-01.浏览器渲染机制.md diff --git a/13-前端面试/09-02.js运行机制：异步和单线程.md b/14-前端面试/09-02.js运行机制：异步和单线程.md similarity index 100% rename from 13-前端面试/09-02.js运行机制：异步和单线程.md rename to 14-前端面试/09-02.js运行机制：异步和单线程.md diff --git a/13-前端面试/10-01.页面性能优化.md b/14-前端面试/10-01.页面性能优化.md similarity index 100% rename from 13-前端面试/10-01.页面性能优化.md rename to 14-前端面试/10-01.页面性能优化.md diff --git a/13-前端面试/10-02.前端错误监控.md b/14-前端面试/10-02.前端错误监控.md similarity index 100% rename from 13-前端面试/10-02.前端错误监控.md rename to 14-前端面试/10-02.前端错误监控.md diff --git a/13-前端面试/11-00.JavaScript高级面试：前言.md b/14-前端面试/11-00.JavaScript高级面试：前言.md similarity index 100% rename from 13-前端面试/11-00.JavaScript高级面试：前言.md rename to 14-前端面试/11-00.JavaScript高级面试：前言.md diff --git a/13-前端面试/11-01.ES6：模块化的使用和编译环境.md b/14-前端面试/11-01.ES6：模块化的使用和编译环境.md similarity index 100% rename from 13-前端面试/11-01.ES6：模块化的使用和编译环境.md rename to 14-前端面试/11-01.ES6：模块化的使用和编译环境.md diff --git a/13-前端面试/11-02.ES6.md b/14-前端面试/11-02.ES6.md similarity index 100% rename from 13-前端面试/11-02.ES6.md rename to 14-前端面试/11-02.ES6.md diff --git a/13-前端面试/15-虚拟DOM.md b/14-前端面试/15-虚拟DOM.md similarity index 100% rename from 13-前端面试/15-虚拟DOM.md rename to 14-前端面试/15-虚拟DOM.md diff --git a/13-前端面试/16-01.MVVM.md b/14-前端面试/16-01.MVVM.md similarity index 100% rename from 13-前端面试/16-01.MVVM.md rename to 14-前端面试/16-01.MVVM.md diff --git a/13-前端面试/21-面试题整理 by smyhvae.md b/14-前端面试/21-面试题整理 by smyhvae.md similarity index 100% rename from 13-前端面试/21-面试题整理 by smyhvae.md rename to 14-前端面试/21-面试题整理 by smyhvae.md diff --git a/13-前端面试/22-网友面经.md b/14-前端面试/22-网友面经.md similarity index 100% rename from 13-前端面试/22-网友面经.md rename to 14-前端面试/22-网友面经.md diff --git a/13-前端面试/23-面试技巧 by smyhvae.md b/14-前端面试/23-面试技巧 by smyhvae.md similarity index 100% rename from 13-前端面试/23-面试技巧 by smyhvae.md rename to 14-前端面试/23-面试技巧 by smyhvae.md diff --git a/13-前端面试/z-web安全.md b/14-前端面试/z-web安全.md similarity index 100% rename from 13-前端面试/z-web安全.md rename to 14-前端面试/z-web安全.md diff --git a/13-前端面试/z-其他.md b/14-前端面试/z-其他.md similarity index 100% rename from 13-前端面试/z-其他.md rename to 14-前端面试/z-其他.md diff --git a/13-前端面试/z-推荐文章.md b/14-前端面试/z-推荐文章.md similarity index 100% rename from 13-前端面试/z-推荐文章.md rename to 14-前端面试/z-推荐文章.md diff --git a/13-前端面试/z-计算机网络.md b/14-前端面试/z-计算机网络.md similarity index 100% rename from 13-前端面试/z-计算机网络.md rename to 14-前端面试/z-计算机网络.md diff --git a/14-面试题积累/01-我的面试经历 by smyhvae.md b/15-面试题积累/01-我的面试经历 by smyhvae.md similarity index 100% rename from 14-面试题积累/01-我的面试经历 by smyhvae.md rename to 15-面试题积累/01-我的面试经历 by smyhvae.md diff --git a/14-面试题积累/02-HTML和CSS相关.md b/15-面试题积累/02-HTML和CSS相关.md similarity index 100% rename from 14-面试题积累/02-HTML和CSS相关.md rename to 15-面试题积累/02-HTML和CSS相关.md diff --git a/14-面试题积累/03-JS相关.md b/15-面试题积累/03-JS相关.md similarity index 100% rename from 14-面试题积累/03-JS相关.md rename to 15-面试题积累/03-JS相关.md diff --git a/14-面试题积累/03-http.md b/15-面试题积累/03-http.md similarity index 100% rename from 14-面试题积累/03-http.md rename to 15-面试题积累/03-http.md diff --git a/14-面试题积累/04-变量提升的题目.md b/15-面试题积累/04-变量提升的题目.md similarity index 100% rename from 14-面试题积累/04-变量提升的题目.md rename to 15-面试题积累/04-变量提升的题目.md diff --git a/14-面试题积累/05-BAT爱考的JS面试题.md b/15-面试题积累/05-BAT爱考的JS面试题.md similarity index 100% rename from 14-面试题积累/05-BAT爱考的JS面试题.md rename to 15-面试题积累/05-BAT爱考的JS面试题.md diff --git a/14-面试题积累/20180116-博客园：一年经验初探阿里巴巴前端社招.md b/15-面试题积累/20180116-博客园：一年经验初探阿里巴巴前端社招.md similarity index 100% rename from 14-面试题积累/20180116-博客园：一年经验初探阿里巴巴前端社招.md rename to 15-面试题积累/20180116-博客园：一年经验初探阿里巴巴前端社招.md diff --git a/14-面试题积累/函数.md b/15-面试题积累/函数.md similarity index 100% rename from 14-面试题积累/函数.md rename to 15-面试题积累/函数.md diff --git a/14-面试题积累/异步.md b/15-面试题积累/异步.md similarity index 100% rename from 14-面试题积累/异步.md rename to 15-面试题积累/异步.md diff --git a/14-面试题积累/清单.md b/15-面试题积累/清单.md similarity index 100% rename from 14-面试题积累/清单.md rename to 15-面试题积累/清单.md diff --git a/14-面试题积累/面经链接推荐.md b/15-面试题积累/面经链接推荐.md similarity index 100% rename from 14-面试题积累/面经链接推荐.md rename to 15-面试题积累/面经链接推荐.md diff --git a/15-前端进阶/01-前端的几道题目.md b/16-前端进阶/01-前端的几道题目.md similarity index 100% rename from 15-前端进阶/01-前端的几道题目.md rename to 16-前端进阶/01-前端的几道题目.md diff --git a/15-前端进阶/04-前端监控技术.md b/16-前端进阶/04-前端监控技术.md similarity index 100% rename from 15-前端进阶/04-前端监控技术.md rename to 16-前端进阶/04-前端监控技术.md diff --git a/15-前端进阶/09-lazyload&防抖动和节流阀.md b/16-前端进阶/09-lazyload&防抖动和节流阀.md similarity index 100% rename from 15-前端进阶/09-lazyload&防抖动和节流阀.md rename to 16-前端进阶/09-lazyload&防抖动和节流阀.md diff --git a/16-前端综合/2018年-前端日记.md b/17-前端综合/2018年-前端日记.md similarity index 100% rename from 16-前端综合/2018年-前端日记.md rename to 17-前端综合/2018年-前端日记.md diff --git a/16-前端综合/2019年Web前端自学路线.md b/17-前端综合/2019年Web前端自学路线.md similarity index 100% rename from 16-前端综合/2019年Web前端自学路线.md rename to 17-前端综合/2019年Web前端自学路线.md diff --git a/16-前端综合/UserAgent.md b/17-前端综合/UserAgent.md similarity index 100% rename from 16-前端综合/UserAgent.md rename to 17-前端综合/UserAgent.md diff --git a/16-前端综合/ajax相关.md b/17-前端综合/ajax相关.md similarity index 100% rename from 16-前端综合/ajax相关.md rename to 17-前端综合/ajax相关.md diff --git a/16-前端综合/css开发相关.md b/17-前端综合/css开发相关.md similarity index 100% rename from 16-前端综合/css开发相关.md rename to 17-前端综合/css开发相关.md diff --git a/16-前端综合/html相关.md b/17-前端综合/html相关.md similarity index 100% rename from 16-前端综合/html相关.md rename to 17-前端综合/html相关.md diff --git a/16-前端综合/json字符串的解析和遍历.md b/17-前端综合/json字符串的解析和遍历.md similarity index 100% rename from 16-前端综合/json字符串的解析和遍历.md rename to 17-前端综合/json字符串的解析和遍历.md diff --git a/16-前端综合/json相关.md b/17-前端综合/json相关.md similarity index 100% rename from 16-前端综合/json相关.md rename to 17-前端综合/json相关.md diff --git a/16-前端综合/前端中的一些概念.md b/17-前端综合/前端中的一些概念.md similarity index 100% rename from 16-前端综合/前端中的一些概念.md rename to 17-前端综合/前端中的一些概念.md diff --git a/16-前端综合/前端开发积累.md b/17-前端综合/前端开发积累.md similarity index 100% rename from 16-前端综合/前端开发积累.md rename to 17-前端综合/前端开发积累.md diff --git a/16-前端综合/微信群好友分享整理.md b/17-前端综合/微信群好友分享整理.md similarity index 100% rename from 16-前端综合/微信群好友分享整理.md rename to 17-前端综合/微信群好友分享整理.md diff --git a/16-前端综合/网友对本项目提的建议.md b/17-前端综合/网友对本项目提的建议.md similarity index 100% rename from 16-前端综合/网友对本项目提的建议.md rename to 17-前端综合/网友对本项目提的建议.md diff --git a/17-推荐连接/01-推荐网站.md b/18-推荐连接/01-推荐网站.md similarity index 100% rename from 17-推荐连接/01-推荐网站.md rename to 18-推荐连接/01-推荐网站.md diff --git a/17-推荐连接/02-推荐文章.md b/18-推荐连接/02-推荐文章.md similarity index 100% rename from 17-推荐连接/02-推荐文章.md rename to 18-推荐连接/02-推荐文章.md