02. react 初次见面---JSX简介


声明:本文转载自https://my.oschina.net/u/3563169/blog/1596480,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

1、JSX简介

我们来观察一下声明的这个变量:

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

和记注册这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML.

它被称为 JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言,但事实上它完全是在 JavaScript 内部实现的。

JSX 用来声明 React 当中的元素。在下一个章节里面我们会详细介绍元素是如何被渲染出来的,接下来呢,我们先来看看 JSX 的基本使用方法。

2、在 JSX 中使用表达式

你可以任意地在 JSX 当中使用 ,在 JSX 当中的表达式要包含在大括号里

例如 2 + 2user.firstName, 以及 formatName(user) 都是可以使用的。

//js方法 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 代码的外面扩上一个小括号,这样可以防止  的bug.

3、JSX 本身其实也是一种表达式

在编译之后呢,JSX 其实会被转化为普通的 JavaScript 对象。

这也就意味着,你其实可以在 if 或者 for 语句里使用 JSX,将它赋值给变量,当作参数传入,作为返回值都可以:

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

4、JSX 属性

你可以使用引号来定义以字符串为值的属性

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

也可以使用大括号来定义以 JavaScript 表达式为值的属性

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

切记你使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式。

5、JSX 嵌套

如果 JSX 标签是闭合式的,那么你需要在结尾处用 />和记注册, 就好像 XML/HTML 一样:

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

JSX 标签同样可以相互嵌套

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

警告:

因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称,而不是使用 HTML 的属性名称。

例如,class 变成了 ,而 tabindex 则对应着 .

6、JSX 防注入攻击

你可以放心地在 JSX 当中使用用户输入:

const title = response.potentiallyMaliciousInput; // 直接使用是安全的: const element = <h1>{title}</h1>; 

React DOM 在渲染之前默认会  所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止  攻击

7、JSX 代表 Objects

Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。

下面两种代码的作用是完全相同的

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

React.createElement() 这个方法首先会进行一些避免bug的检查,之后会返回一个类似下面例子的对象:

// 注意: 以下示例是简化过的(不代表在 React 源码中是这样) const element = {   type: 'h1',   props: {     className: 'greeting',     children: 'Hello, world'   } }; 

这样的对象被称为 “React 元素它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。

我们将在下一个章节当中介绍更多有关 React 元素 是如何渲染成 DOM 的内容。

本文发表于2017年12月29日 12:32
(c)注:本文转载自https://my.oschina.net/u/3563169/blog/1596480,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 864 讨论 0 喜欢 0和记注册

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

和记注册又是一年五一,祝我们工人阶级劳动节快乐! 今年被困在北京了,离境再入境需要隔离十五天。只能京津冀周边走一走了,想出去玩啊啊啊啊啊~

人活一辈子,不是一年两年。时间是有连续性的,做抉择的时候要多看几步。保持警惕,大丈夫有所为,有所不为。

和记注册跟人接触,不要想:我能从你身上得到什么,要想:我能给你什么。 想通了,内核就稳了。

这个世界上,别人只会看你现在的样子而不是以后的样子。你以后的样子只有自己才相信。如果没有执行力,一切都是虚妄。

对普通人来说,人和人相处其实最重要的是感觉。感觉不好,你说什么都没用,怎么解释都没用,越说越错,反正最后不好的锅都往你身上扣。所谓“说你行你就行,不行也行。说你不行,你就不行,行也不行”就是这个意思。狼要吃人根本不需要理由,你也同样叫不醒装睡的人。遇到这种情况,早点闪人才是上策。不过大部分人的问题是没有闪人的心态,能力,和资源。

快捷链接
网站地图
提交友链
Copyright © 2016 - 2020 Cion.
All Rights Reserved.