React基础篇
来源:互联网 发布:久住小春知乎 编辑:程序博客网 时间:2024/06/15 16:34
JSX 简介
请观察下面的变量声明:
const element = <h1>Hello, world!</h1>;
这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML。
它被称为 JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言,但事实上它完全是在 JavaScript 内部实现的。
JSX 用来声明 React 当中的元素。在下一个章节里面我们会详细介绍元素是如何被渲染出来的,接下来呢,我们先来看看 JSX 的基本使用方法。
在 JSX 中使用表达式
你可以任意地在 JSX 当中使用 JavaScript 表达式,方法是,将表达式包含在大括号 {}
里。
例如 2 + 2
, user.firstName
, 以及 formatName(user)
都是有效的表达式。
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.
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>;
使用大括号包裹的 JavaScript 表达式时,不要再外面使用引号。否则,JSX 会将引号当中的内容识别为字符串而不是表达式。
JSX 嵌套
如果 JSX 标签是闭合式的,那么你需要在结尾处用 />
,就好像 XML 一样:
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
变成了className
,而tabindex
则对应着tabIndex
.
JSX 防注入攻击
你可以放心地在 JSX 当中使用用户输入:
const title = response.potentiallyMaliciousInput;// 这是安全的:const element = <h1>{title}</h1>;
默认情况下,React DOM 在渲染前会 转义 嵌入在 JSX 中的任何值。因此,可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。
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()
这个方法首先会执行一些检查,以帮助您编写无错误的代码,之后会返回一个类似下面的对象:
// 注意: 以下示例是简化过的(不代表在 React 源码中是这样)const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world' }};
这样的对象被称为 “React 元素”。你可以将其视为你想要在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。
我们将在下一个章节当中介绍更多有关 React 元素 是如何渲染成 DOM 的内容。
**Tip:**
如果你是在使用本地编辑器编写 JSX 代码的话,推荐你去装一个支持 JSX 高亮的插件,这样更方便之后的开发学习。
小结
React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX,但它有以下优点:
- JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的,在编译过程中就能发现错误,并且防注入攻击。
- 使用 JSX 编写模板更加简单快速。
- React基础篇
- React Native 基础篇
- React基础
- React基础
- react 基础
- react基础
- React基础
- React基础
- react基础
- react基础
- React with TypeScript 系列(二) --基础篇
- React Native之基础篇Image
- React-Native之手势基础篇
- react和react jsx基础
- React.js基础
- React基础入门
- React基础语法学习
- React基础认识
- RN安装踩坑
- ZXing 生成、解析二维码图片的小示例
- 一行代码搞定图片缩放、旋转、加水印
- Intellij实用技巧
- iOS 【我对 [[NSUserDefaults standardUserDefaults] synchronize]; 的理解】
- React基础篇
- java数据结构与算法-红黑树
- 如何学习 Webpack
- Webpack 概念
- Webpack 入门
- cas-server-3.5.2 SSO 单点登入 带验证码 登入后可携带自定义用户信息(一)
- Webpack 资源管理
- Webpack 代码分离
- Webpack 开发工具与模块热替换