react文档 JSX 简介

JSX 简介

变量声明:

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

这个有趣的标签语法既不是字符串也不是 HTML.

它被称为 JSX, 是一种对 JavaScript 的语法拓展。咱们建议经过 React 使用它来描述 UI。 JSX 可能让你想起模板语言，可是它拥有 JavaScript 的强大能力。

JSX 产生 React "元素". 下部分咱们探索在 DOM 中渲染他们。如下，在开始前了解如下 JSX 的必要性。

Why JSX?

React 信奉渲染逻辑与 UI 逻辑内在耦合：事件怎样被处理，状态就随之改变，数据就如何显示。

代替经过放置标记和逻辑于分离文件的人工分离技术， React 使用包含二者称为 "components" 松耦合单元来分离关注点。稍后咱们在以后的部分再回到组件上来，若是你以为在 JS 中放置标记不舒服，这个对话可能说服你。

React 能够不用 JSX,但多数人认为这个在处理 JavaScript 代码中的 UI 时可读性更好。也能让 React 显示更多有用的错误和警告信息。

不提这些，咱们开始！

在 JSX 中嵌入表达式

下面例子中， 咱们声明了一个变量 name ，并经过花括号包裹的方式在 JSX 中使用它。

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

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

JSX 中任何可用的 JavaScript 表达式均可以放在花括号中。 例如， 2 + 2， user.firstName, 或者 formatName(user) 所有都是可用的 JavaScript 表达式。

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

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

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

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

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

在线尝试

咱们为了可读性分开 JSX 到多行。虽然没有必要，但咱们建议用小括号包起来，避免自动插入分号的陷阱。

JSX 也是一个表达式

编译以后， JSX 表达式变成常规 JavaScript 函数来调用和求取 JavaScript 对象的值。

这就意味着你能够在 JSX 中使用 if 声明和 for 循环，去给它赋值，接受它做为参数，从函数中返回它。

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 表达式的时候不要用引号包裹花括号。可使用引号，也可使用花括号，可是不要同时使用。

Warning:
因为 JSX 更接近 JavaScript 而不是 HTML， React DOM 使用 小驼峰 属性命名惯例而不是 HTML 属性命名。

指定子节点

若是一个标签是空的，那么你能够像 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;
// This is safe:
const element = <h1>{title}</h1>

React DOM 默认在渲染以前避免任何值嵌入到 JSX 中。所以， 你永远没法注入任何未明确写入你应用中的东西。全部的东西都会在渲染前变成字符串。这有利于防止 XSS(跨站脚本）攻击。

JSX 描绘对象

Bable 编译 JSX 调用 React.createElement().

下面两个例子万全相同：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

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

React.createElement() 执行一些检查去帮助你写没有bug 的代码但它潜在建立了一个相似对象：

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    childrent: 'Hello, world!'
    }
  };

这些对象被称为 "React elements"。 你可想象成一个你想在屏幕上看到的描述。
React 读取这些对象使用它们构建 DOM 和保持对其更新。

下一部分咱们探讨将 React 元素 渲染至 DOM.