为什么应该使用React组件而不是HTML

作者:里德·巴格(Reed Barger)

HTML是Web的语言,但是仅使用HTML创建整个网站可能是重复性的且难以管理。

在本文中,我们将了解如何使用JavaScript库React作为一种为我们的网站增加便利性和可重用性的方法。

对于任何了解HTML并希望更快地构建更具组织性和动态性的网站的开发人员而言,React是一个强大的工具。

让我们开始吧!

为什么我应该使用React而不是HTML?

React于2013年问世,它是使用JavaScript构建Web应用程序的更好方法。它通常被称为用于构建UI的库,是“用户界面”的缩写。

使React之所以成为理想的学习型库的原因是它不能替代HTML。

通过让您使用与HTML非常相似的语法来构建接口并使用JavaScript为其添加动态功能,它充分利用了HTML作为最流行的编程语言的受欢迎程度和优势。

如何使用HTML构建用户界面

鉴于React的多功能性,我们可以重新创建我们在Web上看到的任何站点或用户界面。

在本课程中,让我们重新制作您可能每天使用的应用程序的一部分-Google搜索。

为什么应该使用React组件而不是HTML

如果您是React的新手,这可能看起来很雄心勃勃,但是它只需要了解两个简单的概念:HTML和基本的JavaScript函数。

在不了解React甚至JavaScript的情况下构建用户界面的方法是什么?

通过将HTML元素用作简单HTML文档的一部分。

这是我们显示在Google中搜索“ reactjs”时出现的前三个结果的方式。

<!DOCTYPE html>
<html>
  <head>
    <title>reactjs Search Results</title>
  </head>

  <body>
    <section>
      <div>
        <a href="https://reactjs.org"
          >React - A JavaScript Library for Building User Interfaces</a
        >
        <div>
          <h3>reactjs.org</h3>
        </div>
        <div>
          React makes it painless to create interactive UIs.
        </div>
      </div>
      <div>
        <a href="https://en.wikipedia.org/wiki/React_(web_framework)"
          >React (web framework) - Wikipedia</a
        >
        <div>
          <h3>https://en.wikipedia.org › wiki › React_(web_framework)</h3>
        </div>
        <div>
          React is a JavaScript library for building user interfaces.
        </div>
      </div>
      <div>
        <a href="https://twitter.com/reactjs?lang=en"
          >React (@reactjs) | Twitter</a
        >
        <div>
          <h3>https://twitter.com › reactjs</h3>
        </div>
        <div>
          The latest Tweets from React (@reactjs).
        </div>
      </div>
    </section>
  </body>
</html>

如果只需要显示一些链接,则单独使用静态HTML会很好。

但是,如何像搜索引擎可能需要的那样,用不同的数据来显示100或1000的链接,而这些链接都具有不同的数据呢?

有什么更好的方法,那就是更简单,更可扩展的编写方式?

单独的HTML并不能解决问题。我们需要一种使网站更具动态性的方式,以显示所需数量的链接。

在向网站添加行为时,我们需要JavaScript。由于我们的目标是使用JavaScript构建出色的应用程序,因此我们知道要使用React。

如何将任何HTML网站升级到React应用

让我们将静态HTML转换为动态React应用。

听起来很难?它比您想象的要简单。

我们可以从单个HTML文档构建一个React应用。我们要做的就是将React引入以下外部脚本中。*

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

第一个用于构建我们的React应用,第二个用于在浏览器中显示或渲染React应用。

第一个是React,第二个是ReactDOM

第三个脚本是引入一个称为Babel的工具。我们将稍等一下。

此时,我们的代码如下所示:

<!DOCTYPE html>
<html>
  <head>
    <title>reactjs Search Results</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <!-- our script must have type="text/babel" for Babel to work -->
    <script type="text/babel">
      // React code will go here
    </script>
  </body>
</html>

…这几乎是一个React应用程序。

注意,我们有一个脚本,可以编写我们的React代码,但是没有HTML。

让我们解决这个问题。

如何创建和渲染我们的React应用

每个React应用程序都必须具有所谓的入口点。

入口点是我们插入我们的应用程序做出反应到页面的HTML元素。

传统的入口点是ID为root(<div id="root"></div>)的div 。

我们将添加它,然后使用render()ReactDOM中的函数来完成渲染应用程序的工作。

第一个是应用程序本身,这意味着我们之前的HTML,第二个必须引用我们的入口点。我们可以说来创建参考document.getElementById('root')

现在,我们有了运行React应用程序所需的一切:

<!DOCTYPE html>
<html>
<head>
<title>reactjs Search Results</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root">
</div>
<!-- our script must have type="text/babel" for Babel to work -->
<script type="text/babel">
ReactDOM.render(
<section>
<div>
<a href="https://reactjs.org"
>React - A JavaScript Library for Building User Interfaces</a
>
<div>
<h3>reactjs.org</h3>
</div>
<div>
React makes it painless to create interactive UIs.
</div>
</div>
<div>
<a href="https://en.wikipedia.org/wiki/React_(web_framework)">React (web framework) - Wikipedia</a>
<div>
<h3>https://en.wikipedia.org › wiki › React_(web_framework)</h3>
</div>
<div>
React is a JavaScript library for building user interfaces.
</div>
</div>
<div>
<a href="https://twitter.com/reactjs?lang=en">React (@reactjs) | Twitter</a>
<div>
<h3>https://twitter.com › reactjs</h3>
</div>
<div>
The latest Tweets from React (@reactjs).
</div>
</div>
</section>, document.getElementById('root'))
</script>
</body>
</html>

如果我们看一下结果,它会像以前一样工作。完美的!

为什么应该使用React组件而不是HTML

现在让我们使用React通过动态显示我们的链接来改善我们的网站。

如何使HTML可与React组件一起重用

如果我们检查HTML结构,则每个链接都包含相同的部分。每个都有一个URL,一个标题,一个较短的URL和一个摘录。对于每个链接,我们必须一次又一次地重复相同的HTML元素。

在编程中,如果您不得不重复很多次,则很可能表明您的代码可以以某种方式简化和缩短。作为程序员,我们始终努力使自己重复的次数越少越好。

我们尝试编写“不重复”的DRY代码。

React的核心是JavaScript以及一些可帮助我们构建应用程序的功能。

既然我们正在使用JavaScript,那么什么是JavaScript功能可以使我们创建或输出所需次数的东西?

一个功能。

让我们在此处创建一个,我们将其称为“链接”。

function Link() {
// create link HTML output
}

原因是我们希望此函数在每次调用它时都返回或输出链接的HTML。

为此,让我们返回第一个链接的HTML:

function Link() {
return (
<div>
<a href="https://reactjs.org">
React - A JavaScript Library for Building User Interfaces
</a>
<div>
<h3>reactjs.org</h3>
</div>
<div>React makes it painless to create interactive UIs.</div>
</div>
);
}

因此,现在让我们使用它来显示它返回的每个链接。

为此Link(),我们可以像在HTML元素中那样编写它,而不是像在React中那样调用它<Link />

如果您是第一次看到它,它可能会使您的大脑有些弯曲。

在这里,我们使用HTML语法,但是我们在调用JavaScript函数!您会逐渐熟悉它,这会让您感到很舒服。

(此外,您是否注意到我们不必像普通的HTML元素那样使用开始和结束标记?请稍后再讨论。)

React如何将看起来像HTML的语法转换成JavaScript?

它是在名为Babel的特殊工具(我们添加的第三个脚本)的帮助下完成的。您可以在此处查看其工作原理:

巴别gif

发生了什么?

Babel是一种称为编译器的JavaScript工具,它会将类似于HTML的代码转换(“编译”)为有效的JavaScript。

这种类似HTML的语法是什么?JSX

该HTML实际上是JavaScript,称为JSX,它表示“ JavaScript XML”。

如果您不熟悉XML,则它是编写HTML的一种较为严格的方法。

更严格意味着我们需要为带有一个标签的元素使用一个正斜杠。例如:<input>在HTML中,有效的JSX是<input />

重申一下,JSX不是有效的JavaScript代码。

意思是,您无法将JSX放在浏览器中并期望它能正常工作。我们需要像Babel这样的编译器将其转换为有效的JavaScript,然后需要React才能使用创建的JavaScript。

因此,现在使用我们的自定义Link元素,我们删除所有三个链接的HTML,并用三个Link替换它们,如下所示:

<!DOCTYPE html>
<html>
<head>
<title>reactjs Search Results</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<section>
<Link />
<Link />
<Link />
</section>,
document.getElementById("root")
);
</script>
</body>
</html>

如果我们看一下结果,我们确实有三个链接。

这就是React的力量:它具有JavaScript函数的可重用性,但允许我们像使用HTML一样使用它们。

我们将使用JavaScript制作的这些自定义元素称为组件

因此,通过使用组件,我们在这里获得了很大的可读性。如果我们对组件进行了很好的命名,那么我们对所要查找的内容不会感到困惑。无需阅读大量HTML元素即可查看应用程序显示的内容。

我们立即看到我们有三个自定义链接。

功能组件的剖析

现在我们知道了组件的工作方式,让我们再来看一下Link函数组件:

我们的代码可能看起来很简单,但是在这里您需要注意一些细微的事情:

function Link() {
return (
<div>
<a href="https://reactjs.org">
React - A JavaScript Library for Building User Interfaces
</a>
<div>
<h3>reactjs.org</h3>
</div>
<div>React makes it painless to create interactive UIs.</div>
</div>
);
}

功能组件名称大写:链接而不是链接。这是React组件的必需命名约定。我们使用大写的名称来区分正常功能的组成部分。请注意,返回JSX的函数与普通的JavaScript函数不同。

请注意,我们返回的JSX周围有一组括号。在您首次编写React代码时,很容易忘记这些括号,这将导致错误。如果JSX跨越多行,请用括号将其括起来。

最后,我们的Link函数返回一些JSX。每个React组件必须返回JSX元素或其他React组件。是的,React组件可以返回其他组件。

因此,由于React组件可以返回其他React组件,因此我们可以制作一个App组件。

此应用程序组件将包含我们的整个组件集或树形组件,并显示应用程序的组成。

借助App组件,这使得我们的render方法更易于阅读:

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Link() {
return (
<div>
<a href="https://reactjs.org">
React - A JavaScript Library for Building User Interfaces
</a>
<div>
<h3>reactjs.org</h3>
</div>
<div>React makes it painless to create interactive UIs.</div>
</div>
);
}
function App() {
return (
<section>
<Link />
<Link />
<Link />
</section>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>

从这段代码中我们可以看到React组件具有类似于HTML元素的层次结构或顺序。结果,我们可以将组件树的不同部分称为父母孩子

在这种情况下,例如,对于每个渲染的Link组件,App是父级。到App时,所有三个链接都是其子级。

请注意,无论何时渲染或返回JSX,都只能有一个父组件。但是父组件可以根据需要具有任意数量的子组件(以及元素)。

当我们查看代码的输出时,您可能已经注意到以下问题:

我们有三个相同链接的实例!那是因为我们为创建的每个链接使用相同的数据。但是我们知道每个链接都有不同的数据-不同的标题,URL,短URL和摘录。

那么,我们如何将唯一的数据传递给我们的组件呢?

如何将动态数据传递到组件:道具

如果我们想将一些标题文本传递给普通的JavaScript函数,我们将这样做:

Link("Our link title here");

但是,我们如何将数据传递给功能组件呢?

普通的HTML元素接受属性形式的数据。但是与HTML属性不同,React组件无法识别属性。数据不会停留在组件本身上。他们去哪里?

作为函数组件的参数。同样,这是我们熟悉的东西,因为我们了解函数的基础知识。

我们知道函数使用来输出数据return并接受带参数的数据。

如果我们有一个HTML元素,比如说一个具有“ title”属性的div,则此代码将无效。HTML的任何元素都没有标题属性:

<div title="Our link title here"></div>

但是,如果我们在链接组件上创建了该标题“属性”:

<link title="Our link title here" />

这是有效的。并且由于我们在组件上像属性一样写了标题,所以将其作为名为“ title”的参数传递给Link函数。

在代码中,我们可以这样认为:

const linkData = { title: "Our link title here" };
Link(linkData);

请注意,linkData参数是一个对象。

React收集并组织作为单个对象传递给给定组件的数据。

传递到组件的数据的名称(例如title)是props

所有prop值都存在于props对象上的功能组件内部。

并且由于我们的目标是在Link组件中使用标题属性,因此我们可以编写以下内容:

function Link(props) {
return <a>{props.title}</a>;
}

我们使用花括号{}语法从所需的props.title中插入标题prop。同样,适用于传递到组件的任何其他道具。

这些花括号使我们可以在需要的地方插入或插入动态值。

现在,我们拥有修复链接所需的一切。对于每个Link组件,我们需要将其标题,URL,短URL和摘录作为单独的道具传递下来:

<!DOCTYPE html>
<html>
<head>
<title>reactjs Search Results</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Link(props) {
return (
<div>
<a href={props.url}>{props.title}</a>
<div>
<h3>{props.shortUrl}</h3>
</div>
<div>{props.excerpt}</div>
</div>
);
}
function App() {
return (
<section>
<Link
title="React - A JavaScript Library for Building User Interfaces"
url="https://reactjs.org"
// props consisting of two or more words must be written in camelcase
shortUrl="reactjs.org"
excerpt="React makes it painless to create interactive UIs."
/>
<Link
title="React (web framework) - Wikipedia"
url="https://en.wikipedia.org/wiki/React_(web_framework)"
shortUrl="en.wikipedia.org › wiki › React_(web_framework)"
excerpt="React is a JavaScript library for building user interfaces."
/>
<Link
title="React (@reactjs) | Twitter"
url="https://twitter.com/reactjs"
shortUrl="twitter.com › reactjs"
excerpt="The latest Tweets from React (@reactjs)."
/>
</section>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>

看我们的输出,我们仍然得到相同的结果。

但是这里有些折衷。通过道具,我们能够使Link组件更具可读性。

现在,我们可以根据提供的任何(有效)道具数据制作任何链接。

但是现在您可以看到,通过在每个Link上立即提供prop值,我们的App组件变得更大了。

难道我们没有办法将所有这些数据移到其他地方吗?

如何从界面分离数据

让我们将数据移出组件树,并将其放置在更方便的位置,但仍根据需要使用数据。

为此,我们将使用链接数据创建一个对象数组,以通过props向下传递给Link组件。

这使我们甚至可以将数据放置在另一个JavaScript文件中。好处是它不再使我们的组件混乱。

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const linkData = [
{
title: "React - A JavaScript Library for Building User Interfaces",
url: "https://reactjs.org",
shortUrl: "reactjs.org",
excerpt: "React makes it painless to create interactive UIs."
},
{
title: "React (web framework) - Wikipedia",
url: "https://en.wikipedia.org/wiki/React_(web_framework)",
shortUrl: "en.wikipedia.org › wiki › React_(web_framework)",
excerpt: "React is a JavaScript library for building user interfaces."
},
{
title: "React (@reactjs) | Twitter",
url: "https://twitter.com/reactjs",
shortUrl: "twitter.com › reactjs",
excerpt: "The latest Tweets from React (@reactjs)."
}
];
function Link(props) {
return (
<div>
<a href={props.url}>{props.title}</a>
<div>
<h3>{props.shortUrl}</h3>
</div>
<div>{props.excerpt}</div>
</div>
);
}
function App() {
return (
<section>
<Link title="" url="" shortUrl="" excerpt="" />
<Link title="" url="" shortUrl="" excerpt="" />
<Link title="" url="" shortUrl="" excerpt="" />
</section>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>

现在,我们如何使用linkData数组显示每个Link及其数据?

如果您以前使用过数组,则要获取每个元素,我们需要在数组上循环或迭代。在这里,对于每个循环,我们都可以将props数据再次传递到Link组件。

这种模式在React中很常见。如此之多,以至于有一种特殊的数组方法可用于执行此迭代,称为.map()。它与常规JavaScript中的map方法不同,它仅用于JSX和组件。

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const linkData = [
{
title: "React - A JavaScript Library for Building User Interfaces",
url: "https://reactjs.org",
shortUrl: "reactjs.org",
excerpt: "React makes it painless to create interactive UIs."
},
{
title: "React (web framework) - Wikipedia",
url: "https://en.wikipedia.org/wiki/React_(web_framework)",
shortUrl: "en.wikipedia.org › wiki › React_(web_framework)",
excerpt: "React is a JavaScript library for building user interfaces."
},
{
title: "React (@reactjs) | Twitter",
url: "https://twitter.com/reactjs",
shortUrl: "twitter.com › reactjs",
excerpt: "The latest Tweets from React (@reactjs)."
}
];
function Link(props) {
return (
<div>
<a href={props.url}>{props.title}</a>
<div>
<h3>{props.shortUrl}</h3>
</div>
<div>{props.excerpt}</div>
</div>
);
}
function App() {
return (
<section>
{linkData.map(function(link) {
return (
<Link
key={link.url}
title={link.title}
url={link.url}
shortUrl={link.shortUrl}
excerpt={link.excerpt}
/>
);
})}
</section>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>

通过将数据移出UI并使用.map()显示每个链接,我们有了一个更简单的React应用程序,可以接受我们选择的尽可能多的链接。

最后,请注意在我们的代码中,我们在linkData上进行映射的位置,整个表达式被花括号包围。请注意,JSX允许我们在花括号之间插入任何有效的JavaScript表达式。

如何以“反应”方式构建应用

涵盖这些各种模式的目的是什么?

不仅涵盖JSX的基础知识以及React如何结合HTML和JavaScript,还向您展示React开发人员的想法。

您如何看待像React开发人员一样?通过了解如何将UI分解为可重用的组件。

当React开发人员计划他们想要制作的应用程序时,他们首先要确定该应用程序的所有各个部分,然后查看可以将哪些部分制成可重用的组件。

我们通过查看每个部分是否具有相同的视觉(HTML)结构并接受相同或非常相似的数据集(通过props)来做到这一点。

现在,我们来重新了解一下我们希望在开始时重新创建的开始UI。

如果我们像一个React开发人员那样看待它,它可能看起来像这样:

使用组件得越好,您就越容易轻松地构建自己的网站和应用程序。

点击阅读原文

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/5050.html

发表评论

登录后才能评论