① jsx

const element = <h1>Hello world</h1>

1 为什么使用 JSX？

• React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合

• React 通过将标记与逻辑存放在“组件”的松散耦合单元之中来实现关注点分离

2 在 JSX 中嵌入表达式

可以在 花括号 内放置任何有效的 js 表达式

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

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

3 JSX 也是一个表达式

• 编译后，JSX 表达式也会被转为 js 函数调用，并且得到 js 对象

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

4 JSX 特定属性

4.1 引号 -> 将属性值指定为字符串字面量

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

4.2 花括号 -> 在属性值中插入一个js表达式

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

4.3 不可同时使用 引号和花括号

警告

• JSX语法更接近js而不是html，所以ReactDOM使用驼峰命名来定义属性名

class -> className tabindex -> tabIndex

5 使用 JSX 指定子元素

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

6 JSX 防止注入攻击

• ReactDOM 在渲染前会进行转义，有效防止 XSS 攻击

const title = res.pot
// 直接使用是安全的
const element = <h1>{ title }</h1>

7 JSX 表示对象

• Babel 会将 JSX 转译成一个名为 React.createElement() 函数调用

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

• React.createElement() 会预先进行代码检查

// 简化版
const element = React.createElement(
	type: 'h1',
	props: {
		className: 'greeting',
		children: 'Hello, world!'
	}
)