文章目录
前言一、React、JavaScript、Node.js简介1.React是什么2.JavaScript是什么3.Node.js是什么
二、为什么选择React1.组件化开发2.React Native支持3.虚拟DOM技术4.React和Vue
三、jsx、html的关系1. JSX是什么
总结
前言
有人问我开发过程中为什么选择使用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
ReactVue虚拟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框架”）。针对这些疑问，我会继续学习并梳理笔记。