React文档翻译系列（三）JSX简介

2019年8月31日 166次阅读 来源: 李小疯子

React文档翻译系列（三）JSX简介

先来看一下下面的变量声明：

const element = <h1>Hello world!</h1>

这类风趣的标签语法既不是字符串也不是HTML。

这类情势被称作JSX，他是Javascript的一种扩大语法。我们引荐在React中运用这类情势来形貌UI该是什么模样的。JSX能够会让你想起某种模板言语，然则它具有Javascript的悉数功用。

JSX会生产出React“元素”。我们将在下一部份来探究怎样将它衬着到DOM上。接下来，您能够找到JSX的基础知识，以协助您开始运用。

JSX中嵌入表达式

您能够在JSX中，经由过程一对大括号嵌入任何的Javascript表达式。

比方2+2,user.firstName,和formatName(user)，这些都是可用的表达式。

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

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

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

在CodePen中尝试。

为便于浏览，我们将JSX分隔成多行。我们引荐运用括号将JSX包裹起来，只管这不是必需的，因为如许能够防备分号自动插进去的圈套。

JSX也是一种表达式

编译以后，JSX表达式就变成了通例的Javascript对象。

这意味着你能够在if语句或许是for轮回中运用JSX，用它给变量赋值，当作参数吸收它，或许作为函数的返回值。

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

用JSX指定属性

您能够运用引号来指定字符串作为属性：

const element = <div tabIndex="0"></div>;

您也能够在一个属性中经由过程花括号嵌入一个Javascript表达式：

const element = <img src={user.avatarUrl}></img>;

在属性中嵌入Javascript表达式的时刻不要运用引号来包裹花括号。不然JSX会将属性当作一个字符串而不是表达式。在同一个属性中，您能够挑选运用引号（字符串的值）或许是花括号（表达式），然则不能同时运用。

运用JSX指定子元素

假如标签是空的，您应当像XML一样马上运用/>封闭它：

const element = <img src={user.avatarUrl} />;

JSX标签能够包括子元素：

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

正告
因为JSX相对HTML来讲更接近于Javascript，所以React DOM运用驼峰体式格局为属性定名来庖代HTML的属性名。

比方，在JSX中，class变成了className，tabindex变成了tabIndex。

JSX防备了注入式进击

在JSX中，嵌入用户输入是平安的：

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

默许的，React DOM在衬着经由过程JSX嵌入的任何内容之前，都邑将他们的值举行转义。如许就确保了除非在你的运用中明白的写出来的内容，相对不会注入其他任何内容。
在被衬着之前，一切的东西都被转义成为了字符串，如许就可以协助您防备XSS（cross-site-scripting）进击。

JSX示意对象

Babel将JSX编译成React.createElement()挪用。

下面的两个例子是雷同的：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()会实行一些搜检来协助你写出没有bug的代码，然则它建立对象的道理是像下面如许：

// Note: 这是简化的构造
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

这些对象被称作“React元素”。你能够把他们设想成为你想在屏幕上看到的东西的一种形貌。React会读取这些对象，用他们来构建DOM，而且坚持它们的不断更新。

我们将在下一部份来探究怎样将React元素衬着到DOM上。

Tips
我们建议您为挑选的编辑器搜刮“Babel”语法计划，以便ES6和JSX代码都能够被准确高亮的显 示。

    原文作者：李小疯子
    原文地址: https://segmentfault.com/a/1190000008882159
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞