---

一、 React简介

1. React 是一个由 Meta（原 Facebook）开发的 JavaScript库，专注于构建用户界面‌，其核心特点包括声明式设计、虚拟 DOM 优化、组件化架构以及 JSX 语法扩展。
2. 在React的官方博客中明确阐述了React不是一个MVC框架，而是一个用于构建组件化UI的库，是一个前端界面开发工具，算是MVC中的V（view）
3. React的最大的价值不是高性能的虚拟DOM，封装的事件机制、服务端渲染，而是声明式的直观的编码方式。
4. React，用于构建用户界面的 JavaScript 库，只提供了 UI 层面的解决方案 遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效 使用虚拟DOM 来有效地操作 DOM ，遵循从高阶组件到低阶组件的单向数据流 帮助我们将界面成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成整
   体页面

二、Create React App脚手架搭建

1.脚手架简介

创建新的React的应用
如果是在学习React或创建一个新的单页应用，可以使用Create React App
Create React App是一个学习React的舒适环境，也是用React创建新的单页面应用的最佳方式，是官方支持的创建React单页面应用程序的方法，它提供了一个零配置的现代构建设置；会配置项目的开发环境，方便使用最新的JavaScript特性，提供良好的开发体验，并为生产环境优化应用程序。
环境支持：node >= 14.0.0和npm >= 5.6

2.安装

输入命令 npm i -g create react app
全局安装脚手架

3.创建项目

输入命令 create-react-app react-project react-project是项目名称，

需要一段时间，命令执行完，会创建react-project为名称的文件夹

4. 启动项目

进入项目命令： cs react-project
项目启动命令：npm start
通过下图的： http://localhost:3000/ 可以访问项目

三、react特性 ---- JSX 语法

1.什么是JSX

1. JSX是一个javaScript的语法扩展，在React中配合使用JSX，JSX可以很好的描述UI应该呈现出它应有交互的本质形式。JSX具有JavaScript的全部功能
2. 在React的开发中，会经常使用一种特殊的语法来描述React的组件，叫做JSX，虽然看上去像是一种模版语言，但是JSX 是 React.createElement 的语法糖‌，编译后会转换为普通的 JavaScript 对象调用是一种语法糖
3. JSX可以生成React‘元素’

2.为什么使用JSX

React不强求要求使用JSX，但是在javascript代码中将JSX和UI放在一起时，会在视觉上有辅助作用，还可以使React显示更多有用的错误消息和警告消息

	const element=React.createElement(
		'h1'，
		{className:'hl'},
		'He11o，world!'
	);

使用JSX

const element = (
<h1 className="hl">He11o, warld!</h1>
);

3.基础语法要点

1. 嵌入表达式
   使用大括号 {} 嵌入任何有效的 JavaScript 表达式：

   const name = 'React';
   const element = <h1>Hello, {name}!</h1>;
   

2. 属性命名规则
   • camelCase 命名‌：className 代替 class，htmlFor 代替 for
   • ‌动态属性‌：使用 {} 而非引号
3. 必须遵循的规则
   • 单根元素‌：JSX 必须包含在单个父元素内
   • ‌标签闭合‌：自闭合标签必须添加斜杠 />
4. 注意事项
   • 使用 className 而非 class‌
   • 注释写法‌：{/* 这是注释 */}
   • 防注入攻击‌：JSX 会自动转义嵌入内容

4.高级用法

1. 条件渲染

   function Greeting({ user }) {
     return
    (
       <div>
         {user ? <h1>Hello, {user.name}!</h1> : <h1>Hello, Stranger.</h1>}
       </div>
     );
   }
   

2. 列表渲染

   const todos = ['学习 React', '掌握 JSX', '实战项目'];
   const todoList = (
     <ul>
       {todos.map((todo, index) => <li key={index}>{todo}</li>)}
   	</ul>
   );
   

3. 事件处理

   function Button() {
     const handleClick = () => alert('按钮被点击！');
     
     return (
       <button onClick={handleClick}>
         点击我
       </button>
     );
   }
   

四、react特性 ---- 声明式编程

1.什么是声明式编程

‌声明式编程‌是一种编程范式，开发者只需描述"UI应该是什么样子"，而不需要详细说明"如何达到这个状态"。这与‌命令式编程‌形成鲜明对比。

2.声明式 vs 命令式

• 命令式编程（传统方式）

  // 需要逐步告诉程序如何操作
  const container = document.getElementById('container');
  const button = document.createElement('button');
  button.textContent = count;
  button.addEventListener('click', () => {
    count++;
    button.textContent = count;
  });
  container.appendChild(button);
  

• 声明式编程（React方式）

  // 只需声明UI的状态
  function Counter() {
    const [count, setCount] = useState(0);
    return (
      <button onClick={() => setCount(count + 1)}>
        {count}
      </button>
    );
  }
  

3.React 声明式编程的核心优势

1. 代码简洁性
   • 减少 DOM 操作代码
   • 逻辑更清晰易懂
   • 维护成本显著降低
2. 可预测性
   • UI 状态与数据状态保持一致
   • 相同的 props 和 state 总是渲染相同的输出
3. 易于调试
   • 状态变化可追踪
   • 组件行为更可预测
   • 错误定位更准确

4. React声明式编程与虚拟DOM的关系

1. ‌声明式编程让你专注于描述UI的最终状态‌，而不必关心具体的DOM操作步骤。你只需要告诉React"界面应该是什么样子"，React就会自动处理更新过程
2. 虚拟DOM则是实现声明式编程的技术支撑‌。它是一个轻量级的JavaScript对象，作为真实DOM的内存映射。当状态发生变化时，React会：

• 创建新的虚拟DOM树
• 与旧的虚拟DOM进行差异比对（Diff算法）
• 计算出最高效的DOM更新方式
• 批量执行必要的DOM操作

总结

初步了解，可以感受到React存在的优势

• 高效灵活
• 声明式的设计，简单使用