jsx的简介

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情 jsx是一个 JavaScript 的语法扩展。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能 在js中使用长像类似html的格式

  const element = <h1>Hello</h1>;
  console.log(element)

此段代码将要经历一系列的转换才行，首先babel会解析jsx代码，生成以react.createElement(type,attrs,children)的形式，他的返回值是一个reactElement对象，也就是虚拟dom,可以使用reactDOM.render()方法将他渲染成真实dom,至此解析jsx完成。

jsx的优点

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

注意:

由于 JSX 就是 JavaScript，一些标识符像 `class` 和 `for` 不建议作为 XML 属性名。作为替代，React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。

语法

jsx中可以使用js的表达式，表达式放在花括号{}语法中， 例如

  const name = 'wang ba dan';
  const element = <h1>Hello, {name}</h1>;

jsx中不能使用if else ,如果有此需要，可以用三元运算符来替代。下面的例子就是，如果变量flag为true,就显示tom,否则就显示jarry

 const flag=Math.random()>0.5?true:false;
 const element = <h1>Hello, {flag?'tom':'jarry'}</h1>;

jsx中的注释必须要写在花括号里面，否则就会报错。

  const flag = Math.random() > 0.5 ? true : false;
  const element = <h1>Hello, 
    {/* tom is 猫 */}
    {flag ? "tom" : "jarry"}</h1>;
  console.log(element);

jsx中允许使用数据，数组会自动展开所有成员，所以一般渲染数据时，我们都习惯使用数组的map方法，将数据映射成jsx格式的数据，然后直接交给react供它使用即可

const list=[1,2,3,4]
  const element = <h1>Hello, 
    {list.map(item=><div>项目{item}</div>)}</h1>;
  console.log(element);