为什么选择使用React | React是什么 | JavaScript是什么 | Node.js是什么

---

前言

有人问我开发过程中为什么选择使用React？我竟没有想法，只觉得使用React比直接使用html、javascript、css更加方便、美观，可以引用各种各样的库。别人建议使用React，我就用了，没有想为什么。
于是我详细了解了React的属性、优缺点等。笔记记录如下，如有不足，请批评指正：

---

一、React、JavaScript、Node.js简介

1.React是什么

React是由Facebook开发和维护的一个开源JavaScript库。它的特点是组件化和单向数据流，使开发者可以构建复杂和动态的应用。

2.JavaScript是什么

✨起初JavaScript是客户端脚本语言，起初用于为网页添加互动性和动态效果。

☀️后来，在Node.js环境支持的基础上，JavaScript可以运行在服务端，与数据库进行交互、处理数据、发送邮件等。

3.Node.js是什么

Node.js是让JavaScript运行在服务端的开源和跨平台的运行环境。

二、为什么选择React

1.组件化开发

React支持组件化开发，开发者可以将页面拆分成不同的独立组件，提高代码的复用率。

2.React Native支持

React Native框架，可以通过React框架的原生平台功能，为Windows、macOS、Android、iOS等开发应用程序。

并且React Native支持同时为Android和iOS开发应用程序，可以编写在两个平台共享的代码。

3.虚拟DOM技术

如果不了解什么是DOM，可以阅读如下文章，讲得较为详细：
什么是DOM（超详细解释，建议收藏！！！）

React使用虚拟DOM技术，提升了页面的渲染效率。

虚拟DOM本质上是一个JS对象，是真实DOM的JavaScript对象树，用于描述真实的DOM的结构和属性。虚拟DOM可以将多次DOM操作合并成一次DOM操作，减少对实际DOM操作的次数。

虚拟DOM的diff算法：
（1）🌸创建组件时，用JS对象的方式来表示实际DOM树，即生成虚拟DOM树。
（2）🌼当组件更新的时候，会生成一棵新的虚拟DOM树，比较新旧虚拟DOM树的差异。
（3）🌻根据新旧DOM树比较结果，将需要更新的部分转化为最小的DOM操作，将其应用到实际DOM。这样可以避免全量更新整个页面，提高页面渲染效率。

虚拟DOM主要在复杂的Web应用（例如项目管理平台、社交网络等）以及现代前端框架（例如Vue、React）发挥作用，这些场景需要频繁更新页面内容，虚拟DOM可以优化页面渲染性能和效率。

如果想对于虚拟DOM有更全面的理解，可借鉴以下几篇文章：
虚拟DOM和dom diff
React中的Virtual DOM(看这一篇就够了)
15张图，20分钟吃透Diff算法核心原理，我说的！！！
虚拟 DOM 与真实 DOM 的区别

4.React和Vue

React	Vue
虚拟DOM	虚拟DOM
单向数据流	单向数据流
利用JavaScript的强大功能编写组件，丰富的JavaScript库	使用HTML模板创建视图，丰富的HTML模板
适用于构建大规模应用程序和移动应用程序	适用于构建轻量级、更快速的单页面应用程序

三、jsx、html的关系

1. JSX是什么

JSX表示JavaScript语法扩展，有时也被叫做JavaScript XML。

JSX是作为React.createElement()的语法糖被创建的，是JavaScript的扩展，允许开发人员直接在JavaScript中编写类似html的语法。

---

总结

一篇文章梳理下来，我对于React有了更深的了解。如果下次有人问我为什么使用React，我会主要从虚拟DOM提高页面渲染效率、React Native支持跨平台开发、比起Vue更适合大型复杂项目等方面进行阐述。

同时，我也发现了React更多值得深入了解的特点，例如：单向数据流、React Hooks、React的组件化具体体现在那些方面、React与原生JavaScript更多对比、单页面应用程序与多页面应用程序、以及React与Vue的哲学差异（React自称为“JavaScript库”，Vue自称为“JavaScript框架”）。针对这些疑问，我会继续学习并梳理笔记。