使用 JSX 和 React 渲染的教程

使用 JSX 和 React 渲染的教程

如果你是 React 新手，你可能听说过 JSX 或 JavaScript XML — 它是元素和组件的类似 XML 的代码。在本文中，我们将看看 JSX 是什么以及为什么我们应该在 React 应用程序中使用它。我们还将了解什么是元素，以及如何将它们呈现到 DOM。

什么是 JSX？

如前所述，JSX 是一种类似 XML 的代码，我们可以在使用 React 进行编码时使用它。它由 Facebook 团队开发，旨在提供更简洁的语法，帮助简化开发人员体验。让我们看一下我们的第一个示例：

常量问候 =

你好世界！

;

很简单，对吧？

我们这里拥有的既不是字符串也不是 HTML。这是JSX！在构建 UI 元素时，我们可以使用它来利用 JavaScript 的全部功能。虽然它不是强制性的，但它肯定是一个非常有用的工具——当我们在 JavaScript 代码中使用 UI 时，它做得很好。

使用 JSX

让我们扩展上面的示例以包含一个嵌入式表达式：

const user = '理查德·伦伯特';
常量问候 =

你好，{用户}

; ReactDOM.render(
问候，
document.getElementById('root')
);

我们使用花括号 {} 将变量嵌入到我们的 JSX 表达式中。在这些花括号中，我们可以嵌入任何有效的 JavaScript 表达式。如 用户名 或者 打印名称（用户） 例如。

笔记 : 我们会在文章后面详细看渲染，暂时不要太在意上面的渲染方法！

让我们嵌入一个被调用的 JavaScript 函数的结果：

功能打印名称（用户）{
返回 user.firstName + ' ' + user.lastName;
} 常量用户 = {
名字：'理查德'，
姓氏：'记住'
}; 常量问候 = (


您好，{printName(user)}！


); ReactDOM.render(
问候，
document.getElementById('root')
);

引擎盖下的 JSX

那么，当我们渲染组件时，JSX 到底发生了什么？

功能问候（）{
返回

你好世界！


}

每个元素都由 问候 组件被分解成 React.createElement 来电。上面的例子变成：

功能问候（）{
return React.createElement("h1", {}, "Hello, World!")
}

React.createElement()

让我们看另一个例子：

常量问候 = (


你好世界！


);

编译后，此代码如下所示：

常量问候 = React.createElement(
'h1',
{className: 'speak'},
'你好世界！'
);

这两个代码块是相同的。本质上一个对象是这样创建的：

常量问候= {
类型：'h1'，
道具： {
className: '说话',
孩子们：“你好，世界！”
}
};

这个对象被称为 React 元素，它的功能很像你在屏幕上看到的描述。 React 使用这些对象来构建 DOM 并使其保持最新。

本质上，JSX 只是在制作 React.createElement(component, props, …children) 功能更加赏心悦目。另一个例子：


菜单栏

将转换为：

React.createElement（导航栏，{
背景颜色：“紫色”，
不透明度：0.8
}， “菜单栏”）;

现在让我们继续看看更多的概念。

JSX 中的道具

我们将在下一篇文章中深入探讨道具！现在，最好记住在构建组件时——它们通常会渲染子组件，这需要数据才能正确渲染。我们传入的参数就是我们所说的props。在 JSX 中，有几种方法可以做到这一点，例如：

// 如果没有传递值，则默认为“true”

// 作为 props 传递的字符串字面量

// 表达式（下面的示例将评估为 10）
<MyComponent total = {1 + 2 + 3 + 4} />
// 传播属性：传递整个 props 对象

笔记： 如果 陈述和 为了 循环不是表达式 JavaScript ，所以它们不能直接在 JSX 中使用！相反，您可以这样编码：

函数编号类型（道具）{
让回答;
if (props.number % 2 == 0) {
答案 =偶数；
} 别的 {
答案=奇数；
}
返回

{props.number} 是一个 {answer} 数字
;
}

我们可以看到我们的 props 被传递到条件中，被评估，然后返回——所有这些都是通过 JSX 完成的。

JSX 中的孩子

随着您的应用程序变得越来越大，您会发现一些组件需要渲染子级。然后这些子组件还需要渲染更多的子组件，依此类推！使用 JSX，我们可以很好地管理这些树状的元素结构。经验法则是——组件返回的任何元素都会成为它的子元素。

让我们快速看一下使用 JSX 渲染子元素的方法：

字符串文字

我是个孩子！

在这个非常基本的示例中，字符串 我是个孩子 是的孩子 我的组件 并且可以通过 道具.儿童 的 我的组件 .

JSX 元素作为子元素

假设我们要返回一个 HTML 孩子 <header> ，它有两个自己的孩子： <Nav /> 和 <SearchBox /> .我们可以这样做：

功能标题（道具）{
返回 （



)
}

表达式

我们还可以将表达式作为子项传递，以渲染到我们的 UI。这对于待办事项列表应用程序非常有用，例如：

功能待办事项（道具）{
返回

  • {道具.内容}
    • ;
    } 功能 TodoList() {
    const todos = ['vacuum', '洗衣服', '找一个新客户'];
    返回 （

      {todos.map((内容) => )}

    );
    }

    功能

    函数在处理重复时很有用，例如渲染重复的 UI 元素。我们可以创建 React 会自动为我们渲染的结构。

    让我们看一个例子，我们使用 。地图（） 在网站上创建新页面的功能：

    // 当前页面数组
    常量页 = [
    {
    编号：1，
    文本：“家”，
    关联： ”/”
    },
    {
    编号：2，
    文字：“关于”，
    链接：“/关于”
    },
    {
    编号：3，
    text: "联系方式",
    链接：“/联系人”
    }
    ];
    // 渲染一个

      这会产生
    • 孩子们
      功能导航（）{
      返回 （

      );
      }

      要向我们的网站添加一个新页面，我们只需要向页面的数组中添加一个新对象，然后让 React 处理其余部分。

      渲染元素

      正如我确信您在本文中看到的那样，在使用 JSX 时，我们正在使用元素来渲染到我们的页面中。一个 元素 描述您在屏幕上看到的内容：

      常量元素 =

      你好！

      ;

      像这样的多个元素在组合时将形成组件。我们将在下一篇文章中详细介绍组件。

      将我们的元素渲染到 DOM

      通常，我们会有一个 <div> 像这样，在我们的 HTML 中：

      这就是我们的 DOM 节点。它里面的一切都由 React DOM 处理。

      为了将 React 元素渲染到我们的根节点，我们将两者都传递给 ReactDOM.render() ，像这样：

      常量元素 =

      你好！

      ;
      ReactDOM.render(element, document.getElementById('root'));

      你好！ 将呈现到我们的页面。

      更新渲染元素

      请注意，React 元素是不可变的！创建元素后，您无法更改其子元素或属性。如果希望更新 UI，您需要创建一个新元素并将其传递给 ReactDOM.render() .

      概括

      我们去吧！我们已经介绍了 JSX 和渲染的基础知识。我希望你开始看到这些概念对我们作为开发人员、构建 React 应用程序有多么有用。

      通过利用 JSX 的力量在 JavaScript 中传递元素，我们正在构建非常可行的代码。 JSX 的结构与 React 配合得非常好，尽管 JSX 不是强制性的，但它带来了奇妙的开发体验。

      结论

      如果你喜欢这篇博文，请关注我 推特 我每天都会在这里发布有关技术相关的事情！

      让我们联系

      最初发表于 https://dev.to 2022 年 9 月 6 日。

      版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

      本文链接：https://www.qanswer.top/22014/08540708

    posted @ 2022-09-07 08:10  哈哈哈来了啊啊啊  阅读(217)  评论(0)    收藏  举报