赋能工程师技能升级：React 学习笔记（一）-- 基础知识以及 JSX 语法
2023-11-28 12:11:12
前言
React 作为当今最流行的前端框架之一，因其高效、灵活、易于维护的特点而广受青睐。它不仅深受工程师的喜爱，也为广大用户带来了出色的在线体验。因此，本文将带您开启 React 学习之旅，为您提供全面的学习笔记，让您快速掌握 React 的基础知识。
React 简介
1. 关于 React
React 是一款开源的前端 JavaScript 框架，由 Facebook 和社区共同开发。它主要用于构建用户界面（UI），以便在 Web 应用程序中创建可交互的组件。React 采用组件化开发方式，使您能够轻松创建复杂的用户界面，并提高代码的可维护性和可重用性。
2. Hello React
为了快速上手 React，我们从经典的 Hello React 示例开始。在学习 React 之前，我们先来了解一些 React 的基本概念：
- 组件：React 应用是由组件构成的，每个组件负责处理特定的 UI。
- JSX：JSX 是 JavaScript 的扩展语法，它将 HTML 代码嵌入到 JavaScript 中，使您能够轻松地创建 React 组件。
- Props：Props 是组件之间传递数据的机制，它允许您将数据从父组件传递给子组件。
- State：State 是组件内部的数据，它允许组件在响应用户交互或其他事件时更新自身。
3. 虚拟 DOM 和真实 DOM 的两种创建方法
React 使用虚拟 DOM（Virtual DOM）来提高性能。虚拟 DOM 是一个轻量级的 JavaScript 对象，它表示应用程序的 UI 状态。当组件的状态发生变化时，React 只会更新虚拟 DOM 中受影响的部分，而不是重新渲染整个组件。然后，React 使用高效的算法将虚拟 DOM 差异应用于真实 DOM，从而最小化对真实 DOM 的操作，提高渲染性能。
React 提供两种创建真实 DOM 的方式：
- ReactDOM.render()：此方法将组件渲染到指定的 DOM 元素中。
- ReactDOM.hydrate()：此方法将组件渲染到已经包含服务器端渲染 HTML 的 DOM 元素中。
JSX 语法
JSX 是 JavaScript 的扩展语法，它允许您将 HTML 代码嵌入到 JavaScript 中，从而使您能够轻松地创建 React 组件。JSX 语法与 HTML 非常相似，但它有一些特殊的规则和语法。
1. 注释
在 JSX 中，可以使用 /* 和 */ 来创建注释。注释不会被编译成 JavaScript 代码，因此您可以使用它们来添加注释或调试信息。
/* 这是注释 */
// 这是单行注释
2. 数组
在 JSX 中，可以使用大括号 {} 来创建数组。数组中的元素可以是字符串、数字、变量或表达式。
const array = [
'foo',
'bar',
'baz'
];
const JSX = (
<ul>
{array.map(item => (
<li key={item}>{item}</li>
))}
</ul>
);
在上面这个例子中，array.map() 方法将数组中的每个元素转换为一个 <li> 元素。<li> 元素的 key 属性用于唯一标识每个元素，这对于 React 来说非常重要。
总结
在本文中，我们对 React 进行了简要介绍，并学习了如何使用 JSX 语法创建 React 组件。这些只是 React 基础知识的一部分，后续我们将继续深入学习 React 的其他知识点，如组件生命周期、状态管理、路由等。掌握了这些知识，您就可以构建出功能强大、交互丰富的 Web 应用程序。
