使用 JSX 和 React 渲染的教程
作者：互联网
使用 JSX 和 React 渲染的教程
如果你是 React 新手，你可能听说过 JSX 或 JavaScript XML — 它是元素和组件的类似 XML 的代码。在本文中，我们将看看 JSX 是什么以及为什么我们应该在 React 应用程序中使用它。我们还将了解什么是元素，以及如何将它们呈现到 DOM。
什么是 JSX？
如前所述，JSX 是一种类似 XML 的代码，我们可以在使用 React 进行编码时使用它。它由 Facebook 团队开发，旨在提供更简洁的语法，帮助简化开发人员体验。让我们看一下我们的第一个示例：
常量问候 =<h1>你好世界！</h1> ;
很简单，对吧？
我们这里拥有的既不是字符串也不是 HTML。这是JSX！在构建 UI 元素时，我们可以使用它来利用 JavaScript 的全部功能。虽然它不是强制性的，但它肯定是一个非常有用的工具——当我们在 JavaScript 代码中使用 UI 时，它做得很好。
使用 JSX
让我们扩展上面的示例以包含一个嵌入式表达式：
const user = '理查德·伦伯特';
常量问候 =<h1>你好，{用户}</h1> ; ReactDOM.render(
问候，
document.getElementById('root')
);
我们使用花括号 {} 将变量嵌入到我们的 JSX 表达式中。在这些花括号中，我们可以嵌入任何有效的 JavaScript 表达式。如 用户名 或者 打印名称（用户） 例如。
笔记 : 我们会在文章后面详细看渲染，暂时不要太在意上面的渲染方法！
让我们嵌入一个被调用的 JavaScript 函数的结果：
功能打印名称（用户）{
返回 user.firstName + ' ' + user.lastName;
} 常量用户 = {
名字：'理查德'，
姓氏：'记住'
}; 常量问候 = (
<h1>
您好，{printName(user)}！
</h1>
); ReactDOM.render(
问候，
document.getElementById('root')
);
引擎盖下的 JSX
那么，当我们渲染组件时，JSX 到底发生了什么？
功能问候（）{
返回<h1>你好世界！</h1>
}
每个元素都由 问候 组件被分解成 React.createElement 来电。上面的例子变成：
功能问候（）{
return React.createElement("h1", {}, "Hello, World!")
}
React.createElement()
让我们看另一个例子：
常量问候 = (
<h1 className="speak">
你好世界！
</h1>
);
编译后，此代码如下所示：
常量问候 = React.createElement(
'h1',
{className: 'speak'},
'你好世界！'
);
这两个代码块是相同的。本质上一个对象是这样创建的：
常量问候= {
类型：'h1'，
道具： {
className: '说话',
孩子们：“你好，世界！”
}
};
这个对象被称为 React 元素，它的功能很像你在屏幕上看到的描述。 React 使用这些对象来构建 DOM 并使其保持最新。
本质上，JSX 只是在制作 React.createElement(component, props, …children) 功能更加赏心悦目。另一个例子：
<Navbar backgroundColor = "purple" opacity = {0.8}>
菜单栏
</Navbar>
将转换为：
React.createElement（导航栏，{
背景颜色：“紫色”，
不透明度：0.8
}， “菜单栏”）;
现在让我们继续看看更多的概念。
JSX 中的道具
我们将在下一篇文章中深入探讨道具！现在，最好记住在构建组件时——它们通常会渲染子组件，这需要数据才能正确渲染。我们传入的参数就是我们所说的props。在 JSX 中，有几种方法可以做到这一点，例如：
// 如果没有传递值，则默认为“true”
<MyComponent connected />
// 作为 props 传递的字符串字面量
<MyComponent user= "Bob Burger" />
// 表达式（下面的示例将评估为 10）
<MyComponent total = {1 + 2 + 3 + 4} />
// 传播属性：传递整个 props 对象
<MyComponent selected = {...this.state} />
笔记： 如果 陈述和 为了 循环不是表达式 JavaScript ，所以它们不能直接在 JSX 中使用！相反，您可以这样编码：
函数编号类型（道具）{
让回答;
if (props.number % 2 == 0) {
答案 =<strong>偶数</strong>；
} 别的 {
答案=<i>奇数</i>；
}
返回<div>{props.number} 是一个 {answer} 数字</div>;
}
我们可以看到我们的 props 被传递到条件中，被评估，然后返回——所有这些都是通过 JSX 完成的。
JSX 中的孩子
随着您的应用程序变得越来越大，您会发现一些组件需要渲染子级。然后这些子组件还需要渲染更多的子组件，依此类推！使用 JSX，我们可以很好地管理这些树状的元素结构。经验法则是——组件返回的任何元素都会成为它的子元素。
让我们快速看一下使用 JSX 渲染子元素的方法：
字符串文字
<MyComponent>我是个孩子！</MyComponent>
在这个非常基本的示例中，字符串 我是个孩子 是的孩子 我的组件 并且可以通过 道具.儿童 的 我的组件 .
JSX 元素作为子元素
假设我们要返回一个 HTML 孩子 <header> ，它有两个自己的孩子： <Nav /> 和 <SearchBox /> .我们可以这样做：
功能标题（道具）{
返回 （
<header>
<Nav />
<SearchBox />
</header>
)
}
表达式
我们还可以将表达式作为子项传递，以渲染到我们的 UI。这对于待办事项列表应用程序非常有用，例如：
功能待办事项（道具）{
返回<li>{道具.内容}</li> ;
} 功能 TodoList() {
const todos = ['vacuum', '洗衣服', '找一个新客户'];
返回 （
<ul>
{todos.map((内容) =><TodoItem key={content} content={content} /> )}
</ul>
);
}
功能
函数在处理重复时很有用，例如渲染重复的 UI 元素。我们可以创建 React 会自动为我们渲染的结构。
让我们看一个例子，我们使用 。地图（） 在网站上创建新页面的功能：
// 当前页面数组
常量页 = [
{
编号：1，
文本：“家”，
关联： ”/”
},
{
编号：2，
文字：“关于”，
链接：“/关于”
},
{
编号：3，
text: "联系方式",
链接：“/联系人”
}
];
// 渲染一个<ul>这会产生<li>孩子们
功能导航（）{
返回 （
<ul>
{pages.map(page => {
返回 （
<li key={page.id}>
<a href={page.link}>{page.text}</a>
</li>
);
})}
</ul>
);
}
要向我们的网站添加一个新页面，我们只需要向页面的数组中添加一个新对象，然后让 React 处理其余部分。
渲染元素
正如我确信您在本文中看到的那样，在使用 JSX 时，我们正在使用元素来渲染到我们的页面中。一个 元素 描述您在屏幕上看到的内容：
常量元素 =<h1>你好！</h1> ;
像这样的多个元素在组合时将形成组件。我们将在下一篇文章中详细介绍组件。
将我们的元素渲染到 DOM
通常，我们会有一个 <div> 像这样，在我们的 HTML 中：
<div id="root"></div>
这就是我们的 DOM 节点。它里面的一切都由 React DOM 处理。
为了将 React 元素渲染到我们的根节点，我们将两者都传递给 ReactDOM.render() ，像这样：
常量元素 =<h1>你好！</h1> ;
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
标签：教程,渲染,元素,React,组件,JSX,我们 来源： https://www.cnblogs.com/amboke/p/16663979.html