概述
本章节将介绍开发者每天都会使用的 80% 的 React 概念。本章介绍的知识如下：
- 如何创建和嵌套组件
- 如何添加标签和样式
- 如何显示数据
- 如何渲染条件和列表
- 如何对事件做出响应并更新界面
- 如何在组件间共享数据
如何创建和嵌套组件
React 应用程序是由组件组成的。React 组件是返回标签的 JavaScript 函数，定义时组件名必须以大写字母开头，而 HTML 标签都是小写字母。举例如下：
function MyButton() { return ( <button>我是一个按钮</button> ); } export default function MyApp() { return ( <div> <h1>欢迎来到我的应用</h1> <MyButton /> </div> ); }说明：export default关键字指定了文件中的主要组件。export default关键字语法可以参考 MDN 和 javascript.info。
如何使用标签和样式
使用 JSX 编写标签
大多数 React 项目使用 JSX标签语法，原因是JSX很方便。所有 React中文网推荐的本地开发工具 都开箱即用地支持 JSX。
JSX 比 HTML 更加严格：
- 标签必须闭合，如
<br />。 - 组件只能返回一个 JSX 标签，因此组件中多个标签必须被包裹到一个父级标签中，如
<div>...</div>或空的<>...</>。举例如下：
function AboutPage() { return ( <> <h1>关于</h1> <p>你好。<br />最近怎么样？</p> </> ); }如果开发者有大量 HTML 需要移植到 JSX 中，开发者可以使用 在线转换器。
添加样式
React 中，开发者可以使用className为标签指定一个 CSS 的 class。它与 HTML 的 class 属性的工作方式相同：
<img className="avatar" />然后，开发者需要在一个单独的 CSS 文件中为标签的 CSS 类型 class编写规则：
/* 在你的 CSS 文件中修改 */ .avatar { border-radius: 50%; }注意：React 没有规定开发者如何添加 CSS 文件，最简单的方式是使用 HTML 的 <link> 标签关联CSS文件，但如果开发者使用了构建工具或框架，请阅读其文档了解如何将 CSS 文件添加到项目中。
如何将TS数据显示到JSX标签
标签中用大括号包裹 JavaScript 变量或 JavaScript 表达式，可以提取出变量/表达式内容给标签。主要有2种使用方式：
- 标签内容中使用 JavaScript 变量。举例如下：
return ( <h1> {user.name} </h1> );- 标签属性中使用 JavaScript 变量。举例如下：
return ( <img className="avatar" src={user.imageUrl} /> );如何根据不同条件渲染不同JSX标签
条件渲染
React 没有定义特殊的语法来编写条件语句，开发者需使用 JavaScript 代码编写条件，来指定JSX标签或JSX标签属性。下面以JSX标签为例说明：
if 语句举例
let content; if (isLoggedIn) { content = <AdminPanel />; } else { content = <LoginForm />; } return ( <div> {content} </div> );条件 ? 运算符举例
条件 ? 运算符与if区别：条件运算符工作于 JSX 标签内部。
<div> {isLoggedIn ? ( <AdminPanel /> ) : ( <LoginForm /> )} </div>逻辑 && 语法举例
逻辑 && 语法与if区别：&&运算符工作于 JSX 标签内部。
<div> {isLoggedIn && <AdminPanel />} </div>如何渲染JSX列表标签
React中通过for 循环 和 array 的 map() 函数 渲染JSX列表标签。代码举例如下：
const products = [ { title: '卷心菜', isFruit: false, id: 1 }, { title: '大蒜', isFruit: false, id: 2 }, { title: '苹果', isFruit: true, id: 3 }, ]; export default function ShoppingList() { const listItems = products.map(product => <li key={product.id} style={{ color: product.isFruit ? 'magenta' : 'darkgreen' }} > {product.title} </li> ); return ( <ul>{listItems}</ul> ); }JSX标签如何响应事件
import { useState } from 'react'; export default function MyApp() { return ( <div> <h1>独立更新的计数器</h1> <MyButton /> <MyButton /> </div> ); } function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <button onClick={handleClick}> 点了 {count} 次 </button> ); }说明：开发者从useState中可获得两样东西：当前的 state，以及更新它的函数setState。开发者可以起任何名字，但按照惯例命名规则为：[something, setSomething]。
使用 Hook
以use开头的函数称为Hook。useState是 React 提供的一个内置 Hook。开发者可以在 React API 参考 中找到其他内置的 Hook。开发者也可以通过组合现有的 Hook 来编写属于你自己的 Hook。
Hook 比普通函数更为严格。开发者只能在组件（或其他 Hook）的顶层调用 Hook。如果开发者想在一个条件或循环中使用useState，请提取一个新的组件并在组件内部使用它。
如何在组件间共享数据
将组件中的状态变量定义到他们的公共父组件中，父组件通过prop 传递方式将数据和方法传递给子组件，来实现组件间共享数据。这种方案称为“状态提升”。
import { useState } from 'react'; export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <h1>共同更新的计数器</h1> <MyButton count={count} onClick={handleClick} /> <MyButton count={count} onClick={handleClick} /> </div> ); } function MyButton({ count, onClick }) { return ( <button onClick={onClick}> 点了 {count} 次 </button> ); }
