React入门三： JSX

1. JSX的基本使用

1.1 createElement()存在的问题

• 繁琐不简洁
• 不直观，无法一眼看出所描述的结构
• 用户体验差
  
  可以说 jsx就是HTML标签的写法。

1.2 JSX简介

JSX是JavaScript XML的简写，表示在JavaScript代码中写XML（HTML）格式的代码
优势：声明式语法更加直观、与HTML结构相同、降低学习成本、提升开发效率

1.3 使用步骤

• 使用JSX语法创建react元素 (更能体现React的声明式特点)

const title = <h1>Hello jsx</h1>
ReactDOM.render(title,document.getElementById('root'))

1.4 脚手架中为什么能直接写JSX语法？

JSX 不是标准的ECMAScript，它是ECMAScript的语法扩展。
需要使用babel编译后，才能在浏览器环境中使用。
create-react-app脚手架中已经默认有该配置，无需手动配置。
编译JSX语法的包为：@babel/preset-react。

问题：什么是 Babel？
Babel是一个工具链，主要用于将采用ECMAScript 2015+ 语法编写的代码 转换为向后兼容的JavaScript语法，以便能运行在当前和旧版本的浏览器或其他环境中。

作用：

• 语法转换
• 通过 Polyfill 方式在目标环境中添加缺失的特性（通过第三方 polyfill 模块，例如 core-js，实现）
• 源码转换 (codemods)

JSX 与 React
Babel用于转换JSX语法
安装React preset

npm install --save-dev @babel/preset-react

并将 @babel/preset-react 添加到你的 Babel 配置文件中。
想深入了解babel请移驾

1.5 注意点

• React元素使用驼峰命名法
• 特殊属性名：class -> className 、 for -> htmlFor 、 tabindex -> tabIndex
  如果写错的话 控制台会提示
  
• 如果标签没有子节点，可以用 /> 来结束。（jsx写法）
• 推荐：使用小括号包裹JSX 从而避免JS的自动插入分号陷阱。

const dv = (
<div> Hello JSX </div>
)

2. JSX中使用Javascript表达式

2.1 嵌入JS表达式

• 数据存储在JS中
• 语法： {javascript表达式}
• 注意：语法中是 单大括号

const name = "jack";
const div = (
	<div>姓名：{name}</div>
)

2.2 注意点

• 单大括号中可以使用任意的Javascript表达式

<p>{1}</p>
<p>{"ssss"}</p>
<p>{1+7}</p>
<p>{2>5?'大于':'小于等于'}

const sayHi = ()=> 'Hi~'
<p>{sayHi()}</p>

• JSX自身也是JS表达式
  注意：JS中的对象是一个例外，一般指挥出现在style属性中

{dv:"sss"}    // 不正确

const h1 = <h1>I am JSX</h1>
const div = (
<div>{h1}</div>
)

• 不能在{ }中出现语句 （if for等 )

{if(true){}}
{for(var i=0;i<10;i++){}}

3. JSX的条件渲染

场景：loading效果
条件渲染：根据条件渲染特定的JSX结构。 有三种方式 如下：

• if else

// ES6 中模块化语法
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
/**
 *    条件渲染
 */
const isLoading = false;
const loadData = ()=>{
  if(isLoading){
    return <div>loading....</div>
  }
  return <div>加载完成</div>
}
const title = (
  <h1>
    {loadData()}
  </h1>
)
ReactDOM.render(title,document.getElementById('root'))

• 三元表达式

const loadData = ()=>{
  return isLoading ? (<div>loading.....</div>):(<div>加载完成</div>)
  // 小括号不是必须的 只是为了看着更明了
}

• 逻辑与

const loadData = ()=>{
  return isLoading && (<div>loading.....</div>)
}

4. JSX的列表渲染

如果要渲染一组数据，应该使用map()方法

// ES6 中模块化语法
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
/**
 *    条件渲染
 */
const songs = [
  {id:1,name:'adv'},
  {id:2,name:'sdf'},
  {id:3,name:'dfs'},
]
const title = (
  <ul>
    {
      songs.map((item,index)=>{
        return(
        <li key={index}>{item.name}</li>
        )    // 需要有返回值 因为是标签 需要使用小括号包上
      }
      )
    }
  </ul>
)
ReactDOM.render(title,document.getElementById('root'))

问题一：箭头函数return
上面的map也可写成：

	songs.map((item,index)=>
        <li key={index}>{item.name}</li>
      )

• 函数体

简写体：只需要一个表达式，并附加一个隐式的返回值

var func = x => x * x;

块体：必须明确return语句

var func = (x,y)=>{return x + y}

• 换行
  在参数和箭头之间不能换行

var func = ()
		 => 1;
// SyntaxError: expected expression, got '=>'

但是在 => 之后换行 或者用 ( )、{ }来实现换行

var func = (a,b,c) =>(
     1
);
var func = (a,b,c) => {
	return  1
}
var func = (
	a,
	b,
	c
)=>1;

问题二：map()函数的参数
map（映射）即原数组被“映射”成新的数组 。为一个回调函数，数组中的每个元素都会执行这个函数。

• map 不会对空数组检测
• map返回新数组，不会改变原数组

三个参数
function(currentValue,index,arr)

• currentValue 必填 当前元素
• index 可选 当前元素的索引
• arr 可选 当前元素所属数组对象

问题三： 遍历生成的元素 key必须做到唯一

5. JSX的样式处理

5.1 行内样式 style

<h1 style={{color:'red'}}>
</h1>

不推荐使用，因为使样式和结构代码过于耦合

5.2 类名 className(推荐)

先引入css文件（scss文件也可以）

import './index.css';
<h1 className="title">
	JSX
</h1>