1、JSX 介绍

JSX 是javascript XML的缩写，表示可以再 js 中书写 html 语法；虽然看起来像是 HTML 但是在React 中使用时 Babel 会将 JSX 转化为 javascript 语法；

2、JSX的语法

a、在 大括号中书写表达式： { 表达式 }；
常用的表达式：字符串、数值、布尔、undefined/null/array/object 1+2 /array.join()/字符串.split(',')/ fun()
注意：是 表达式 而不是语法句：如：let a=1/if(){}/switch(){} 这是语法句

b、列表渲染：使用 数组的map方法

   const MyText = () =>{const lists = [1,2,3,4,5,6,7,8,9]return (<><ul>{lists.map(itm => <li key={itm}>itm</li>)}</ul></>)}

在 React 中列表渲染的 key 是必须的，而且需要保持唯一性，这是 React 性能优化提升的重要依赖；

c、条件渲染：
条件表达式中，可以是DOM 结构、字符串、函数、等
可以使用三元运算、if表达式、与运算符号(&&)
使用 与(&&) 运算符 时候 左侧不能是 数字，因为数字会直接渲染出来，而不是隐式转换为布尔值

const MyText = () => {const type = truefunction myBtn() {if (type) {return <button>保存</button>} else {return <button>更新</button>}}return (<><div>{/* { type ? '加油': '躺平'} */}{ type ? <span>加油</span> : <span>卷出新高度</span> }{ type && <span>什么时候躺平</span> }</div></>)
}

d、JSX 中样式
内联样式:
需要多加一层 {}

{<div style={{ color: 'blue', fontSize: '18px' }}>躺平人生</div>
}

样式表:
可以使用 text.module.css 文件 模块样式表，保证页面之间的样式相互之间不影响

const activedClass = {font-size: '20px';color: '#086823
}
// 样式类名需要使用 className 为了与 css 中的class 区分
{<div className={activedClass}>躺平人生</div>// 动态添加样式<div className={ true ? 'activedClass' : ''}>躺平人生</div>}

e、事件处理

事件名 必须是 驼峰写法，如：鼠标事件，onMouseDown/onMouseUp onMouseEnter/onMouseLeave

const MyApp = () => {const handleSubmit = (e, otherParams) => {console.log('提交')}return (<>{/* // 通用写法 */}{/* <button onClick={handleSubmit}> */}{/* 若需要传入额外参数，需要使用返回一个函数 */}<button onClick={(e) => handleSubmit(e, otherParams)}>提交</button></>)
}

3、特点：

a、方便组件化，HTML标签与js语法(逻辑与视图紧密结合)，可以更方便的理解代码的业务逻辑
b、必须有且只有一个根标签 在 React 中可以使用 <></> 或者 <Fragment></Fragment>
c、所有的标签必须要有闭合标签，不能是如下 <img /> 单闭合标签；
d、学习成本比较高，对于JS HTML CSS 代码分离写法习惯的同学，开始比较难以理解