React 基础讲解

React介绍：

        React 由 Facebook 工程师 Jordan Walke 于 2011 年 首次开发，最初用于解决 Facebook 广告系统的复杂 UI 更新问题。

        什么是React，官方的介绍是用于构建用户界面的 JavaScript 库 。所以说React并不是一个框架，而是一个用于前端数据渲染的库。

React 的核心特点：

• 组件化：将页面拆分成独立、可复用的组件

• 声明式：通过 JSX 描述“UI 应该长什么样”，而不是直接操作 DOM

• 高效更新：通过 虚拟 DOM（Virtual DOM） 优化渲染性能

核心概念： 

(1) JSX：简单来说就是JavaScript + HTML

下面是JSX语法的代码：

• 在 JavaScript 中直接写 HTML 结构

• 最终会被编译成 React.createElement() 调用

(2) 组件（Component）

• 函数组件 比较推荐使用：

• 类组件：

(3) 虚拟 DOM（Virtual DOM）

React高效的原因：React不会直接操作真实DOM，可以减少重排重绘，操作的是虚拟DOM.

1. 重排（Reflow）：

   • 当元素的尺寸、位置、布局改变（如修改宽高、边距、字体大小），浏览器需要重新计算元素的几何属性，并更新页面布局。

   • 触发场景：修改 width、height、margin、display: none 等。

2. 重绘（Repaint）：

   • 当元素的外观变化但不影响布局（如颜色、背景色），浏览器只需重新绘制像素，不重新计算布局。

   • 触发场景：修改 color、background、visibility: hidden 等。

重排是重新布局，重绘是重新上色；重排一定触发重绘，但重绘不一定触发重排。 

虚拟DOM是什么？
        虚拟DOM的本质是一个JS对象,对象的属性会与真实DOM的属性对应。

• 原理：

  1. React 在内存中维护一个虚拟 DOM 树

  2. 状态变化时生成新虚拟 DOM

  3. 通过 Diff 算法 对比新旧虚拟 DOM，找出最小更新范围

  4. 只更新真实 DOM 中必要的部分

• 优势：避免频繁操作真实 DOM，提升性能！

(4) 插值表达式（嵌入表达式）

作用：在 JSX 中动态插入 JavaScript 表达式。
语法：用 { } 包裹任意有效的 JavaScript 表达式。

 

(5)条件渲染

场景：根据条件决定是否渲染某部分内容。
方法：

• 三元运算符（适合简单分支）：

• 逻辑与（&&）（适合单条件）：

• 

• 立即执行函数（复杂逻辑）：

• 

(6) 属性渲染

作用：动态设置 HTML/组件的属性值。
语法：属性值用 { } 包裹表达式。
示例：

(7)className 动态类名

作用：根据条件动态添加 CSS 类。
方法：

• 字符串拼接：

• 

• 属性名遵循 React 命名规则（如 className 代替 class，htmlFor 代替 for）

(8)style 动态样式

作用：通过 JavaScript 对象设置内联样式。
规则：

• 属性名用驼峰式（如 backgroundColor）

• 值通常是字符串或数字

• 

(9)列表渲染

核心：使用 map() 遍历数组，必须提供 key。
示例：

关键点：

• key 应该是唯一稳定的标识（如 id，避免用数组下标）

• 如果列表可能变化，key 能帮助 React 高效更新 DOM

(10)注释写法

语法：用 {/* */} 包裹注释内容。或者//注释单条内容。