React 基础知识总结
1、Node.js
Node.js并非一个JavaScript框架，Node.js是JavaScript运行时的运行环境，类比Java中的JVM。html
java的开端是什么，无疑是JVM，自从有了JVM，java才能吹牛说本身是“一次编写到处运行”，无论你是windows仍是linux，只要安装了对应版本的JVM均可以运行.class文件。前端
一样Node.js的做用和JVM的同样同样的，也是js的运行环境，不论是你是什么操做系统，只要安装对应版本的Node.js，那你就能够用js来开发后台程序。这具备划时代的意义，意味着一直以来只能在浏览器上玩来玩去的js，能够作后端开发了。vue
从有了Node.js后就催生出一大批用js作后台开发的前端人员，这部分人员就是偏前端的“全栈程序员”。记住，Node.js是和JVM同等地位的js运行环境，打开了前端人员走向后端的道路。java
2、React介绍
React设计思想及其独特，属于革命性创新，性能出众，代码逻辑却很是简单。react
库（library）：小而巧，库只提供了特定的api。优势是船小好调头，能够很方便的从一个库切换到另外的库，可是代码几乎不会改变。linux
框架（Framework）：大而全，框架提供了一整套的解决方案。因此，若是在项目中间，想切换到另外的框架是比较困难的。webpack
和Angular1相比，React设计很优秀，一切基于JS而且实现了组件化开发的思想程序员
React提供了无缝转到ReactNative上的开发体验。web
1．React与Vue的对比
（1）组件化方面
+ 什么是模块化：是从代码的角度来进行分析的；把一些可复用的代码，抽离为单个的模块，便于项目的维护和开发。算法
+ 什么是组件化：是用UI界面的角度来进行分析的；把一些可复用的UI元素，抽离为单独的组件，便于项目的维护和开发。
+ 组件化的好处：随着项目规模的增大，手里的组件愈来愈多，很方便就能够把现有的组件，拼接成一个完整的页面。
+ Vue是如何实现组件化的：经过.vue文件，来建立对应的组件：
+ template 结构 + script 行为 + style 样式
+ React是如何实现组件化的：React中有组件化的概念，可是并无像Vue这样的组件模板文件；React中，一切都是以JS来表现的。所以要学习React，JS要合格，ES6和ES7（async和await）要会用
（2）移动APP开发体验方面
- Vue，结合Weex这门技术，提供了迁移到移动端APP开发的体验（Weex目前只是一个小的玩具，并无很成功的大案例，主要是阿里系的应用在使用）
- React，结合ReactNative，也提供了无缝迁移到移动APP的开发体验（RN用的最多，也是最火最流行的）
2．React中的几个核心概念
（1）虚拟DOM
- DOM本质是什么：浏览器中的概念，用JS对象来表示页面上的元素，并提供了操做DOM对象的api（浏览器提供的）
- 什么是React中的虚拟DOM：是框架中的概念，手动用JS对象来模拟页面上的DOM元素和DOM的嵌套关系（框架提供的）
- 为何要实现虚拟DOM（虚拟DOM的目的）：为了实现页面中，DOM元素的高效更新。
- DOM树的概念： 一个网页呈现的过程： 一、浏览器请求服务器获取页面HTML代码 二、浏览器要先在内存中解析DOM结构，并在浏览器内存中，渲染出一颗DOM树 三、浏览器把DOM树，呈现到页面上
- 总结：什么是虚拟DOM？
本质：用JS对象的形式，来模拟页面上DOM元素和嵌套关系（虚拟DOM是以JS对象的形式存在的） 目的：实现DOM元素的高效更新
（2）Diff算法
- tree diff：新旧两颗DOM树，逐层对比的过程，就是Tree Diff；当整颗DOM逐层对比完毕，则全部须要被按需更新的元素，必然可以找到
- component diff：在进行tree diff的时候，每一层中，组件级别的对比，叫做component diff；
- 若是对比先后，组件的类型相同，则暂时认为此组件不须要被更新；
- 若是对比先后，组件类型不一样，则须要移除旧组件，建立新组件，并追加到页面上；
- element diff：在进行组件对比的时候，若是两个组件类型相同，则须要进行元素级别的对比，这叫做element diff；
3．构建基本的webpack4.x项目
- 由于webpack是基于Node构建的，因此webpack支持全部Node的api和语法
- 在webpack4.x中，有一个很大的特性，就是约定大于配置 约定的默认打包入口是/src/index.js
- 构建步骤
一、运行npm init -y快速初始化项目
二、在项目根目录建立src源代码目录和dist产品目录
三、使用cnpm安装webpack，运行cnpm install webpack -D以及cnpm install webpack-cli -D
四、Webpack4.x提供了约定大于配置的概念，目的是为了减小配置文件的体积；默认约定的 打包的入口是/src/index.js；打包的输出文件是/dist/main.js
五、Webpack4.x 新增了mode选项（必填项），可选值为development和production
六、为了方便运行，配置实时打包编译工具->webpack-dev-server。 cnpm install webpack-dev-server -D
七、Webpack-dev-server打包好的main.js是托管到了内存中，在项目根目录的物理磁盘中看不到；可是咱们能够认为，在项目根目录中，有一个看不见的mian.js
八、Webpack-dev-server打包后打开的首页是项目根目录，而不是src目录下的index.html。 为了让打包编译后的网页自动打开index.html，就须要用到HtmlWebpackPlugin插件，来在项目根目录下生成index.html。安装并在webpack.config.js的module.exports中配置plugins。
4．在项目中使用React
（1）什么是React和React-dom
- React：专门用来建立组件和虚拟DOM的，同时组件的生命周期都在这个包中
- React-dom：专门进行DOM操做的，最主要的应用场景就是ReactDOM.render()
（2）React建立虚拟DOM元素
- 在JS文件中，默认不能写HTML的标签，不然会打包失败。这个时候须要使用babel来转换这些JS中的标签
- 注意，在JS中混合写入相似于HTML的语法，叫做JSX的语法（符合XML规范的JS）
- SX语法的本质，仍是在运行的时候，被转换成了React.createElement的形式来执行的（经过babel转换）
-
配置babel的步骤
- 安装所需的bebel包
- 在webpack.config.js中配置babel，将babel配置在第三方匹配规则中（module下的rules中）
- 在项目根目录中编写babel的配置文件->.babelrc，这是一个json的配置文件，因此要符合json语法规则。
- 在.babelrc中配置babel用到的语法规则和插件
- 当要在JSX代码中使用JS表达式时，须要用大括号{}将JS表达式框起来
5．React中建立组件
（1）第一种建立组件的方式
使用构造函数来建立组件，若是要接收外界传递的数据，须要在构造函数的参数列表中使用props来接收；必需要向外return一个合法的JSX的虚拟DOM。
- 建立组件
//第一种建立组件的方式
function Hello(props) {
//若是在一个组件中 return 一个 null。则表示此组件是空的，什么都不会渲染
// return null
//在组件中，必须返回一个合法的JSX虚拟DOM元素
return <div>这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}</div>
//不管是vue仍是React，组件中的props永远都是只读的，不能被从新赋值
}
- 为组件传递数据
ReactDOM.render(
<div>
{/*直接把建立的组件名称，以标签的形式，丢到页面上便可*/}
<Hello name={dog.name} age={dog.age}
gender={dog.gender}></Hello>
</div>
, document.getElementById('parent'))
- this.props对象的属性
一、 history：用来跳转路由 路径
2.、Match：匹配结果，若是匹配上就是对象，匹配不上就是null
三、Location：当前路径 pathname当前路径名
- 父组件向子组件传递数据
- 使用{...obj}属性扩散传递数据
- 将组件封装到单独的文件中
- 注意：组件的名称首字母必须是大写
- 如何省略.jsx后缀名
//打开webpack.config.js，并在导出的配置对象中，新增以下节点 resolve: {
extensions: [
'.js', '.jsx', '.json'
]//表示这几个文件的后缀名，能够省略不写（.js和.json是默认有的）
}
- 设置别名 resolve: {
//alias:别名；这里设置别名是为了让后续引用的地方减小路径的复杂度
alias: {
'@': path.join(__dirname, './src')
}
}
（2）第二种建立组件的方式
- 使用class关键字来建立组件
- 经过extends继承React.Component
- 每个类中，都有一个构造器，若是咱们没有手动指定构造器，那么，能够认为类内部有个隐形的，看不见的空构造器，相似于constructor(){}
- 构造器的做用就是，每当new这个类的时候，必然会 优先执行，构造器中的代码。
- 经过 new出来的实例 访问到的属性，叫做实例属性。构造器中的属性，是实例属性。
- 经过 构造函数 直接访问到的属性，叫做静态属性。在class中经过static关键字定义的属性是静态属性。
- 实例方法，经过 new出来的实例 访问到的方法，实际项目中使用较多
- 静态方法，经过 构造函数 直接访问到的方法，实际项目中使用到的很少。在class中经过static关键字定义的方法
- 注意：在class的{ }区间内，只能写 构造器、静态方法、静态属性和实例方法
- 注意：class关键字内部仍是经过function的方式来实现的。因此说，咱们把class关键字，称做 语法糖
- 经过extends关键字来实现继承，将共有的某些属性或方法放到父类中
- 在class关键字建立的组件中，若是想使用外界传递过来的props参数，不需接收，直接经过this.props.**来访问便可
- ES6的展开运算符【...】能够展开一个对象
（3）两种建立组件的方式的对比
- 使用class关键字建立的组件，有本身的私有数据（this.state）和声明周期函数，可是使用function建立的组件，只有props，没有本身的私有数据和生命周期函数
- 用构造函数建立出来的组件，叫做‘无状态组件’【无状态组件从此用得很少】
- 用class关键字建立出来的组件，叫做‘有状态组件’【从此用的最多】
- 有状态组件和无状态组件之间的本质区别就是：有无state属性，和有无生命周期函数
- 什么状况下使用有状态组件？什么状况下使用无状态组件？
一、若是一个组件须要本身的私有数据，则推荐使用：class建立的有状态组件
二、若是一个组件不须要私有的数据，则推荐使用：无状态组件
三、React官方：无状态组件因为没有本身的state和声明周期函数，因此运行效率会比有状态组件稍微高一些
- 组件中的props和state/data之间的区别
一、props中的数据都是外界传递过来的
二、state/data中的数据，都是组件私有的；（经过Ajax获取回来的数据，通常都是私有数据）
三、 props中的数据都是只读的，不能从新赋值
四、state/data中的数据，都是可读可写的
6．React-router
- 组件的this.props对象的属性
一、history：用来跳转路由 路径
二、Match：匹配结果，若是匹配上就是对象，匹配不上就是null
三、Location：当前路径 pathname当前路径名
- 安装路由：cnpm install react-router-dom -S
- HashRouter
一、什么叫 hash 地址，hash 地址就是指 # 号后面的 url
二、假若有一个 Link 标签，点击后跳转到 /abc/def。
BrowserRouter： http://localhost:8080/abc/def HashRouter： [<u>http://localhost:8080/#/abc/def</u>](http://localhost:8080/#/abc/def)
- 若是有服务器端的动态支持，建议使用 BrowserRouter，不然建议使用 HashRouter。
缘由在于，若是是单纯的静态文件，假如路径从 / 切换到 /a 后，此时刷新页面，页面将没法正常访问，须要在服务器端进行相关配置
- Switch：只渲染一个匹配到的<路由组件>或<重定向组件>
- 1. React 基础知识总结
- 2. React入门基础知识总结
- 3. React 基础知识点总结
- 4. vue基础知识总结
- 5. react知识总结
- 6. PHP基础知识总结
- 7. Java基础知识总结
- 8. 基础知识大总结
- 9. maven基础知识总结
- 10. MySql基础知识总结
- 更多相关文章...
- • Kotlin 基础语法 - Kotlin 教程
- • Scala 基础语法 - Scala教程
- • 算法总结-双指针
- • 算法总结-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. eclipse设置粘贴字符串自动转义
- 2. android客户端学习-启动模拟器异常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout问题
- 4. MYSQL8.0数据库恢复 MYSQL8.0ibd数据恢复 MYSQL8.0恢复数据库
- 5. 你本是一个肉体，是什么驱使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一个肉体，是什么驱使你前行【3】
- 9. 你本是一个肉体，是什么驱使你前行【2】
- 10. 【资讯】LocalBitcoins达到每周交易比特币的7年低点
- 1. React 基础知识总结
- 2. React入门基础知识总结
- 3. React 基础知识点总结
- 4. vue基础知识总结
- 5. react知识总结
- 6. PHP基础知识总结
- 7. Java基础知识总结
- 8. 基础知识大总结
- 9. maven基础知识总结
- 10. MySql基础知识总结