React中文网课程笔记1—快速入门-开发者社区

概述

本章节将介绍开发者每天都会使用的 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> ); }