1. JSX语法是什么?(what)
前面分享了如何创建一个react项目(React修炼营之搭建React环境(二)),今天说一说react中推荐使用的JSX语法;JSX是javascript的扩展语法,是将html语法加入到javascript,再通过编译器转换成纯javascript代码交给浏览器执行,在实际开发中,JSX语法在产品打包阶段都已经编译成了纯javascript代码,不会带来任何副作用,反而会让代码更直观以便于维护。
2. JSX的特点?
- 可以直接把html语言写在JavaScript中,不需要引号,它允许html和javascript混写
- 防注入攻击,在JSX中嵌入用户输入是安全的,所有内容在渲染之前都会被转换为字符串
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的:
const element = <h1>{title}</h1>;
- 在JSX中可以嵌入表达式
注意: 这里的{},里面必须写javascript表达式
const name = 'Jack';
const element = <h1>Hello, {name}</h1>;
- JSX 中指定属性
const element = <img src={user.avatarUrl}></img>;
- JSX 表示对象,Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
//JSX语法
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
//经过babel转义后的JSX语法
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
3 .JSX 使用注意事项
- 必须有一个根节点,或者虚拟根节点
<></>
、<React.Fragment></React.Fragment>
- 若没有子节点,可以使用单标签,但一定要闭合,例如:
<div />
- 属性一般使用小驼峰命名,例如 class改成className,onclick改成onClick