react 数字转字符_深入浅出 React -- JSX

什么是 JSX

JSX 是一个 JavaScript 的语法扩展。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能
在 React 中，JSX 仅仅是 React.createElement(component, props, ...children) 函数的语法糖

如下 JSX 代码：

<MyButton color="blue" shadowSize={2}>
 Clicke Me
</MyButton>

会编译为：

React.createElement(
 MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

React 必须在作用域内

由于 JSX 会编译为 React.createElement 调用形式，所以 React 库也必须包含在 JSX 代码作用域内

如果不使用打包工具而是直接通过 <script> 标签加载 React，则必须将 React 挂载到全局变量中

用户自定义的组件必须以大写字母开头

以小写字母开头的元素代表一个 HTML 内置组件，比如 <div> 或者 <span> 会生成相应的字符串 'div' 或者 'span' 传递给 React.createElement（作为参数）。大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件，如 <Foo /> 会编译为 React.createElement(Foo)

JSX 语法

在 JSX 中嵌入表达式

在 JSX 语法中，你可以在打括号内放置任何有效的 JavaScript 表达式

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

JSX 也是一个表达式

在编译后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象

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

JSX 特定属性

在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。

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

因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

使用 JSX 指定子元素

假如一个标签里面没有内容，你可以使用 /> 来闭合标签，就像 XML 语法一样：

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

JSX 标签里能够包含很多子元素：

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

JSX 防止注入攻击

React DOM 在渲染所有输入内容之前，默认会进行转义。

所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

JSX 表示对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用

以下两种示例代码完全等效：

con