React基础：JSX语法与组件属性, JSX 简明入门教学指南

 

JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。

虽然你可以完全不使用JSX语法，只使用JS语法，但还是推荐使用JSX，可以定义包含属性的树状结构的语法，类似HTML标签那样的使用，而且更便于代码的阅读。

使用JSX语法后，你必须要引入babel的JSX解析器，把JSX转化成JS语法，这个工作会由babel自动完成。同时引入babel后，你就可以使用新的es6语法，babel会帮你把es6语法转化成es5语法，兼容更多的浏览器。

 

所以，如果您的没有node或者其他可以解析JSX的服务器支持，那么您就必须引入 babel 文件才可以使用 JSX 的语法，但是引入这个文件，会使您的网页加载变慢！

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="yourScript.js"></script>

或者：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
<!-- your script -->
</script>

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

<div id="root"></div>

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

React DOM 会将元素及其子元素与之前版本逐一对比, 并只对有必要更新的 DOM 进行更新, 以达到 DOM 所需的状态。

下面你可以找到 JSX 的基础知识，以帮助您开始使用。

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

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

你可以用 花括号 把任意的 JavaScript 表达式 嵌入到 JSX 中。例如，2 + 2， user.firstName， 和 formatName(user)，这些都是可用的表达式。

在下面的例子中，我们将调用 JavaScript 函数 formatName(user) 的结果嵌入到 <h1> 元素中。

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')
);

Try it on 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>;

警告:

由于 JSX 比 HTML 更接近 JavaScript ，因此 React DOM 使用 camelCase 属性命名约定而不是 HTML 属性名称。

例如，在 JSX 中，class 变成了 className，tabindex 变成了 tabIndex。

用 JSX 指定子元素

如果是空标签，您应该像 XML 一样，使用 />立即闭合它：

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

JSX 标签可能包含子元素：

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

JSX 防止注入攻击

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

const title = response.potentiallyMaliciousInput;
// 这样是安全的:
const element = <h1>{title}</h1>;

默认情况下， 在渲染之前, React DOM 会格式化(escapes) JSX中的所有值. 从而保证用户无法注入任何应用之外的代码. 在被渲染之前，所有的数据都被转义成为了字符串处理。 以避免 XSS(跨站脚本) 攻击。

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的代码，但基本上它会创建一个如下所示的对象：

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

本文：React基础：JSX语法与组件属性, JSX 简明入门教学指南