Introducing JSX（翻译）

hikui 发布于2019-08-20 18:56 / 879人阅读

摘要：原文翻译并不准确，还是看原文好。它称之为它是的一种语法扩展。例如，以及等都是合法表达式。任何值在渲染之前都会转换为字符串。这就避免了攻击。读取这些对象，然后使用它们去构造元素，并且保持更新。

开始学习React从过一遍官网资料开始。

introducting JSX原文翻译并不准确，还是看原文好。

JSX介绍

看下面的代码

const element = Hello,world

这个有趣的连接语法既不是字符串也不是HTML。
它称之为JSX,它是JavaScript的一种语法扩展。我们推荐在React中使用它去编写UI界面的样子。JSX可能会使你想起模板语言，但是它带来的是全套的JavaScript功能。

JSX生产React「元素」。在下一节我们将探索渲染React元素到DOM的过程。从下面的例子你能够学到JSX的基础知识。

表达式嵌套在JSX中

你可以将JavaScript表达式通过花括号嵌套在JSX中使用。
例如，2+2 user.firstName,以及formatName(user)等都是合法表达式。

function formatName(user) {
  return user.firstName + " " + user.lastName;
}

const user = {
  firstName: "Harper",
  lastName: "Perez"
};

const element = (
  
    Hello, {formatName(user)}!
  
);

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

当我们书写多行JSX代码时候，为了良好的可读性，虽不是必须，但还是推荐使用括号包裹避免产生JavaScript分号自动插入的问题。

JSX也是一种表达式

通过编译之后，JSX表达式会编译成为一个普通的JavaScript对象。
这就意味着，你可以在if声明以及for循环中使用JSX，可以将它赋值给变量，将它作为函数参数或者返回值使用。

function getGreeting(user) {
  if (user) {
    return Hello, {formatName(user)}!;
  }
  return Hello, Stranger.;
}

在JSX中定义属性

你可以使用引号标注字符串作为属性值；

const element = 
;

你也可以用在花括号中写JavaScript表达式作为属性值；

const element = 关闭标签，就像XML
const element = ;
JSX标签包含子元素
const element = (
  
    Hello!
    Good to see you here.
  
);
警告：JSX语法相比HTML更接近JavaScript，React DOM使用`camelCase`(驼峰命名)属性命名规定代替HTML属性名。
例如：`class`在JSX中是`className`，`tabindex`是`tabIndex`。

JSX可以防止注入攻击（XSS）
通过JSX传入数据会更安全
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = {title}
;
默认情况，React DOM在渲染JSX之前会排除嵌入的输入值，因此确保在你的应用中不会注入任何不明确的书面值。任何值在渲染之前都会转换为字符串。这就避免了XSS攻击。
JSX表现为对象
Babel通过调用React.createElement()来编译JSX
下面两段代码是相同的
const element = (
  
    Hello, world!
  
);
const element = React.createElement(
  "h1",
  {className: "greeting"},
  "Hello, world!"
);
React.createElement()展现了一些检查项来帮助你减少代码bug，但是本质上老说它创建了这样的对象
// Note: this structure is simplified
const element = {
  type: "h1",
  props: {
    className: "greeting",
    children: "Hello, world"
  }
};
这些对象称之为「React元素」.你可以把他们当做你想在界面上看到一种描述。React读取这些对象，然后使用它们去构造DOM元素，并且保持更新。

GPU云服务器云服务器 Introducing jsx jsx 条件 jsx cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84901.html

Flux再进化：Introducing Relay and GraphQL译

摘要：它的设计使得即使是大型团队也能以高度隔离的方式应对功能变更。获取数据数据变更性能，都是让人头痛的问题。通过维护组件与数据间的依赖在依赖的数据就绪前组件不会被渲染为开发者提供更加可预测的开发环境。这杜绝了隐式的数据依赖导致的潜在。关于Relay与GraphQL的介绍原文：Introducing Relay and GraphQL 视频地址（强烈建议观看）：https://www.y...

cncoder 2019-08-21 10:26 评论0 收藏0
react文档 Hello World

摘要：最小的示例如下它会显示一个的标题在页面上。指南的指南在这个指南中，我们将会检验的建筑模块和元素和组件。这是循序渐进的指南关于原则的第一章。它可能会花半小时到一个小时，但是好处是你不会感觉同时在学习和。注意此指南偶尔在示例中采用新的语法。 Hello World 最小的 React 示例如下： ReactDOM.render( Hello, world!, documen...

xuhong 2019-08-23 10:39 评论0 收藏0
React文档翻译系列（三）JSX简介

摘要：文档翻译系列三简介先来看一下下面的变量声明这种有趣的标签语法既不是字符串也不是。这种形式被称作，他是的一种扩展语法。为便于阅读，我们将分隔成多行。表示对象将编译成调用。我们建议您为选择的编辑器搜索语法方案，以便和代码都能够被正确高亮的显示。 React文档翻译系列（三）JSX简介先来看一下下面的变量声明： const element = Hello world! 这种有趣的标签语法既...

wean 2019-08-20 15:28 评论0 收藏0
# 翻译：Shadow DOM隔离释义

摘要：使用的一个主要好处是样式隔离。假设我们仍然使用来挂接这个，如下所示请注意，元素位于模板元素内部，并与一起克隆到内。这允许在阴影根中定义的样式规则作用域。封闭模式的设计目标是禁止对来自外部世界的中的节点进行任何访问。使用shadow DOM的一个主要好处是样式隔离。要了解这意味着什么，让我们来假设我们要创建自定义进度条组件。我们可以使用两个嵌套的DIV来显示条形，使用另一个DIV来...

xi4oh4o 2019-08-23 13:53 评论0 收藏0
【全栈React】第2天: 什么是 JSX?

摘要：代表基本上是常规。第次更新，在年完成。几乎完全支持所有主要的浏览器。但这将是一段时间，直到较旧版本的浏览器逐步停止使用。这意味着将转换为。在组件的情况下，写入的将如下所示在我们在第一个作出反应组件使用的语法是语法。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3797原文：https://www.fullstackreact....

Eirunye 2019-08-20 18:29 评论0 收藏0