react基础篇一
jsx简介
const element = <h1>Hello, world!</h1>;
这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。
它被称为 JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言,但事实上它完全是在 JavaScript 内部实现的。
在 JSX 中使用表达式
你可以任意地在 JSX 当中使用 JavaScript 表达式,在 JSX 当中的表达式要包含在大括号里。
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 对象。
这也就意味着,你其实可以在 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} />;
切记你使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式。
警告:(驼峰表达式)
因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase
小驼峰命名 来定义属性的名称,而不是使用 HTML 的属性名称。
例如,class
变成了 className
,而 tabindex
则对应着 tabIndex
。
JSX 防注入攻击
你可以放心地在 JSX 当中使用用户输入:
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的:
const element = <h1>{title}</h1>;
BooLeans, Null, Undefined...会被忽略需要转化为字符串
React DOM 在渲染之前默认会 过滤 所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。
JSX 代表 Objects
Babel 转译器会把 JSX 转换成一个名为 React.createElement()
的方法调用。(本质上就是 我们使用jsx的语法写起来更加的方便,Babel内层还是会转义为基础的语法去生成DOM节点)
下面两种代码的作用是完全相同的:
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基础篇一的更多相关文章
- react 基础篇 #2 create-react-app
1. 介绍 在开发react应用时,应该没有人用传统的方法引入react的源文件(js),然后在html编辑吧. 大家都是用webpack + es6来结合react开发前端应用. 这个时候,我们可以 ...
- [react 基础篇]——React.createClass()方法同时创建多个组件类
react 组件 React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 方法就用于生成一个组件类 一个组 ...
- React基础篇 (1)-- render&components
render 基础用法 //1.创建虚拟DOM元素对象 var vDom=<h1>hello wold!</h1> //2.渲染 ReactDOM.render(vDom,do ...
- react基础篇入门组件
讲述一下React: 1.声明式设计-React采用声明范式,可以轻松描述应用 2.高效-React通过DOM模型,最大限度的减少dom的交互 3.灵活-React可以与已知的库或框架很好的配合 4. ...
- React基础篇 - 02.JSX 简介
JSX 简介 请观察下面的变量声明: const element = <h1>Hello, world!</h1>; 这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML ...
- React基础篇 (3)-- 生命周期
生命周期是react中的重要部分,理解它有助于我们更合理的书写逻辑. 组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移 ...
- React基础篇(2) -- state&props&refs
内容简介 state props refs 行内样式及动态类名 state 基本介绍 React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI ...
- react基础篇六
创建 Refs 使用 React.createRef() 创建 refs,通过 ref 属性来获得 React 元素.当构造组件时,refs 通常被赋值给实例的一个属性,这样你可以在组件中任意一处使用 ...
- react基础篇五
再看JSX 本质上来讲,JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖.比如下面的代码: <MyButto ...
- react基础篇四
列表 & Keys 渲染多个组件 你可以通过使用{}在JSX内构建一个元素集合 下面,我们使用Javascript中的map()方法遍历numbers数组.对数组中的每个元素返回<li& ...
随机推荐
- Django——1 环境搭建
Django 什么是Django 使用前的准备工作 新建项目 开启服务器 新建APP 简单实战 什么是Django框架 http服务器:用来接受用户请求,并将请求转发给web应用框架进行处理.Web应 ...
- Android第三方开源图片裁剪截取:cropper
Android第三方开源图片裁剪截取:cropper 很多app都需要裁剪截取图片作为头像.logo之类,而cropper是github上的一个针对Android平台的.第三方开源图片裁剪截取项 ...
- [JZOJ4687]奇袭
[JZOJ4687]奇袭 题目 由于各种原因,桐人现在被困在Under World(以下简称UW)中,而UW马上要迎来最终的压力测试——魔界入侵. 唯一一个神一般存在的Administrator被消灭 ...
- Void 参数
在C程序中如果在声明函数的时候如果没有任何参数那么需要将参数定义为void以此来限定此函数不可传递任何参数,如果不进行限定让参数表默认为空其意义是可以传递任何参数,这个问题的由来实际上是由于要兼容早期 ...
- JAVA的堆和栈(转)
堆栈是 两种数据结构.堆栈都是一种数据项按序排列的数据结构,只能在一端(称为栈顶(top))对数据项进行插入和删除.在单片机应用中,堆栈是个特殊的存储 区,主要功能是暂时存放数据和地址,通常用来保护断 ...
- N天学习一个Linux命令之dmesg
用途 显示系统自检信息和设备信息 用法 dmesg [-c] [-r] [-n level] [-s bufsize] 常用选项 选项 含义 说明 -c 输出ring buffer内容并且清空ring ...
- jQuery事件整理回想
一.事件 1.载入DOM $(document).ready() 这个第一节里具体介绍了 2.事件绑定 jQuery定义了bind()方法作为统一的接口.用来为每个匹配元素绑定事件处理程序. 其基本的 ...
- 欣喜若狂!今天最终成功把音频导入到iphone了,大半年的努力,靠的毅力和方法
研究IOS 的助手也有大半年时间了,一直没有实现导入音视频文件的功能,主要是过程太复杂,而且基本上没有资料能够查询.经过不懈的努力,今天最终成功导入了一个mp3 文件到ipod,一切功能正常,期间经历 ...
- HDU1010-奇偶剪枝(DFS)
题目链接:Tempter of the Bone 第一次做剪枝的题目,剪枝,说实话研究的时间不短.好像没什么实质性的进展,遇到题目.绝对有会无从下手的感觉,剪枝越来越神奇了. .. . HDU1010 ...
- Parallel in C#
https://docs.microsoft.com/en-us/dotnet/standard/parallel-programming/how-to-write-a-simple-parallel ...