JSX介绍

JSX是JavaScript的语法扩展,通常与React一起使用来表达UI的显示。JSX生成React的元素。下一章将会介绍如何将他们JSX的元素转化成DOM。接下来首先学习必要的JSX基础概念。

JSX是什么?

React显示了渲染逻辑与其他事件逻辑的耦合的情况:事件是如何处理的,状态是如何随着时间改变的,数据又是如何获取显示的。React通过组件将标签和事件的逻辑松散地结合到一起取代了将标签和事件逻辑分别写到不同的文件的方式。组件我们会做进一步介绍,但如果你对JS中加入标签的方式感到困惑,那么本文将会使你以新的角度去理解这种方式。

React并不是强制使用JSX,但多数人发现利用JSX将UI嵌入到JavaScript
会更加直观。同时也能使React更方便地显示错误或者警告消息。

顺着这个思路,我们开始具体研究下。

JSX的嵌入式表达

以下例子示范了变量name通过大括号包裹嵌入到JSX语句中

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

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

在大括号中输入其他有效的表达式也可以嵌入到JSX中。例如, 2 + 2, user.firstName, 或者 formatName(user) 都是合法的JavaScript表达式。

以下例子示范了调用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')
);

虽然不是强制的,但为了便于阅读,可以将JSX表达式分成多行,并写于圆括号之内,以免自动的分号会插入到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属性赋值

字符串写到双引号内再赋值给JSX的属性

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

JS表达式写到花括号内再赋值给JSX的属性

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

表达式不能用双引号,字符串变量也不行。给JSX属性赋值的时候要么就用双引号(字符串),要么就用花括号(表达式),不能同时两个都使用。

警告:
相比HTML,JSX更接近于JavaScript,因此React DOM 使用驼峰命名规则取代HTML的属性命名规则。
例如class 在JSX中就写成className,tabindex就写成 tabIndex

JSX子标签

如果标签内为空可以直接用/> 扩起来,就跟XML一样:

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

如果标签内还有子标签:

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(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: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

这些对象被称为“React 元素“,你可以认为是你想要在屏幕中看到的一种描述。React读取这些对象并用他们构建DOM,并保持最新。

我们将在下一章讨论如何渲染React元素到DOM上。

Tip:
我们推荐你的编辑器选项使用”Babel”语句,这样可以ES6和JSX代码都可以高亮。这个网站使用Oceanic Next 色调方案使两者兼容。

参考并翻译于:https://reactjs.org/docs/introducing-jsx.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值