JSX语法基础

JSX构建视图

1. JSX： JavaScript and xml（通过自定义标签，构建文档，可以理解为html）把JS和HTML标签融合在一起，并不是字符串拼接！
   vscode如何支持JSX语法（格式化、快捷提示…） 在文档右下角调整开发类型为 “JavaScript React”

   • 创建的 js 文件，后缀名改为 jsx 即可

   • webpack打包的规则中，也是会对 .jsx 这种文件，按照JS的方式进行处理

2. 在HTML中嵌入“JS表达式“，需要基于“ {} 胡子语法 ”

JS表达式： 变量/值 {text}
数学运算 { 1+1 } -> { 2 }
判断：三元运算符 { 1===1 ? ‘ok’ : ‘no’ }
循环：借助于数组的迭代方法进行处理 （map）
所有命令式编程的循环（for、for/in、for/of、while等）都不行

3. 在RectDom.createRoot()的时候，不能直接把HTML/BODY作为根容器，需要指定一个额外的盒子（例如#root）

4. 每一个构建的视图，只能有一个“根节点”
   出现多个根节点则报错 Adjacent JSX elements must be warpped in an enclosing tag.
   React给我们提供了一个特殊的节点（标签）： <> </>
   既保证了可以只有一个根节点，又不新增一个HTML层级结构！！

5. 胡子语法嵌入不同的值，呈现出来的特点
   number / string: 值是什么，就渲染什么
   boolean / null / undefined / symbol / BigInt：渲染的内容是空
   除数组对象外，其余普通对象一般都不支持在 { } 中进行渲染，但是也有特殊情况：
   JSX虚拟DOM对象
   给元素设置style行内样式，要求必须写成一个对象格式。
   数组对象：把数组的每一项都分别拿出来渲染（并不是变为字符串渲染，中间没有逗号）
   函数对象：不支持在 { } 中渲染，但是可以作为函数组件，用方式渲染！！
   …

6. 给元素设置样式
   行内样式：需要基于对象的格式处理，直接写样式字符串会报错

<h2 className="box" style={{
			color: 'red'
			fontSize: '18px' // 样式属性要基于驼峰命名处理
	}}>JSX样式写法 </h2>

设置样式类名：需要把class替换为className

<h2 className="box">

import React from 'react';  // React语法核心
import ReactDom from 'react-dom/client'  // 构建HTML（WebApp）的核心
// 获取页面中#root的容器，作为根容器
const root = ReactDom.createRoot(document.getElementById('root'));
// 基于render方法渲染我们编写的视图，把渲染后的内容，全部插入到#root中进行渲染
let text = 'hello world'
root.render{
	<div> Hello, World! </div>
	<div> 
		{text} 
		<h2 className="box" style={{
			color: 'red'
			fontSize: '18px' // 样式属性要基于驼峰命名处理
		}}>JSX样式写法</h2>
	</div>
);

import React from 'react';  // React语法核心
import ReactDom from 'react-dom/client'  // 构建HTML（WebApp）的核心
const root = ReactDom .createRoot(document.getElementById('root');
/* 需求1：根据数据的值，来判断元素的显示与隐藏 */
let flag = true,
	isRun = false;

root.render = (
	<>
		{/* 控制元素的display样式：不论显示还是隐藏，元素本身都渲染出来了 */}
		<button style={{
			display: flag ? 'block' : 'none'
		}}>按钮1<button/>
		
		<br />
		
		{/* 控制元素渲染与否 */}
		{flag ? <button>按钮2<button/> : null }
		
		<button>{isRun ? '正在处理中...' : '立即提交注册’ }</button>
	</>
)

import React from 'react';  // React语法核心
import ReactDom from 'react-dom/client'  // 构建HTML（WebApp）的核心
const root = ReactDom .createRoot(document.getElementById('root');
/* 需求2：从服务器获取了一组列表数据，循环动态绑定相关内容 */
let data=[{
	id: 1,
	name: 'lilei'
},{
	id: 2,
	name: 'hanmeimei'
},{
	id: 3,
	name: 'xiaoming'
}]

root.render = (
	<>
		<h2> className="title">今日新闻</h2>
		<ul className="news-box">
			{data.map((item, index) => {
				/* 循环创建的元素一定要设置key属性，属性值是本次循环中的‘唯一值’（优化DOM-DIFF） */
				return <li key={item.id}>
					<em>{ index + 1 }</em>
				    &nbsp;&nbsp;
					<span>{item.name}</span>
			    </li>;
			})}
		</ul>
		
		<br />
		{/* 扩展需求：没有数组，就是想单独循环5次 */}
		{new Array(5).fill(null).map((_, index) => {
			return <button key={index}>
				按钮{ index + 1 }
			</button>;
		})}
	</>
)

注：new Array（）：
密集数组：每一项都有值，哪怕值是null，let arr = new Array(5).fill(null)
使用数组的迭代方法 {forEach和map}，它们不会去迭代稀疏数组