React学习（三）：JSX简介

一、JSX简介

JSX 又名 JavaScript XML，JavaScript 的 XML 类语法扩展。在 js 中写一些 xml标签（html标签）。
JSX 仅仅只是 React.createElement(component, props, …children) 函数的语法糖。

二、为何使用JSX？

React不一定要使用JSX，为何强烈建议使用JSX。在JS中是不支持<div></div>这样的 html 标签的，因此我们在使用 React 时只能通过 React.createElement() 函数的传参来创建虚拟 DOM 元素（React 元素）。这种在原生 JS 语法限制下的 React 的运用带来了极大地不方便，不仅书写上不方便，还需要在脑海中将 html 元素一个个地拆开来分析其包含与被包含的关系。考虑到这种不方便性，React 的开发者就使用了 JSX 语法，允许用户在 js 文件中直接使用 xml 语法写明要创建的标签元素信息。
使用JSX:

ReactDOM.render(
  <div>
    <div>
      <button id='clickme'>Click Me</button>
    </div>
  </div>,
  document.getElementById('root')
);

不使用JSX：

ReactDOM.render(
  React.createElement('div',null,
    React.createElement('div',null,
      React.createElement('button',{
    
    id: 'clickme'},'Click Me'))),
  document.getElementById('root')
);

从上对比可以明显看出JSX代码更简单，更偏向于XML/HTML格式，便于开发和维护。
React遇到元素标签JSX，底层会编译为React.createElement(component, props, …children) 。

三、JSX表达式

1、JSX嵌入表达式
在 JSX 中嵌入 JavaScript 表达式。表达式写在花括号 {} 中：

ReactDOM.render(
  <h1>{
    
    1+1}</h1>,
  document.getElementById('root')
);

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代：

ReactDOM.render(
    <h1>{
    
    i == 1 ? 'True!' : 'False'}</h1>,
    document.getElementById('root')
);

2、JSX 也是一个表达式
可以在 if 语句和 for 循环的代码块中使用 JSX表达式：

function getWelcome(isStyle) {
    
    
  if (isStyle) {
    
    
    return <h1>Hello, {
    
    1+1}!</h1>;
  }
  return <h1>Hello, world.</h1>;
}

四、JSX 特定属性

可以通过使用引号，来将属性值指定为字符串字面量：

const element = <div id="name"></div>;

也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：

const element = <div src={
    
    user.name}></div>;

在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。

五、JSX 样式

React 推荐使用内联样式，在指定元素数字后会自动添加 px：

var myStyle={
    
    
  color:'blue',
  fontSize:50
}
ReactDOM.render(
  <div>
      <h1 style={
    
    myStyle}>{
    
    "Hello, world"}</h1>
  </div>,
  document.getElementById('root')

六、JSX 数组

JSX 允许在模板中插入数组，数组会自动展开所有成员：

var arr = [
  <h1>hello!</h1>,
  <h1>world!</h1>,
];

ReactDOM.render(
  <div>{
    
    arr}</div>,
  document.getElementById('root')
);

··················································································································································································
本文介绍JSX用法~~请大家多多指教，能get到知识点不要忘了关注点个赞~。