react

react介绍：

react是一个声明式，高校且灵活的用于构建用户界面的javaScript库，前端三大框架之一，React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了

前端三大框架：

Angular、React、Vue

Vue：适于小型项目。

Angular：适于大型超大型web项目的开发。

React：适于中型项目或个性化需求，

react的特点：

1. 声明式编码，通过一些行为替代，例如语法糖
2. 组件化编码，提高开发效率及组件复用率，js是命令式编码，通过获取->操作等步骤
3. React Native 编写原生应用
4. 高效（优秀的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：

1. 1. 1. 提供更好的性能

• • • • 对比一下修改DOM时真实DOM操作和虚拟DOM的操作：
      • 对于真实DOM：生成HTML字符串，重建所有DOM元素
      • 对于虚拟DOM：生成虚拟DOM节点，采用diff算法，更新出现变化的真实DOM节点

1. 1. 1. 跨平台

• • • • 使用虚拟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三个原则：

1. 唯一数据源：只把状态存在store中
2. 数据改变要通过函数：action 更新到 state中，需要在 reducers 中
3. 保持只读：state 中的内容只读，唯一改变 state 的方法就是触发action

hook：

什么是hook：

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

hook特点：

• • 完全可选的。 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。
  • 100% 向后兼容的。 Hook 不包含任何破坏性改动。

为什么使用hook：

• • 提取逻辑出来非常容易
  • 非常易于组合
  • 可读性非常强
  • 没有名字冲突问题

hook优势：

1. 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的差异大