JSX（JavaScript XML）是一种 JavaScript 的语法扩展，它允许开发者在 JavaScript 代码中使用类似 HTML 的语法来描述用户界面。虽然 JSX 看起来像 HTML，但它实际上是一种语法糖，最终会被编译成标准的 JavaScript 对象，通常是 React.createElement() 调用。
1.React 应用程序是由 组件 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。
React 组件是返回标签的 JavaScript 函数：
function MyButton() {
return (
<button>我是一个按钮</button>
);
}
至此，你已经声明了 MyButton，现在把它嵌套到另一个组件中：
export default function MyApp() {
return (
<div>
<h1>欢迎来到我的应用</h1>
<MyButton />
</div>
);
}
你可能已经注意到 <MyButton /> 是以大写字母开头的。你可以据此识别 React 组件。React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。
export default 关键字指定了文件中的主要组件。
function MyButton() {
return (
<button>
我是一个按钮
</button>
);
}
export default function MyApp() {
return (
<div>
<h1>欢迎来到我的应用</h1>
<MyButton />
</div>
);
}
2.使用 JSX 编写标签
上面所使用的标签语法被称为 JSX。它是可选的，但大多数 React 项目会使用 JSX，主要是它很方便。
JSX 比 HTML 更加严格。你必须闭合标签，如 <br />。你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中，比如 <div>...</div> 或使用空的 <>...</> 包裹：
function AboutPage() {
return (
<>
<h1>关于</h1>
<p>你好。<br />最近怎么样？</p>
</>
);
}
如果你有大量的 HTML 需要移植到 JSX 中，你可以使用 在线转换器。
3.添加样式
在 React 中，你可以使用 className 来指定一个 CSS 的 class。它与 HTML 的 class 属性的工作方式相同：
<img className="avatar" />
然后，你可以在一个单独的 CSS 文件中为它编写 CSS 规则：
/* 在你的 CSS 文件中修改 */
.avatar {
border-radius: 50%;
}
React 并没有规定你如何添加 CSS 文件。最简单的方式是使用 HTML 的 <link> 标签。如果你使用了构建工具或框架，请阅读其文档来了解如何将 CSS 文件添加到你的项目中。
4.显示数据
JSX 会让你把标签放到 JavaScript 中。而大括号会让你 “回到” JavaScript 中，这样你就可以从你的代码中嵌入一些变量并展示给用户。例如，这将显示 user.name：
return (
<h1>
{user.name}
</h1>
);
你还可以将 JSX 属性 “转义到 JavaScript”，但你必须使用大括号 而非 引号。例如，className="avatar" 是将 "avatar" 字符串传递给 className，作为 CSS 的 class。但 src={user.imageUrl} 会读取 JavaScript 的 user.imageUrl 变量，然后将该值作为 src 属性传递：
return (
<img
className="avatar"
src={user.imageUrl}
/>
);
你也可以把更为复杂的表达式放入 JSX 的大括号内，例如 字符串拼接：
const user = {
name: 'Hedy Lamarr',
imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
imageSize: 90,
};
export default function Profile() {
return (
<>
<h1>{user.name}</h1>
<img
className="avatar"
src={user.imageUrl}
alt={'Photo of ' + user.name}
style={{
width: user.imageSize,
height: user.imageSize
}}
/>
</>
);
}
在上面示例中，style={{}} 并不是一个特殊的语法，而是 style={ } JSX 大括号内的一个普通 {} 对象。当你的样式依赖于 JavaScript 变量时，你可以使用 style 属性。
条件渲染
React 没有特殊的语法来编写条件语句，因此你使用的就是普通的 JavaScript 代码。使用 if 语句根据条件引入 JSX：
使用 条件 ? 运算符
useState 是一个 React Hook，它允许你向组件添加一个 状态变量。
const [isLoggedIn, setIsLoggedIn] = useState(false); 这行代码是 React 中使用 useState Hook 来创建和管理组件状态的一种方式。
具体解释如下：
useState 是 React 提供的一个 Hook，用于在函数组件中添加状态管理功能。
useState(false) 表示初始化状态变量 isLoggedIn 的值为 false。通常在用户登录场景中，false 表示用户未登录，true 表示用户已登录。
isLoggedIn 是状态变量的名称，用于存储当前的登录状态。
setIsLoggedIn 是一个函数，用于更新 isLoggedIn 的值。例如，当用户点击登录按钮时，可以通过调用 setIsLoggedIn(true) 将登录状态设置为 true；当用户点击登出按钮时，可以通过调用 setIsLoggedIn(false) 将登录状态设置为 false。
渲染列表
你将依赖 JavaScript 的特性，例如 for 循环 和 array 的 map() 函数 来渲染组件列表。
在 JavaScript 中，const 是一个关键字，用于声明常量。它表示所声明的变量在初始化后不能被重新赋值。
响应事件
你可以通过在组件中声明 事件处理 函数来响应事件：
注意，onClick={handleClick} 的结尾没有小括号！不要 调用 事件处理函数：你只需 把函数传递给事件 即可。当用户点击按钮时 React 会调用你传递的事件处理函数。
更新界面
通常你会希望你的组件 “记住” 一些信息并展示出来，比如一个按钮被点击的次数。要做到这一点，你需要在你的组件中添加 state。
首先，从 React 引入 useState：
import { useState } from 'react';
----------------------------------------
使用 Hook
以 use 开头的函数被称为 Hook。useState 是 React 提供的一个内置 Hook。你可以在 React API 参考 中找到其他内置的 Hook。你也可以通过组合现有的 Hook 来编写属于你自己的 Hook。
Hook 比普通函数更为严格。你只能在你的组件（或其他 Hook）的 顶层 调用 Hook。如果你想在一个条件或循环中使用 useState，请提取一个新的组件并在组件内部使用它。
组件间共享数据
使用这种方式传递的信息被称作 prop。此时 MyApp 组件包含了 count state 以及 handleClick 事件处理函数，并将它们作为 prop 传递给 了每个按钮。
代码结构分析：
1. 状态管理
const [count, setCount] = useState(0); 使用 useState Hook 创建了一个状态变量 count，初始值为 0
setCount 是用于更新 count 值的函数
2. 事件处理函数
handleClick 函数通过 setCount(count + 1) 来增加计数器的值
这个函数被传递给两个 MyButton 组件
3. 组件结构
MyApp 是主组件，负责管理共享状态
两个 MyButton 组件都接收相同的 count 和 onClick props
每个按钮都显示相同的计数，因为它们共享同一个状态
4. Props 传递机制
count={count}：将父组件的 count 状态传递给子组件
onClick={handleClick}：将事件处理函数传递给子组件
子组件通过 MyButton({ count, onClick }) 接收这些 props
运行效果：
当用户点击任意一个按钮时，两个按钮都会同时更新显示新的计数值。这是因为两个按钮组件都引用了父组件 MyApp 中的同一个 count 状态。
核心概念：
状态提升：将共享状态放在共同的父组件中管理
Props 传递：通过 props 向子组件传递数据和函数
状态同步：多个组件共享同一状态，实现同步更新
浙公网安备 33010602011771号