React入门:初学者指南
React是一个出色的JavaScript库，在开发社区掀起了一场风暴。简而言之，它让开发者更容易为网页、手机和桌面平台构建交互式用户界面。如今，全球数千家公司都在使用React，其中包括Netflix和Airbnb等大公司。
什么是React?
React是一个用于构建UI组件的JavaScript库。与Angular或Vue等更完整的框架不同，React只处理视图层，所以你需要额外的库来处理诸如路由、状态管理等事情。在本指南中，我们将重点介绍React可以开箱即用的功能。
React应用程序是使用可重用的构建的UI组件它们可以相互作用。React组件可以是基于类的组件，也可以是所谓的函数组件。基于类的组件定义使用ES6类，而函数组件是基本的JavaScript函数。这些倾向于使用箭头功能，但他们也可以使用函数关键字。基于类的组件将实现一个渲染函数，它返回一些JSX (React对常规JavaScript的扩展，用于创建React元素)，而函数组件将直接返回JSX。如果您从未听说过JSX，请不要担心，因为我们稍后将对此进行详细介绍。
React组件可以进一步分类为有状态而且无状态的组件。无状态组件的工作只是显示它从父React组件接收到的数据。如果它接收到任何事件或输入，它可以简单地将这些事件或输入传递给它的父节点进行处理。
另一方面，有状态组件负责维护某种应用程序状态。这可能涉及从外部源获取数据，或者跟踪用户是否登录。有状态组件可以响应事件和输入以更新其状态。
根据经验，应该尽可能编写无状态组件。它们更容易在应用程序和其他项目中重用。
了解虚拟DOM
在我们开始编码之前，你需要知道React使用了一个虚拟DOM处理页面呈现。如果你熟悉jQuery，你就会知道它可以直接通过jQuery控件来操作网页HTML DOM．在很多情况下，这种直接的互动几乎不会带来任何问题。然而，对于某些情况，例如运行一个交互性很强的实时web应用程序，性能可能会受到相当大的影响。
为了解决这个问题，我们提出了虚拟DOM(真正DOM的内存表示)被发明出来，目前被许多现代UI框架应用，包括React。与HTML DOM不同，虚拟DOM更容易操作，能够在几毫秒内处理大量操作，而不会影响页面性能。React会定期比较虚拟DOM和HTML DOM。然后计算一个差异，将其应用于HTML DOM，使其与虚拟DOM匹配。通过这种方式，React确保你的应用程序以每秒60帧的一致速度呈现，这意味着用户很少或没有延迟。
开始一个Blank React项目
根据先决条件，我假设您已经设置了一个Node环境，其中包含最新版本的npm(或可选的npm)纱）.
接下来，我们将使用创建React应用，一个用于创建单页React应用程序的官方实用程序脚本。
让我们现在安装这个:
npm<跨度类＝"token plain">我-g create-react-app然后用它来创建一个新的React应用程序。
创建<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">反应<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">应用程序消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">应用程序根据您的互联网连接速度，如果这是您第一次运行create-react-app命令。一路上安装了一堆包，这些包需要建立一个方便的开发环境，包括web服务器、编译器和测试工具。
如果您不想在全局范围内安装太多包，也可以这样做npx，它允许你下载并运行一个包，而不需要安装它:
I -g create-react-app运行这些命令中的任何一个都应该输出类似于下面的内容:
．．<跨度类＝"token plain">．<跨度类＝"token-line block" style="color:#bfc7d5">成功<跨度类＝"token operator" style="color:rgb(137, 221, 255)">！<跨度类＝"token plain">创建react-app在C:<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">＼<跨度类＝"token plain">用户<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">＼<跨度类＝"token plain">迈克<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">＼<跨度类＝"token plain">项目<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">＼<跨度类＝"token plain">github<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">＼<跨度类＝"token plain">message-app<跨度类＝"token-line block" style="color:#bfc7d5">在这个目录中，你可以运行几个命令:<跨度类＝"token-line block" style="color:#bfc7d5">纱<跨度类＝"token plain">开始<跨度类＝"token-line block" style="color:#bfc7d5">启动开发服务器。<跨度类＝"token-line block" style="color:#bfc7d5">纱<跨度类＝"token plain">构建<跨度类＝"token-line block" style="color:#bfc7d5">将应用程序捆绑到静态文件中<跨度类＝"token keyword" style="font-style:italic">为<跨度类＝"token plain">生产。<跨度类＝"token-line block" style="color:#bfc7d5">纱<跨度类＝"token plain">测验<跨度类＝"token plain">启动<跨度类＝"token builtin class-name" style="color:rgb(255, 203, 107)">测验<跨度类＝"token plain">跑步者。<跨度类＝"token-line block" style="color:#bfc7d5">纱<跨度类＝"token plain">喷射<跨度类＝"token plain">删除此工具并复制构建依赖项、配置文件<跨度类＝"token-line block" style="color:#bfc7d5">和脚本到app目录。如果你<跨度类＝"token keyword" style="font-style:italic">做<跨度类＝"token plain">这个，你回不去了<跨度类＝"token operator" style="color:rgb(137, 221, 255)">！<跨度类＝"token plain">我们建议您在开头输入:<跨度类＝"token-line block" style="color:#bfc7d5">cd<跨度类＝"token plain">message-app<跨度类＝"token-line block" style="color:#bfc7d5">纱<跨度类＝"token plain">开始<跨度类＝"token-line block" style="color:#bfc7d5">快乐的黑客<跨度类＝"token operator" style="color:rgb(137, 221, 255)">！项目设置过程完成后，执行以下命令启动React应用程序:
cd<跨度类＝"token plain">message-app<跨度类＝"token-line block" style="color:#bfc7d5">npm<跨度类＝"token plain">开始您应该看到以下输出:
.．.<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token plain">编译<跨度类＝"token plain">成功<跨度类＝"token operator" style="color:rgb(137, 221, 255)">！<跨度类＝"token plain">你<跨度类＝"token plain">现在可以查看react了<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">应用程序<跨度类＝"token keyword" style="font-style:italic">在<跨度类＝"token plain">浏览器<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token plain">当地的<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">http<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">本地主机<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token number" style="color:rgb(247, 140, 108)">3000<跨度类＝"token plain">在<跨度类＝"token plain">你的<跨度类＝"token plain">网络<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">http<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token number" style="color:rgb(247, 140, 108)">192.168<跨度类＝"token number" style="color:rgb(247, 140, 108)">56<跨度类＝"token number" style="color:rgb(247, 140, 108)">．1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token number" style="color:rgb(247, 140, 108)">3000<跨度类＝"token plain">请注意<跨度类＝"token plain">开发构建没有得到优化<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token plain">来<跨度类＝"token plain">创建一个产品构建<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">使用纱线编织<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．你的默认浏览器会自动启动，你会看到如下画面:
现在我们已经确认了React的初始项目运行正常，让我们来看看幕后发生了什么。您可以打开该文件夹message-app使用您最喜欢的代码编辑器。让我们从package.json文件:
｛<跨度类＝"token plain">“名称”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“message-app”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“版本”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“0.1.0”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“私人”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">真正的<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“依赖”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">｛<跨度类＝"token plain">“@testing-library / jest-dom”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“^ 4.2.4”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“@testing-library /反应”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“^ 9.3.2”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“@testing-library /用户事件”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“^ 7.1.2”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“反应”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“^ 16.13.1”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“react-dom”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“^ 16.13.1”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“react-scripts”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“3.4.3”<跨度类＝"token plain">｝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“脚本”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">｛<跨度类＝"token plain">“开始”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“react-scripts启动”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“构建”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“react-scripts构建”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“测试”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“react-scripts测试”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“驱逐”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“react-scripts喷射”<跨度类＝"token plain">｝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“eslintConfig”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">｛<跨度类＝"token plain">“扩展”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“react-app”<跨度类＝"token plain">｝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“browserslist”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">｛<跨度类＝"token plain">“生产”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">［<跨度类＝"token plain">“> 0.2%”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“没死”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">"not op_mini all"<跨度类＝"token plain">］<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“发展”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">［<跨度类＝"token plain">“最后一个chrome版本”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">最新一个firefox版本<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“最后一个safari版本”<跨度类＝"token plain">］<跨度类＝"token plain">｝<跨度类＝"token plain">｝正如你所看到的，Create React App已经为我们安装了几个依赖项。前三个与反应测试库这(正如你可能猜到的)使我们能够测试我们的React代码。然后我们有反应而且react-dom，任何React应用程序的核心包，最后react-scripts，它设置开发环境并启动服务器(您刚才已经看到了)。
然后是四个npm脚本，用于自动化重复任务:
开始启动开发服务器构建创建应用程序的生产就绪版本测验运行上面提到的测试喷射会暴露应用程序的开发环境吗
最后一个命令值得详细阐述。Create React App工具在你的实际代码和开发环境之间提供了清晰的分离。如果你跑了NPM运行弹出创建React应用程序将停止隐藏它在引子下所做的事情，并将所有内容转储到项目中package.json文件。虽然这让你可以更细粒度地控制应用程序的依赖项，但我不建议你这样做，因为你必须管理构建和测试项目中使用的所有复杂代码。如果需要的话，你可以用customize-cra在不弹出的情况下配置构建过程。
Create React App也提供了支持ESLint(从图中可以看出eslintConfig属性)，并使用react-appESLint规则。
的browserslist的属性package.json文件允许您指定应用程序将支持的浏览器列表。此配置用于PostCSS工具和编译器，例如巴别塔．
Create React App最酷的功能之一是它提供的功能热重载开箱即用。这意味着我们对代码所做的任何更改都会导致浏览器自动刷新。对JavaScript代码的更改将重新加载页面，而对CSS的更改将更新DOM而不重新加载。
现在，让我们首先通过按下停止开发服务器Ctrl+C．服务器停止后，删除除serviceWorker.js而且setupTests.js文件src文件夹中。如果你对服务工作者的工作感兴趣，你可以了解更多在这里．
除此之外，我们将从头创建所有代码，以便您能够理解src文件夹中。
介绍JSX语法
被React文档定义为“JavaScript的语法扩展”，JSX使编写React组件变得容易。使用JSX，我们可以传递HTML结构或React元素，就像它们是标准的JavaScript值一样。
这里有一个简单的例子:
进口<跨度类＝"token plain">反应<跨度类＝"token plain">从<跨度类＝"token plain">“反应”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">出口<跨度类＝"token plain">默认的<跨度类＝"token plain">函数<跨度类＝"token plain">应用程序<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token plain">｛<跨度类＝"token plain">常量<跨度类＝"token plain">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain"><<跨度类＝"token plain">h1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token constant" style="color:rgb(130, 170, 255)">我<跨度类＝"token plain">我是个标题<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">h1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">/ / JSX增值!<跨度类＝"token plain">返回<跨度类＝"token plain">（<跨度类＝"token plain">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝注意这一行const message = ．这是JSX。如果你试图在网络浏览器中运行它，它会给你一个错误。然而，在React应用程序中，JSX是由一个转译器(如Babel)解释的，并呈现为React可以理解的JavaScript代码。I'm a heading
;
更多关于JSX的信息
您可以在我们的教程中了解更多关于JSX的知识。JSX简介”。
在过去，React JSX文件通常带有一个.jsx文件扩展名。现在，创建React应用程序工具生成React文件使用. js文件扩展名。而.jsx文件扩展名仍然被支持，React的维护者推荐使用. js．然而，有一个React开发者的反对小组，包括我自己，他们更喜欢使用.jsx延期，原因如下:
- 在VS Code，埃米特可以开箱即用
.jsx文件。但是，你可以配置VS Code来处理所有. js文件JavaScriptReact让埃米特处理那些文件 - 标准JavaScript和React JavaScript代码有不同的检测规则。
然而，对于本教程，我将遵守Create React App提供给我们的内容，并坚持使用. js文件结束。
你好,世界!在反应
让我们开始编写一些代码。在src新创建的文件夹message-app，创建index.js文件并添加以下代码:
进口<跨度类＝"token plain">反应<跨度类＝"token plain">从<跨度类＝"token plain">“反应”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">进口<跨度类＝"token plain">ReactDOM<跨度类＝"token plain">从<跨度类＝"token plain">“react-dom”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">ReactDOM<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token method function property-access" style="color:rgb(130, 170, 255)">渲染<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token plain">h1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">你好<跨度类＝"token plain">世界<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">h1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">文档<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token method function property-access" style="color:rgb(130, 170, 255)">getElementById<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token string" style="color:rgb(195, 232, 141)">“根”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；再次启动开发服务器npm开始或纱线开始．您的浏览器应该显示以下内容:
这是最基本的“Hello World”React示例。的index.jsfile是你的项目的根文件，React组件将在这里被渲染。让我解释一下代码是如何工作的:
- 第1行:导入React包来处理JSX处理。
- 第2行:导入ReactDOM包以呈现根React组件。
- 第3行:调用渲染函数，他说:
<标题> Hello World h1 > < /: JSX元素. getelementbyid(根):一个HTML容器(JSX元素将在这里呈现)。
HTML容器位于公共/ index . html文件。在第31行，您应该可以看到< div id = "根" > < / div >．这就是所谓的根DOM节点因为它里面的所有东西都由React虚拟DOM．
虽然JSX看起来确实很像HTML，但有一些关键的区别。例如，你不能使用a类属性，因为它是一个JavaScript关键字。相反,类名称在它的位置上使用。此外，事件如onclick拼写onClick在JSX。现在让我们修改Hello World代码:
常量<跨度类＝"token plain">元素<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain"><<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">你好<跨度类＝"token plain">世界<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">ReactDOM<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token method function property-access" style="color:rgb(130, 170, 255)">渲染<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token plain">元素<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">文档<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token method function property-access" style="color:rgb(130, 170, 255)">getElementById<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token string" style="color:rgb(195, 232, 141)">“根”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；我将JSX代码移到了一个名为元素．我也替换了h1标签div标签。要使JSX工作，需要将元素包装在单个父标记中。
看看下面的例子:
常量<跨度类＝"token plain">元素<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain"><<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">你好<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">简<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；上面的代码不能工作。您将得到一个语法错误，指示您必须将相邻的JSX元素包含在一个封闭标记中。就像这样:
常量<跨度类＝"token plain">元素<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain"><<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">你好<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">简<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；如何在JSX中计算JavaScript表达式?简单。就像这样使用大括号:
常量<跨度类＝"token plain">的名字<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain">“简”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">常量<跨度类＝"token plain">元素<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain"><<跨度类＝"token plain">p<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">你好<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">｛<跨度类＝"token plain">的名字<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">p<跨度类＝"token operator" style="color:rgb(137, 221, 255)">>或者像这样:
常量<跨度类＝"token plain">用户<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain">｛<跨度类＝"token plain">firstName<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“简”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">姓<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“母鹿”<跨度类＝"token plain">｝<跨度类＝"token plain">常量<跨度类＝"token plain">元素<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain"><<跨度类＝"token plain">p<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">你好<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">｛<跨度类＝"token plain">用户<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">firstName<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token plain">｛<跨度类＝"token plain">用户<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">姓<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">p<跨度类＝"token operator" style="color:rgb(137, 221, 255)">>更新代码并确认浏览器显示“Hello, Jane Doe”。试试其他的例子，比如{5 + 2}．现在您已经掌握了使用JSX的基本知识，让我们继续创建一个React组件。
声明React组件
上面的例子以一种简单的方式展示了如何做到这一点ReactDOM.render ()的工作原理。通常，我们将所有的项目逻辑封装在React组件中，然后将这些组件传递给ReactDOM.render函数。
在src文件夹，创建一个名为App.js然后输入以下代码:
进口<跨度类＝"token plain">反应<跨度类＝"token imports punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token imports">｛<跨度类＝"token imports">组件<跨度类＝"token imports">｝<跨度类＝"token plain">从<跨度类＝"token plain">“反应”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">类<跨度类＝"token plain">应用程序<跨度类＝"token plain">扩展<跨度类＝"token plain">组件<跨度类＝"token plain">｛<跨度类＝"token plain">渲染<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">返回<跨度类＝"token plain">（<跨度类＝"token plain"><<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">你好<跨度类＝"token plain">世界<跨度类＝"token plain">再一次<跨度类＝"token operator" style="color:rgb(137, 221, 255)">！<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）<跨度类＝"token plain">｝<跨度类＝"token plain">｝<跨度类＝"token plain">出口<跨度类＝"token plain">默认的<跨度类＝"token plain">应用程序<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；在这里，我们通过定义一个JavaScript类来创建一个React组件反应。Component．我们还定义了一个返回JSX元素的呈现函数。类型中可以放置额外的JSX代码< div >标签。接下来,更新src / index.js使用以下代码查看浏览器中反映的更改:
进口<跨度类＝"token plain">反应<跨度类＝"token plain">从<跨度类＝"token plain">“反应”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">进口<跨度类＝"token plain">ReactDOM<跨度类＝"token plain">从<跨度类＝"token plain">“react-dom”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">进口<跨度类＝"token plain">应用程序<跨度类＝"token plain">从<跨度类＝"token plain">”。/应用程序<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">ReactDOM<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token method function property-access" style="color:rgb(130, 170, 255)">渲染<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token maybe-class-name">应用程序<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">文档<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token method function property-access" style="color:rgb(130, 170, 255)">getElementById<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token string" style="color:rgb(195, 232, 141)">“根”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；首先，我们导入应用程序组件。然后渲染应用程序使用JSX格式，如下所示:< App / >．这是必需的，这样JSX才能将其编译为可以推入的元素DOM反应．保存更改后，检查一下浏览器，确保它呈现了正确的消息。
接下来，我们将看看如何应用样式。
样式化JSX元素
有React组件的各种样式．我们将在本教程中看到的两个:
- JSX内联样式
- 外部样式表
下面是一个我们如何实现JSX内联样式的例子:
/ / src / App.js<跨度类＝"token plain">渲染<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token plain">｛<跨度类＝"token plain">常量<跨度类＝"token plain">headerStyle<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain">｛<跨度类＝"token plain">颜色<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“# ff0000”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">textDecoration<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“下划线”<跨度类＝"token plain">｝<跨度类＝"token plain">返回<跨度类＝"token plain">（<跨度类＝"token plain"><<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">h1风格<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">headerStyle<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">你好<跨度类＝"token plain">世界<跨度类＝"token plain">再一次<跨度类＝"token operator" style="color:rgb(137, 221, 255)">！<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">h1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）<跨度类＝"token plain">｝React样式看起来很像常规的CSS，但有一些关键的区别。例如,headerStyle是对象字面量。我们不能像平常那样使用分号。此外，为了与JavaScript语法兼容，还更改了许多CSS声明。例如，而不是文字修饰，我们使用textDecoration．基本上，除了供应商前缀以外，所有CSS键都使用驼峰大小写WebkitTransition，它必须以大写字母开头。
我们也可以这样实现样式:
/ / src / App.js<跨度类＝"token plain">返回<跨度类＝"token plain">（<跨度类＝"token plain"><<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">h1风格<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token literal-property property">颜色<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token string" style="color:rgb(195, 232, 141)">“# ff0000”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">textDecoration<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“下划线”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">你好<跨度类＝"token plain">世界<跨度类＝"token plain">再一次<跨度类＝"token operator" style="color:rgb(137, 221, 255)">！<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">h1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）第二种方法是使用外部样式表。默认情况下，已经支持外部CSS样式表。如果您想使用Sass之类的预处理器，请查阅文档找出如何配置它。
在src文件夹，创建一个名为App.css然后输入以下代码:
h1<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">字体<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">大小<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">4快速眼动<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝将以下导入语句添加到src / App.js在文件的顶部:
进口<跨度类＝"token plain">”。/ App.css '<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；保存后，您应该看到浏览器上的文本内容的大小发生了巨大变化。你也可以像这样使用CSS类:
．<跨度类＝"token property-access">头<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">红色的<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">字体<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">大小<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">4快速眼动<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">颜色<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"># ff0000<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">文本<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">装饰<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">下划线<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝更新src / App.js如下:
<<跨度类＝"token plain">h1类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“header-red”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">你好<跨度类＝"token plain">世界<跨度类＝"token plain">再一次<跨度类＝"token operator" style="color:rgb(137, 221, 255)">！<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">h1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">>我们不能使用HTML类属性，因为它是保留的JavaScript关键字。相反，我们使用类名称．以下是您的预期输出。
现在您已经学习了如何为React项目添加样式，让我们继续学习无状态和有状态React组件。
无状态组件与有状态组件
无状态组件，也称为哑组件，只是一个显示信息的组件。它不包含任何操作数据的逻辑。它可以接收来自用户的事件，然后将事件传递给父容器进行处理。
创建文件message-view.js并将以下示例代码复制到其中。这是一个愚蠢组件的完美例子(尽管从技术上讲，它更像是一个静态组件):
进口<跨度类＝"token plain">反应<跨度类＝"token plain">从<跨度类＝"token plain">“反应”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">类<跨度类＝"token plain">MessageView<跨度类＝"token plain">扩展<跨度类＝"token plain">反应<跨度类＝"token class-name punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token class-name" style="color:rgb(255, 203, 107)">组件<跨度类＝"token plain">｛<跨度类＝"token plain">渲染<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token plain">｛<跨度类＝"token plain">返回<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“消息”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“字段”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“标签”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">从<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“价值”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">约翰<跨度类＝"token plain">美国能源部<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“字段”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“标签”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“价值”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">未读的<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">”字段内容”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“标签”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“价值”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">有<跨度类＝"token plain">美好的一天<跨度类＝"token operator" style="color:rgb(137, 221, 255)">！<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）<跨度类＝"token plain">｝<跨度类＝"token plain">｝<跨度类＝"token plain">出口<跨度类＝"token plain">默认的<跨度类＝"token plain">MessageView<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；接下来，添加一些基本样式src / App.css使用以下代码:
身体<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">背景<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">颜色<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">＃<跨度类＝"token constant" style="color:rgb(130, 170, 255)">EDF2F7<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">颜色<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"># 2 d3748<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">字体<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">家庭<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">-<跨度类＝"token plain">苹果<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">系统<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">BlinkMacSystemFont<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“Segoe UI”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">Roboto<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">氧气<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">Ubuntu<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">Cantarell<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“开放无”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">“Helvetica Neue”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">无<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">衬线<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝<跨度类＝"token plain">h1<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">字体<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">大小<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">2快速眼动<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝<跨度类＝"token plain">．<跨度类＝"token property-access">容器<跨度类＝"token plain">｛<跨度类＝"token plain">宽度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">800 px<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">保证金<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">0<跨度类＝"token plain">汽车<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝<跨度类＝"token plain">．<跨度类＝"token property-access">消息<跨度类＝"token plain">｛<跨度类＝"token plain">背景<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">颜色<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">＃<跨度类＝"token constant" style="color:rgb(130, 170, 255)">F7FAFC<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">宽度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">400 px<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">保证金<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">前<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">20 px<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">边境<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">前<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">固体2px #fff<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">边境<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">半径<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">8像素<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">填充<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">12 px<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">盒子<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">影子<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">0<跨度类＝"token plain">10 px 15像素<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">3 px<跨度类＝"token function" style="color:rgb(130, 170, 255)">rgba<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token number" style="color:rgb(247, 140, 108)">0<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">0<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">0<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">0．1<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">0<跨度类＝"token plain">4 px 6像素<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">2 px<跨度类＝"token function" style="color:rgb(130, 170, 255)">rgba<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token number" style="color:rgb(247, 140, 108)">0<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">0<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">0<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">0.05<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝<跨度类＝"token plain">．<跨度类＝"token property-access">场<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">显示<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">flex<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">证明<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">内容<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">flex<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">开始<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">保证金<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">前<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">2 px<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝<跨度类＝"token plain">．<跨度类＝"token property-access">标签<跨度类＝"token plain">｛<跨度类＝"token plain">字体<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">重量<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">大胆的<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">字体<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">大小<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">1快速眼动<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">宽度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">6快速眼动<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝<跨度类＝"token plain">．<跨度类＝"token property-access">价值<跨度类＝"token plain">｛<跨度类＝"token plain">颜色<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"># 4 a5568<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝<跨度类＝"token plain">．<跨度类＝"token property-access">内容<跨度类＝"token plain">．<跨度类＝"token property-access">价值<跨度类＝"token plain">｛<跨度类＝"token plain">字体<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">风格<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">斜体<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝最后,修改src / App.js这样整个文件看起来就像这样:
进口<跨度类＝"token plain">反应<跨度类＝"token imports punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token imports">｛<跨度类＝"token imports">组件<跨度类＝"token imports">｝<跨度类＝"token plain">从<跨度类＝"token plain">“反应”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">进口<跨度类＝"token plain">”。/ App.css '<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">进口<跨度类＝"token plain">MessageView<跨度类＝"token plain">从<跨度类＝"token plain">“。/消息视图”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">类<跨度类＝"token plain">应用程序<跨度类＝"token plain">扩展<跨度类＝"token plain">组件<跨度类＝"token plain">｛<跨度类＝"token plain">渲染<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">返回<跨度类＝"token plain">（<跨度类＝"token plain"><<跨度类＝"token maybe-class-name">MessageView<跨度类＝"token plain">/<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）<跨度类＝"token plain">｝<跨度类＝"token plain">｝<跨度类＝"token plain">出口<跨度类＝"token plain">默认的<跨度类＝"token plain">应用程序<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；到目前为止，代码应该是不言自明的，因为我已经解释了到目前为止所涉及的概念。现在看看你的浏览器，你应该有以下结果:
我们之前提到过React同时提供了基于类的组件和函数组件。我们可以重写MessageView使用像这样的函数式语法:
进口<跨度类＝"token plain">反应<跨度类＝"token plain">从<跨度类＝"token plain">“反应”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">出口<跨度类＝"token plain">默认的<跨度类＝"token plain">函数<跨度类＝"token plain">MessageView<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token plain">｛<跨度类＝"token plain">返回<跨度类＝"token plain">（<跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“消息”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“字段”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“标签”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">从<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“价值”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">约翰<跨度类＝"token plain">美国能源部<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“字段”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“标签”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“价值”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">未读的<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">”字段内容”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“标签”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“价值”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">有<跨度类＝"token plain">美好的一天<跨度类＝"token operator" style="color:rgb(137, 221, 255)">！<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝注意，我已经删除了组件导入，因为这在函数语法中不是必需的。这种风格一开始可能会让人困惑，但你很快就会知道用这种方式编写React组件会更快。
还有，随着的出现反应钩子在美国，这种编写React组件的风格正变得越来越流行。
通过道具传递数据
你已经成功创建了一个无状态的React组件。不过，它还不完整，因为要将它与有状态组件或容器正确集成，还需要做更多的工作。目前,MessageView正在显示静态数据。我们需要修改它，以便它能够接受输入参数。我们用一种叫做道具-data，我们将从父组件传递。
首先改变MessageView组件如下:
进口<跨度类＝"token plain">反应<跨度类＝"token plain">从<跨度类＝"token plain">“反应”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">类<跨度类＝"token plain">MessageView<跨度类＝"token plain">扩展<跨度类＝"token plain">反应<跨度类＝"token class-name punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token class-name" style="color:rgb(255, 203, 107)">组件<跨度类＝"token plain">｛<跨度类＝"token plain">渲染<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token plain">｛<跨度类＝"token plain">常量<跨度类＝"token plain">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain">这<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">道具<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">返回<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“消息”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“字段”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“标签”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">从<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“价值”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token keyword module" style="font-style:italic">从<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“字段”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“标签”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“价值”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">状态<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">”字段内容”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“标签”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“价值”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">内容<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）<跨度类＝"token plain">｝<跨度类＝"token plain">｝<跨度类＝"token plain">出口<跨度类＝"token plain">默认的<跨度类＝"token plain">MessageView<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；这里需要注意的是我们如何定义消息变量。我们给它赋值this.props.message，我们将从一个有状态的父组件传下来。在JSX中，我们可以引用消息变量并将其输出到页面。
现在让我们创建一个父组件MessageView．新建一个文件message-list.js并添加以下代码:
进口<跨度类＝"token plain">反应<跨度类＝"token imports punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token imports">｛<跨度类＝"token imports">组件<跨度类＝"token imports">｝<跨度类＝"token plain">从<跨度类＝"token plain">“反应”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">进口<跨度类＝"token plain">MessageView<跨度类＝"token plain">从<跨度类＝"token plain">“。/消息视图”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">类<跨度类＝"token plain">MessageList<跨度类＝"token plain">扩展<跨度类＝"token plain">组件<跨度类＝"token plain">｛<跨度类＝"token plain">状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain">｛<跨度类＝"token plain">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">｛<跨度类＝"token plain">从<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“玛莎”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">内容<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“我很快就要去旅行了”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“读”<跨度类＝"token plain">｝<跨度类＝"token plain">｝<跨度类＝"token plain">渲染<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token plain">｛<跨度类＝"token plain">返回<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“容器”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">h1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">列表<跨度类＝"token plain">的<跨度类＝"token plain">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">h1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token maybe-class-name">MessageView<跨度类＝"token plain">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token keyword" style="font-style:italic">这<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">状态<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token plain">/<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）<跨度类＝"token plain">｝<跨度类＝"token plain">｝<跨度类＝"token plain">出口<跨度类＝"token plain">默认的<跨度类＝"token plain">MessageList<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；这里，我们用状态来存储包含我们的消息的对象。React的神奇之处在于，当状态对象改变时，组件将重新呈现(从而更新UI)。
然后，在JSX中，我们传递消息我们的财产状态对象的MessageView组件。
最后一步是更新我们的应用程序组件来呈现新的有状态MessageList组件，而不是无状态的MessageView组件:
进口<跨度类＝"token plain">反应<跨度类＝"token imports punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token imports">｛<跨度类＝"token imports">组件<跨度类＝"token imports">｝<跨度类＝"token plain">从<跨度类＝"token plain">“反应”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">进口<跨度类＝"token plain">MessageList<跨度类＝"token plain">从<跨度类＝"token plain">”。/消息列表'<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">进口<跨度类＝"token plain">”。/ App.css '<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">类<跨度类＝"token plain">应用程序<跨度类＝"token plain">扩展<跨度类＝"token plain">组件<跨度类＝"token plain">｛<跨度类＝"token plain">渲染<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">返回<跨度类＝"token plain">（<跨度类＝"token plain"><<跨度类＝"token maybe-class-name">MessageList<跨度类＝"token plain">/<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）<跨度类＝"token plain">｝<跨度类＝"token plain">｝<跨度类＝"token plain">出口<跨度类＝"token plain">默认的<跨度类＝"token plain">应用程序<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；保存更改后，检查浏览器以查看结果。
花点时间确保你明白发生了什么。我们声明状态对象的(有状态的)MessageList组件。一个消息属性包含了我们的消息。在我们的渲染函数中，我们可以使用所谓的props将该消息传递给我们的(无状态)子组件。
(无状态)MessageView组件时，我们可以使用this.props.message．然后，我们可以将这个值传递给JSX以呈现到页面。
唷!
支持检查
随着应用程序的增长，数据作为道具来回传递，验证组件是否正在接收它们所期望的数据类型将非常有用。
幸运的是，我们可以用prop-types包．要查看此操作的快速示例，请更改我们的MessageView组成部分如下:
进口<跨度类＝"token plain">反应<跨度类＝"token plain">从<跨度类＝"token plain">“反应”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">进口<跨度类＝"token plain">proptype<跨度类＝"token plain">从<跨度类＝"token plain">“prop-types”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">类<跨度类＝"token plain">MessageView<跨度类＝"token plain">扩展<跨度类＝"token plain">组件<跨度类＝"token plain">｛<跨度类＝"token plain">//这个保持不变<跨度类＝"token plain">］<跨度类＝"token plain">MessageView<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">proptype<跨度类＝"token plain">＝<跨度类＝"token plain">｛<跨度类＝"token plain">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">proptype<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">对象<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">isRequired<跨度类＝"token plain">｝<跨度类＝"token plain">出口<跨度类＝"token plain">默认的<跨度类＝"token plain">MessageView<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；这将导致你的React应用程序抱怨，如果消息道具不见了。如果组件接收到对象以外的任何东西，也会导致它报错。
你可以通过改变父组件的状态来尝试:
状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain">｛<跨度类＝"token plain">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“不是什么东西!”<跨度类＝"token plain">｝回到浏览器并打开控制台。您应该在控制台中看到以下记录:
警告<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">失败的<跨度类＝"token plain">支持类型<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">无效的<跨度类＝"token plain">道具<跨度类＝"token template-string template-punctuation string" style="color:rgb(195, 232, 141)">｀<跨度类＝"token template-string string" style="color:rgb(195, 232, 141)">消息<跨度类＝"token template-string template-punctuation string" style="color:rgb(195, 232, 141)">｀<跨度类＝"token plain">的<跨度类＝"token plain">类型<跨度类＝"token template-string template-punctuation string" style="color:rgb(195, 232, 141)">｀<跨度类＝"token template-string string" style="color:rgb(195, 232, 141)">字符串<跨度类＝"token template-string template-punctuation string" style="color:rgb(195, 232, 141)">｀<跨度类＝"token plain">提供给<跨度类＝"token template-string template-punctuation string" style="color:rgb(195, 232, 141)">｀<跨度类＝"token template-string string" style="color:rgb(195, 232, 141)">MessageView<跨度类＝"token template-string template-punctuation string" style="color:rgb(195, 232, 141)">｀<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">预期<跨度类＝"token template-string template-punctuation string" style="color:rgb(195, 232, 141)">｀<跨度类＝"token template-string string" style="color:rgb(195, 232, 141)">对象<跨度类＝"token template-string template-punctuation string" style="color:rgb(195, 232, 141)">｀<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token plain">在<跨度类＝"token plain">MessageView<跨度类＝"token plain">（<跨度类＝"token plain">在消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">-<跨度类＝"token plain">列表<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">js<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token number" style="color:rgb(247, 140, 108)">13<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token plain">在<跨度类＝"token plain">MessageList<跨度类＝"token plain">（<跨度类＝"token plain">在<跨度类＝"token maybe-class-name">应用程序<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">js<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token number" style="color:rgb(247, 140, 108)">9<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token plain">在<跨度类＝"token plain">应用程序<跨度类＝"token plain">（<跨度类＝"token plain">在src<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">指数<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">js<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token number" style="color:rgb(247, 140, 108)">6<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）组件重用
现在让我们看看如何使用显示多条消息MessageView实例。这就是React开始发光的地方，因为它使代码重用变得非常容易(正如你将看到的)。
首先，我们要改变state.message并将其重命名为消息．然后，我们将使用JavaScript的map函数的多个实例MessageView组件中的一条消息state.messages数组中。
我们还需要填充一个名为关键具有独特的值，如id．React需要这个来跟踪列表中哪些项被更改、添加或删除。
更新MessageList代码如下:
类<跨度类＝"token plain">MessageList<跨度类＝"token plain">扩展<跨度类＝"token plain">组件<跨度类＝"token plain">｛<跨度类＝"token plain">状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain">｛<跨度类＝"token plain">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">［<跨度类＝"token plain">｛<跨度类＝"token plain">_id<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“d2504a54”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">从<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“约翰。”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">内容<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“活动下周开始”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“未读”<跨度类＝"token plain">｝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">｛<跨度类＝"token plain">_id<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“fc7cad74”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">从<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“玛莎”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">内容<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“我很快就要去旅行了”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“读”<跨度类＝"token plain">｝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">｛<跨度类＝"token plain">_id<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">876 ae642<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">从<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“雅各”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">内容<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“待会儿再谈。祝你今天过得愉快!”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“读”<跨度类＝"token plain">｝<跨度类＝"token plain">］<跨度类＝"token plain">｝<跨度类＝"token plain">渲染<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token plain">｛<跨度类＝"token plain">常量<跨度类＝"token plain">messageViews<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain">这<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">状态<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token method function property-access" style="color:rgb(130, 170, 255)">地图<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token plain">消息<跨度类＝"token plain">= ><跨度类＝"token plain"><<跨度类＝"token maybe-class-name">MessageView<跨度类＝"token plain">关键<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">_id<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token plain">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token plain">/<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）<跨度类＝"token plain">返回<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“容器”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">h1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">列表<跨度类＝"token plain">的<跨度类＝"token plain">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">h1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">｛<跨度类＝"token plain">messageViews<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）<跨度类＝"token plain">｝<跨度类＝"token plain">｝检查浏览器查看结果:
正如你所看到的，使用React很容易定义构建块来创建强大而复杂的UI界面。
重构使用React钩子
钩子是React的最新版本，但它们在React世界掀起了一场风暴。简单地说，它们使React函数组件和添加状态(和其他特性)成为可能。
我将通过重构我们的MessageView组件，使其成为一个函数组件，它使用React钩子管理其状态。请注意，这仅适用于使用React v16.8及以上版本。
进口<跨度类＝"token plain">反应<跨度类＝"token imports punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token imports">｛<跨度类＝"token imports">useState<跨度类＝"token imports punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token plain">从<跨度类＝"token plain">“反应”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">进口<跨度类＝"token plain">MessageView<跨度类＝"token plain">从<跨度类＝"token plain">“。/消息视图”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">出口<跨度类＝"token plain">默认的<跨度类＝"token plain">函数<跨度类＝"token plain">MessageList<跨度类＝"token plain">（<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token plain">｛<跨度类＝"token plain">常量<跨度类＝"token plain">initialvalue<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain">［<跨度类＝"token plain">｛<跨度类＝"token plain">_id<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“d2504a54”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">从<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“约翰。”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">内容<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“活动下周开始”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“未读”<跨度类＝"token plain">｝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">｛<跨度类＝"token plain">_id<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“fc7cad74”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">从<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“玛莎”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">内容<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“我很快就要去旅行了”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“读”<跨度类＝"token plain">｝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">｛<跨度类＝"token plain">_id<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">876 ae642<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">从<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“雅各”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">内容<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“待会儿再谈。祝你今天过得愉快!”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">“读”<跨度类＝"token plain">｝<跨度类＝"token plain">］<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">常量<跨度类＝"token plain">［<跨度类＝"token plain">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">］<跨度类＝"token plain">＝<跨度类＝"token plain">useState<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token plain">initialvalue<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">常量<跨度类＝"token plain">messageViews<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token plain">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token method function property-access" style="color:rgb(130, 170, 255)">地图<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token plain">消息<跨度类＝"token plain">= ><跨度类＝"token plain"><<跨度类＝"token maybe-class-name">MessageView<跨度类＝"token plain">关键<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">_id<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token plain">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token plain">/<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">返回<跨度类＝"token plain">（<跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“容器”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">h1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">列表<跨度类＝"token plain">的<跨度类＝"token plain">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">h1<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">｛<跨度类＝"token plain">messageViews<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝在上面的例子中，我替换了状态对象的useState反应钩子．顾名思义，这允许您管理组件的状态。
当你在做大型项目时，使用钩子可以帮助你避免所谓的道具钻井。支持钻看到您通过多个组件传递道具(最终不需要该数据)，只是为了到达一个深度嵌套的组件。
我们也可以转换MessageView组件到函数组件:
进口<跨度类＝"token plain">反应<跨度类＝"token plain">从<跨度类＝"token plain">“反应”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">进口<跨度类＝"token plain">proptype<跨度类＝"token plain">从<跨度类＝"token plain">“prop-types”<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">常量<跨度类＝"token plain">MessageView<跨度类＝"token plain">＝<跨度类＝"token plain">（<跨度类＝"token parameter punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token parameter">消息<跨度类＝"token parameter punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token plain">= ><跨度类＝"token plain">｛<跨度类＝"token plain">常量<跨度类＝"token plain">｛<跨度类＝"token plain">从<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">状态<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">内容<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token plain">＝<跨度类＝"token plain">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">返回<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">（<跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“消息”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“字段”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“标签”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">从<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“价值”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token keyword module" style="font-style:italic">从<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“字段”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“标签”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">状态<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“价值”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">状态<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">div类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">”字段内容”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“标签”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token maybe-class-name">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token plain">跨类名<跨度类＝"token operator" style="color:rgb(137, 221, 255)">＝<跨度类＝"token string" style="color:rgb(195, 232, 141)">“价值”<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token plain">内容<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token operator" style="color:rgb(137, 221, 255)"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">跨度<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain"><<跨度类＝"token operator" style="color:rgb(137, 221, 255)">/<跨度类＝"token plain">div<跨度类＝"token operator" style="color:rgb(137, 221, 255)">><跨度类＝"token plain">）<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">｝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；<跨度类＝"token plain">MessageView<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">proptype<跨度类＝"token plain">＝<跨度类＝"token plain">｛<跨度类＝"token plain">消息<跨度类＝"token operator" style="color:rgb(137, 221, 255)">：<跨度类＝"token plain">proptype<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">对象<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">．<跨度类＝"token property-access">isRequired<跨度类＝"token plain">｝<跨度类＝"token plain">出口<跨度类＝"token plain">默认的<跨度类＝"token plain">MessageView<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；注意我们现在是如何在组件中接收消息道具的:
常量<跨度类＝"token plain">MessageView<跨度类＝"token plain">＝<跨度类＝"token plain">（<跨度类＝"token parameter punctuation" style="color:rgb(199, 146, 234)">｛<跨度类＝"token parameter">消息<跨度类＝"token parameter punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">）<跨度类＝"token plain">= ><跨度类＝"token plain">｛<跨度类＝"token plain">.．.<跨度类＝"token plain">｝这利用了一种叫做对象解构，它允许您从数组或对象中提取单个项，并使用简写语法将它们放入变量中。
我们在这里使用相同的技术，从消息对象，避免给所有东西加上前缀消息：
常量<跨度类＝"token plain">｛<跨度类＝"token plain">从<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">状态<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">，<跨度类＝"token plain">内容<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">｝<跨度类＝"token plain">＝<跨度类＝"token plain">消息<跨度类＝"token punctuation" style="color:rgb(199, 146, 234)">；这就是全部!
在本指南中，我不想再深入讨论React钩子，只是让你意识到它们的存在，并且它们在React社区中越来越受欢迎。如果你想了解更多关于钩子的知识，请阅读我们的指南开始使用React Hooks．
演示
这里有一个现场演示，你可以玩:
从这里去哪里
我们现在已经到了这个介绍性指南的结尾。还有很多React的概念我还没有讲到，比如数据抓取、错误处理、路由、处理表单、调试。这样的例子不胜枚举……
好消息是我们有很多很棒的React内容必威西盟体育网页登录SitePoint溢价，以及我们的博客上有很多很棒的文章必威滚．我鼓励你去尝试并创造一些伟大的东西。
预览结束<跨度类＝"block text-sm md:inline-block">注册解锁剩余的标题。