# JSX

TIP

JSX是一种JS和HTML混合的语法,将组件的结构、数据甚至样式都聚合在一起定义组件

# 一、特点

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

# 二、使用

# 1 独立文件

ReactDOM.render(
  <h1>hello</h1>,
  document.getElementById('root')
);

# 2 表达式

  • 可以任意地在 JSX 当中使用 JavaScript 表达式,在 JSX 当中的表达式要包含在大括号里
let title = 'hello';
ReactDOM.render(
  <h1>{title}</h1>,
  document.getElementById('root')
);

# 3 属性和样式

  • 在JSX中属性不能包含关键字,像class需要写成className,for需要写成htmlFor,并且属性名需要采用驼峰命名法
ReactDOM.render(
  <h1 className="title" style={{ color: 'red' }} htmlFor="username">Hello</h1>,
  document.getElementById('root')
);

# 4 if条件

function greeting(name){
   if(name){
      return <h1>hello {name}</h1>
   }else{
     return <h1>hello stranger</h1>
   }
}
let element = greeting('hello');
ReactDOM.render(
  element,
  document.getElementById('root')
);

# 5 for循环

let names = ['张三','李四','王五'];
//把一个字符串的数组映射为一个li的数组
let lis = names.map(name => <li>{name}</li>);
ReactDOM.render(
  <ul>{lis}</ul>,
  document.getElementById('root')
);

# 6 数组默认展开

var arr = [
  <h1>张三</h1>,
  <h2>李四</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('root')
);

# 7 注释

ReactDOM.render(
  <div>
	{/*注释...*/}
	<h1>张三</h1>
  </div>,
  document.getElementById('root')
);

# 三、执行过程

  1. 写代码为JSX:<h1>hello</h1>
  2. 打包的时候,会调用webpack中的babel-loader把JSX写法转换成JS写法 React.createElement
  3. 在浏览器里执行createElement,得到虚拟DOM,也就是React元素,它是一个普通的JS对象,描述了你在界面上想看到的DOM元素的样式
  4. 把React元素(虚拟DOM)给了ReactDOM.render方法,render会把虚拟DOM转成真实DOM,并且插入页面