React修炼营之JSX语法(三)

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