react介绍：
react是一个声明式，高校且灵活的用于构建用户界面的javaScript库，前端三大框架之一，React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了
前端三大框架：
Angular、React、Vue
Vue：适于小型项目。
Angular：适于大型超大型web项目的开发。
React：适于中型项目或个性化需求，
react的特点：
声明式编码，通过一些行为替代，例如语法糖
组件化编码，提高开发效率及组件复用率，js是命令式编码，通过获取->操作等步骤
React Native 编写原生应用
高效（优秀的Diffing算法），通过虚拟DOM和优秀的diff算法，尽量减少与真实DOM的交互
虚拟dom:
什么是dom：
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的(API)应用程序接口,它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。
什么是虚拟dom：
虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点，实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。相当于在js与DOM之间做了一个缓存，利用diff算法对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM
为什么要使用虚拟dom：
提供更好的性能
对比一下修改DOM时真实DOM操作和虚拟DOM的操作：
对于真实DOM：生成HTML字符串，重建所有DOM元素
对于虚拟DOM：生成虚拟DOM节点，采用diff算法，更新出现变化的真实DOM节点
跨平台
使用虚拟DOM可以很方便的进行跨平台操作。
diff算法：
什么是diff算法：
虚拟DOM就是一个JS对象，通过对象的方式来表示DOM结构，通过事务处理机制，将多次 DOM修改的结果一次性更新到页面上，从而有效的减少页面渲染次数，减少修改DOM重绘 重排的时间，提高渲染性能。React在内存中维护一个跟真实DOM一样的虚拟DOM树，再改动完组件后，会再生成一个新的虚拟DOM，React会将新的虚拟DOM和原来的虚拟DOM进行对比，找出两个DOM树的不同的地方（diff），然后在真实DOM上更新diff，提高渲染速度。、
原理：
Diff算法通过循环递归对节点进行比较，然后判断每个节点的状态以及要做的操作（add，remove，change），最后 根据Virtual DOM进行DOM的渲染。
jsx：
什么是jsx：
JSX是一种JavaScript的语法扩展，全称JavaScript XML，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面，能让我们可以在JS中写html标记语言。
jsx语法规则：
创建虚拟DOM时，不要写引号；
标签中要混入js表达式，要是用{}
标签中样式的类名要用className指定
标签中的内联样式要用style={{color:'white'}}，注意属性名转为小驼峰
只能有一个根标签
标签必须闭合
关于标签首字母
一定注意区分：【js语句(代码)】与【js表达式】
生命周期：
类式组件生命周期：
componentDidMount()：页面挂载时
shouldComponentUpdate()：页面更新时
componentWillUnmount()：页面销毁时
函数式组件生命周期：
函数式组件在官方上面是没有声明周期的但是effect hook的三种模式是类似于生命周期
useEffect( () => { console.log('初始化阶段 构造') }, []);页面挂载时
useEffect( () => { console.log('监听所有状态变化，有状态变化的就执行') }, [要监听的数据]);页面更新时
useEffect(() => { return 返回的是函数; // 卸载时，想要进行的操作},[]);在页面销毁时
创建方法：
1.首先安装手脚架
在项目文件夹下打开cmd命令行工具输入
npm install -g create-react-app
1.创建项目：
在项目文件件下再次打开cmd命令行输入
create-react-app 项目名字
1.创建完成后在项目文件下输入以下代码就启动项目了
npm start
路由：
使用步骤：
1.安装：
在项目文件下打开cmd命令行输入以下代码
npm react-router-dom
安装完成后进行配置（在一般情况下我是会进行路由的一个编写，也就是类似于vue的路由）
1.配置：
2.在安装完成后在src目录下新建router目录并在其下面新建index.js文件
1.
2..在index.js文件里写（这个类似于vue的路由）
3.然后在app.js里面导入这个文件，使用useRoutes来注册一下就可以了
4.在后面需要添加页面时，就跟vue一样是在router里面去先导入再按照这样的方式去添加即可
在history模式下的push和replace有什么区别：
push：push时添加一个新的记录到历史堆栈, history.length+1；
replace('')：替换掉当前堆栈上的记录， history.length不变。
redux介绍：
什么是redux：
redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库) 2.它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用 3.作用: 集中式管理 react 应用中多个组件共享的状态
redux三个原则：
唯一数据源：只把状态存在store中
数据改变要通过函数：action 更新到 state中，需要在 reducers 中
保持只读：state 中的内容只读，唯一改变 state 的方法就是触发action
hook：
什么是hook：
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
hook特点：
完全可选的。 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。
100% 向后兼容的。 Hook 不包含任何破坏性改动。
为什么使用hook：
提取逻辑出来非常容易
非常易于组合
可读性非常强
没有名字冲突问题
hook优势：
1.Hook 使你在无需修改组件结构的情况下复用状态逻辑(自定义hook)
2.Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。
3.类组件难以理解,影响组件预编译,Hook 使你在非 class 的情况下可以使用更多的 React 特性
4.更容易复用代码：这点应该是react hooks最大的优点，它解决了类组件有些时候难以复用逻辑的问题。通过自定义hooks，便可以轻松复用逻辑。
5.清爽的代码风格：函数式编程风格，函数式组件、状态保存在运行环境、每个功能都包裹在函数中，整体风格更清爽，更优雅
注：hook只能在最顶层进行使用：if else里面不能用hooks，hooks是有顺序的。不能用在if else 或者循环里面 还有非顶层的函数内部。hooks在初始化时候是以链表形式存储的，后续更新都是按照这个链表顺序执行的
当调用setState时会发生什么：
当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。这将启动一个称为和解的过程。和解的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）。
类式组件和函数式组件的区别：
函数组件是一个纯函数，它接收一个props对象返回一个react元素；而类组件需要去继承React.Component并且创建render函数返回react元素。2、函数组件没有生命周期和状态state，而类组件有。
vue和react的区别：
共同点：
数据驱动视图、组件化、都使用了 Virtual DOM + Diff算法
不同点：
核心思想不同、组件写法差异、diff算法不同、响应式原理不同、api的差异大
