在项目中引入并使用 JSX
添加支持
插件支持
引入依赖
React提供的环境搭建工具演示
新建test项目
yarn start
可以将配置文件提出来
yarn eject
配置文件可读性差,因此不考虑使用这种现成方式写项目,跳过吧
我们来观察一下声明的这个变量：
const element = <h1>Hello, world!</h1>;
这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML
它被称为 JSX， 一种 JavaScript 的语法扩展
推荐在 React 中使用 JSX 来描述用户界面
JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的
JSX 用来声明 React 当中的元素。在下节会详细介绍元素是如何被渲染出来的
先来看看 JSX 的基本使用方法
在 JSX 中使用表达式
可任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里
例如 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')
);
书写 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/HTML 一样
JSX 标签同样可以相互嵌套
警告:
因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用camelCase小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称
如class变成了className
而tabindex则对应着tabIndex
JSX 防注入攻击
可放心在 JSX 当中使用用户输入
React DOM 在渲染之前默认会 过滤 所有传入的值
它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击
JSX 代表 Objects
Babel 转译器会把 JSX 转换成一个名为 React.createElement()的方法调用
下面两种代码的作用是完全相同的
React.createElement()首先会进行一些避免bug的检查，之后会返回一个类似下面例子的对象
这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。
我们将在下一个章节当中介绍更多有关 React 元素 是如何渲染成 DOM 的内容。
Tip:
如果你是在使用本地编辑器编写 JSX 代码的话，推荐你去装一个支持 JSX 高亮的插件，这样更方便之后的开发学习。
JSX 的怪异之处
JSX 偶尔也比较奇怪。针对在使用JSX 构建组件时可能会遇到的常见问题，本节汇总了一些小技巧、提示和策略来供你应对。
- 单一根节点
React 组件只能渲染一个根节点。想要了解这个限制的原因，我们先来看看render函数的一个返回示例：
return(
<h1>Hello World</h1>
)
它会被转换成一条语句：
return React.createElement("h1",null,"Hello World");
但是，下面的代码却不是合法的：
return (
<h1>Hello World</h1>
<h2>Have a nice day</h2>
)
需要明确的是，这并非JSX 的限制，而是JavaScript 的一个特性：一条返回语句只能返回单个值，而在前面的代码中我们尝试返回两条语句(两次React.createElement 调用)。解决的方法非常简单：就像你在普通JavaScript 中会做的那样，将所有返回值包含到一个根对象中。
return (
<div>
<h1>Hello World</h1>
<h2>Have a nice day</h2>
</div>
)
它完全有效，因为它会被转换成：
return React.createElement("div",null,
React.createElement("h1",null,"Hello World"),
React.createElement("h2",null," Have a nice day"),
)
它返回单个值，并且是通过合法的JavaScript 完成的。
- 条件语句
如果语句不兼容于JSX，看上去像是JSX 的限制所致，实际上却是因为JSX 只是普通的JavaScript
回顾一下JSX 是如何被转换为普通JavaScript
如下JSX
return (
<div className="salutation">Hello JSX</div>
)
会被转换成这样的JavaScript
return (
React.createElement("div",{className:"salutation"},"Hello JSX");
)
然而，如果尝试在JSX 的中间编写if 语句，例如：
<div className={if (condition) { "salutation" }}>Hello JSX</div>
它就会被转换成一个非法的JavaScript 表达式，如图2-1 所示：
image
- 有什么解决方法？
尽管并无可能在JSX 中使用“if”语句，但仍有根据条件渲染内容的方法，包括使用三元表达式和将条件赋值给一个变量(空值和未定义的值都会被React 进行处理，JSX在转义时什么都不会输出)。
使用三元表达式
如果你有一个非常简单的表达式，可以使用三元形式：
render() {
return (
<div className={condition ? "salutation" : ""}>
Hello JSX
</div>
)
}
这段代码会被转换成一段合法的JavaScript：
React.createElement("div",{className: condition ?"salutation" : ""},
"Hello JSX");
三元形式还可用来有条件地渲染整个节点：
<div>
{condition ?
<span>Hello JSX</span>
: null}
</div>
将条件外置
如果三元表达式还不能应付你的要求，解决方法是不要在JSX 的中间使用条件。简单地将条件语句移动到外部(就像你在第2 章中隐藏和显示ContactItem 细节时所采取的方法)。
下面是原先的代码：
1. render() {
2. return (
3. <div className={if (condition) { "salutation" }}>
4. Hello JSX
5. </div>
6. )
7. }
将条件移动到JSX 的外部，就像：
render() {
let className;
if(condition){
className = "salutation";
}
return (
<div className={className}>Hello JSX</div>
)
}
React 知道如何处理未定义的值，如果条件为假，它甚至不会在div 标签中创建class特性。
网友评论