1.0 什么是react

React 是一个用于构建用户界面的 JavaScript 库。Vue 是一套用于构建用户界面的渐进式框架。

React 的特点：

1. React 是一个视图层框架
2. 以组件的方式进行开发
3. 使用 JSX 语法
4. 采用虚拟DOM 机制

视图层框架

1. react 是只负责显示的框架
   React 能把数据变成 DOM 显示出来，处理在 DOM 上触发的事件，把 DOM 事件再返回给数据
2. react 是一个声明式的框架
   只需要定义数据和 DOM 的对应关系，这样数据在变换的时候，DOM 会自动变化
3. react 是数据驱动的 DOM
   所谓数据驱动的 DOM 就是数据发生了变化，DOM 会跟着变化，再用事件反馈给数据

以组件的方式进行开发

​ 在日常的开发中推荐以组件的方式组织我们的项目结构。另外，react 提供了 state 和 props 两个主要的属性

1. state 就是组件里面的 react 的数据。(我们也可以称之为状态)
2. props 适用于父子组件间通信的。子组件可以通过 props 拿到父组件的数据和方法；react 组件间的通信是由上向下的；因此需要父组件在 props 里把操作的方法传递给子组件，通过一种类似回调的方式让父组件的状态发生改变。
3. 除此之外，react 的组件是有生命周期的，一个组件从创建、到存在、最后到销毁的整个过程就是组件的生命周期；react 也为整个生命周期提供了灵活的节点，方便我们处理各种业务情况

JSX 语法

​ 我们可以通过 JSX表达式 处理数据和 DOM 之间的关系，而不需要操作 DOM，我们可以从以下三个方面来理解 JSX:

1. JSX 是一种 js 扩展的表达式
2. JSX 是带有逻辑的标记语法，有别于 HTML 模板
3. 并且支持样式、逻辑表达式和事件

虚拟 DOM

​ react 中采用虚拟 DOM 的机制；即只在必要的情况下才去操作 DOM ，通过减少不必要的操作，来提高性能。

1. 在 react 中，我们会把定义好的 jsx 进行标记并转化为为一个虚拟的 DOM ，存在内存里。这是因为内存的处理速度要比操作 DOM 快的多
2. 如果用户做了对 DOM 可能产生影响的操作的时候，虚拟 DOM 就会把操作前后的数据进行对比，如果操作前后的数据有变化，就会把所有的变动统一操作一次 DOM,如果发现操作前后的数据没有变化，就不会再去操作 DOM 了；虚拟 DOM 的思路就是不到万不得已就不去做低效的 DOM 操作
3. 虚拟DOM 的两大优势：一个是操作 DOM 前对数据进行对比，只有数据变化的时候才去操作 DOM；二是它会整合 DOM 操作，可以减少 DOM 操作，提升性能

---

React 整体优点总结

1. 简洁
   当业务流程复杂的时候，我们就会发现单项数据流和组件化的组合方式会很大程度上降低问题的复杂度
2. 灵活
   在 react 里，我们可以把一切理解为 js。这样操作起来就少了很多束缚；另外组件提供了多种嵌套方式，数据驱动、生命周期等让开发变得更加顺畅
3. 高效
   这离不开虚拟 DOM,它通过减少和优化对 DOM 的操作，能让 react 在浏览器里有更好的性能表现

React 整理缺点总结

1. react 只是一个 视图层的框架，如果需要做其他的事情，需要依赖它的生态系统；如：处理单页面路由使用 router，处理数据使用 redux
2. 版本更新频繁，经常不向前兼容

补充：

1）声明式开发：

jquery是命令式开发：直接操作DOM；写一个页面要告诉DOM，要如何一步步去操作，大部分都是在写DOM;

React和Vue都是声明式开发：面向数据开发；相当于盖房子把图纸画好，React根据图纸帮助我们自动的去构建这座大厦；节约了大量的DOM操作。

2）组件化开发：首字母要大写

3）单项数据流：为什么要用单项数据流：防止多个子组件同时修改数据；

4）视图层框架

5）函数式编程（编程模式）

6）可以与三方框架并存：React只负责挂载DOM节点；其他的节点可以运用其他的框架（如jquery、vue），react不会影响其使用；但是要注意：其他框架不要影响到React的使用。