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，并且插入页面