简介
React 到底是什么？为什么它那么受欢迎？它到底解决了什么问题？
答案：React 是一个用于构建用户界面的、声明式、组件化的 JavaScript 库。
❓兄弟框框给我甩概念啊？什么东西是声明式？组件化又是什么？JavaScript库？你也妹把我当小白啊。
好吧这是我复制过来的官网介绍，接下来是真的0基础也能懂。
前置知识
一、DOM
DOM 是什么？
当你在浏览器输入一串网址时，你的电脑会和远在天边的一台大机器对话，这个机器叫做服务器。你的电脑会向服务器发出请求，索取你需要的信息，服务器根据你的请求进行响应返回：
你的电脑：兄弟这个网址有伐？juejin.cn
服务器：有的兄弟有的，给你。
这个时候浏览器给你甩来了三个东西：HTML、CSS和 JavaScript。
HTML是个大头，它列举出一个网页的内容并描述其结构。比如给用户展示的图片是哪一张？有多少个列表？按钮和输入框放在哪里？
浏览器会用这些数据捏出一棵树，就叫DOM--全称是Document Object Model。在一定程度上来说，它确实也是一个模特，准确来说是网页文档流的模型。
浏览器会根据它摆出的姿势画出我们在浏览器看到的图片，文本，段落。程序员的职责就是告诉DOM应该摆什么样的姿势，戴什么样的首饰。
我们对着网页右击鼠标打开检查，点击元素，右侧就可以看到DOM树的真实模样
二、API -- DOM的耳朵
在我们的习惯里，网页不会是始终静止不动的，我们需要的往往是动态的网页交互，比如写写问卷，调调视频倍速，下载图表。
浏览器根据
DOM的姿势去画页面，那怎么让DOM换姿势呢？
直说对DOM说你需要它换个姿势就好了，他会听的。而DOM耳朵叫做API。程序员书写JavaScript代码调用DOM API直接操作DOM元素，从而网页的内容也会随之更新。
三、网页开发趋势的转变
多年以来的网页的开发，都是程序员在大部分静态资源例如文字、图片的基础上直接与DOM对话作为开发标准，最多加上一些JavaScript代码完成简单的用户交互功能。
而需要信息的大体切换的场景下，通常是使用多页应用（MPA--Multi Page Application） 的方法，转换数据则跳转至另一个HTML网页
从单页应用（SPA--Single Page Application） 的出现开始，人们发现网页也可以是有趣、交互性强、同时响应速度很快。开始不满足于大部分都是静态枯燥的网页，寻求更加动态、交互性强、响应速度快的网页应用。而为了满足这些，传统的直接和DOM对话的方式不仅低效繁琐，也使代码量以倍数增长，维护也变得困难。程序员们正寻求一种更现代、更高效、更便捷化的开发方法。
此时，React诞生了。那么接下来我们就步入正题了
React 应运而生
React由JavaScript开发，设计目标之一是让我们在大多数情况下不再需要直接操作DOM API取而代之的是，我们只需要编写相对简单的代码，而
React将其翻译为DOM理解的语言。
React 的超能力归纳起来有三条，完美地处理了与日俱增的 web 开发复杂度：
- 组件（Component）
- 声明式界面编程（Declarative UI）
- 响应式 DOM 更新机制（Reactive DOM updates）
“喂喂喂老铁，看到一半你又给我上概念？举报了”
我知道你很急，但你先别急，看起来像天书但其实这些很好理解
React 核心思想
一、组件化
组件的思想就是分治的思想，分而治之。将一个大问题拆成小问题逐个解决，最后再综合答案
举个例子：
- 一个按钮是一个组件
- 一个搜索框是一个组件
- 甚至整个导航栏也可以是一个组件
说白了就像你的电脑主机，每一个部分负责该干的活。 不管什么品牌的零件，只要零件正常工作，拼在一起就能把跑起来。零件之间不会抢活，互不影响
所以React的组件有两个重要的属性：
-
组件是可组合的。组件的目的在于复用，我们可以使用现有组件创建新组件。
-
一个组件独立于其它组件。当修改一个组件时，不相干的组件不会受到干扰。
看个示例
假设现在要写一个代办事项，我将代办事项分成两个部分，头部和主体，现在先看一下效果图
<section className="todoapp">
<TodoHeader/>
<TodoMain/>
</section>
省略了一部分细节语法代码，防止你看懵
- 代码示范（仅保留头部）
<section className="todoapp">
<TodoHeader/>
</section>
效果：
- 代码示范（仅保留主体）
<section className="todoapp">
<TodoMain/>
</section>
效果：
上面
<TodoHeader/>、<TodoMain/>其实就是两个不同的组件，拼在一起完成了最后的需求
二、声明式用户页面 -- 戳我看详细
声明式编程 vs 命令式编程
1. 命令式编程（Imperative Programming）
命令式编程是一种以“怎么做”为核心的编程范式，程序员需要明确地告诉计算机如何一步步地完成任务。在这种范式中，程序由一系列的语句组成，每个语句都改变程序的状态。
特点：
-
强调步骤和过程，即如何实现某个目标。
-
程序员需要管理程序的状态变化。
-
典型的命令式编程语言包括 C、C++、Java、Python 等。
2. 声明式编程（Declarative Programming）
声明式编程是一种以“做什么”为核心的编程范式，程序员专注于描述要达到的目标，而不是如何实现这个目标。在这种范式中，程序更多地描述逻辑而不是控制流程。
特点：
-
强调结果，即需要什么而不是如何做。
-
不关心状态的变化，更多地关注最终的输出。
-
典型的声明式编程语言和技术包括 SQL、正则表达式、HTML、CSS 等。
举个栗子
你现在要让DOM这个模特换姿势
第一种方式就是使用命令式 UI ：
你必须从零开始，直接操作DOM API，我们需要明确写出在具体什么时刻、以何种顺序来修改哪个元素。这种操作就像手把手、一步一步地指导DOM该怎么摆姿势：头该怎么偏、手摆哪儿、脚怎么站
第二种方式就是使用声明式 UI ：
我们直接告诉DOM我们想要什么，而不是怎么做。 使用React写程序就是这个思路，程序员画一个简图描述所期待的结果，React代劳向DOM解释怎么摆姿势。
而我们需要
DOM大量且频繁地进行进行变更。所以我们会一次性画多张草图，一页页快速翻动形成动态画面，这就达到了我们要的目的
小拓展--虚拟 DOM
这里只当一个知识点，以后的文章会讲到具体原理
除了让程序员们更轻松，声明式的React还提供了性能优化的机会。
当React事先拿到了所有的草图，他可以将其整理归类、删除重复部分，以此保证DOM只做最少的事，节省了大量的时间。
这些草图其实就是虚拟DOM，程序员们大部分时间是在和虚拟DOM打交道，由React来代理管理那缓慢的DOM
三、响应式DOM更新
React允许我们在画的草图中挖空，放置一些需要随时变换的内容即DOM结构的变体，这里假设需要更换的是DOM模特的鞋子。
有这样的规则，当有人索要DOM穿不同鞋子的写生画时，我们就不需要再次跟 React 沟通，只需要坐下来看着 React 为我们更换就行了。
这里的鞋子是决定用户界面动态内容的原始数据，我们写程序时只需要将该数据与相应界面元素关联好，就不需要再做任何后续干涉。
当数据发生变化时，React 将自动对相关 DOM 元素做相应的调整。这样看起来就像是 DOM 响应了数据变化（的号召）而自发地做出更改，我们并不需要手动跟踪数据的变化，也不需要担心何时去更改 DOM（实质上是 React 代劳）。
这就是响应式（reactive）界面开发方法。这个点子极大地简化了用户界面的开发工作。
上述代码的
{item}就相当于我们在草图上挖的空，关联好对应的数据源。等待 React 帮我们填充进合适的数据。不需要我们再使用代码对页面进行操作
总结
恭喜！你已经读完了 React 的第一课。这是关于 React 的一个俯瞰图：究竟为什么需要 React？React 之所以强大的三个理由：组件、声明式界面和响应式 DOM 更改。
文章涉及到的知识多且繁杂，存在错误的地方还请见谅，直接在评论区勘误😵😵
别忘了点个赞哦🫰🏻🫰🏻❤️❤️
