react定义以及特性

什么是react？ 它有什么特性？

React是用于构建用户界面的库。 特点：

• 组件化,增强复用性
• 数据到视图的单向绑定,更安全
• 数据的单项传递流
• 高性能

React和Vue框架对比，各有什么优劣？

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。MVVM

React是一个用于构建用户界面的开源JavaScript库，主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 MVC

相同点

1. 轻量级；
2. 组件化思想，组件化开发；
3. 虚拟dom，提高渲染速度；
4. 独立的路由系统，以及独立的状态管理库；
5. 放进一个独立的html文件，或者依托于weboack模块；

区别

1. vue 提供了一系列的api， 而react的api 很少
2. vue的思想是响应式的，也就是基于是数据可变的，实现了数据的双向绑定，react整体是函数式的思想，是单向数据流，推崇结合immutable来实现数据不可变（immutable.js）
3. vue 采用了template， react采用了jsx （本质上都是模版）
4. React依赖Virtual DOM，而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。
5. Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。

vue的优点

1. 简单：官方文档很清晰，比 Angular 简单易学。

2. 快速：异步批处理方式更新 DOM。

3. 组合：用解耦的、可复用的组件组合你的应用程序。

4. 紧凑：~18kb min+gzip，且无依赖。

5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。

6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

vue的缺点：

1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。

2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。

3. 不支持IE8。

react的优点：

1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。

2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。

3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。

4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。

5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。

6. 兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

react的缺点

陡峭的学习曲线：由于复杂的设置过程，属性，功能和结构，它需要深入的知识来构建应用程序。(本人忠实的react拥护者)

React Class版本和Hooks版本

Hooks and Class （共同点）

1. 无论是函数式组件return还是class组件render，它们都会返回一个reactDom节点，并且里面jsx的用法完全一致。不一样的地方在于this关键字的使用。

2. 都可以实现声明周期，Hooks目前完全可以模拟出Class的生命周期。

3. 都可以使用props接受父级传入的参数（无论是属性还是回调方法）。

Hooks and Class （不同点）

1. 组件定义方式不同
2. （因为组件定义方式不同）生命周期不同：class组件有，函数组件无；
3. （因为生命周期不同）副作用操作执行不同：class组件通过生命周期函数，函数组件用hook的useEffect；
4. state的定义、读取、修改方式不同：函数组件用hook的useState；
5. this：class组件有，函数组件无；
6. 实例：class组件有，函数组件无；
7. （因为实例不同）ref使用不同：class组件有，函数组件无；

React18 新特性

react18的4个新特性

Automatic batching

在 React 中使用setState来进行dispatch组件的State变化，当setState在组件中被调用后，并不会立即触发重新渲染。React 会执行全部事件处理函数，然后触发一个单独的re-render，合并所有的更新。 比如在点击+1的例子中，如果方法里连续触发三次setState，最终React会将更新函数放到一个队列里，然后合并队列触发setState的re-render，这就是batching的含义。 如果仍然希望setState之后立即重新渲染，只需要使用flushSync包裹。

Concurrent APIs

React18支持并发特性的三个API

• startTransition() 被startTransition包裹的setState触发的渲染被标记为不紧急渲染
• useDeferredValue() 适用于设置延迟值
• useTransition()

SSR for Suspense

在React18中，Suspense可以运行在服务器端，Server Rendering的性能不再受制于性能最差的组件(木桶效应)。

New Render API

更友好的语义化render方式

1. createBoot 更友好的语义化render方式
2. useId 为组件生成唯一ID
3. useSyncExternalStore 来保证External stores的一致性