【React】05-06.JSX语法及使用

JSX构建视图的基础知识

JSX：javascript and xml（html）把JS和HTML标签混合在了一起[并不是我们之前玩的字符串标签]

1、vscode如何支持JSX语法[格式化、快捷提示…]

创建的js文件，把后缀名设置为jsx即可，这样js文件中就可以支持JSX语法
webpack打包的规则中，也是会对.jsx这种文件，安装JS的方式进行处理的

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

JS表达式：执行有结果的

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

4、每一个构建的视图，只能有一个"根节点"

出现多个根节点则报错，
React给我们提供了一个特殊的节点（标签）：React.Fragment 空文档标记标签
<></>既保证了可以只有一个根节点，又不新增一个HTML层级结构

5.{}胡子语法中嵌入不同的值，所呈现出来的特点

• number/string：值是啥，就渲染出来啥
• boolean/ null/ void 0/ undefined/ Symbol/ BigInt：渲染的内容是空
• 除数组对象外，其余对象一般都不支持在{}中进行渲染，但是也有特殊情况：
  JSX虚拟DOM对象
  给元素设置style行内样式，要求必须写成一个对象格式
• 数组对象：把数组的每一项都分别拿出来渲染[并不是变为字符串渲染，中间没有对号]
• 函数对象：不支持在{}中渲染，但是可以作为函数组件，用方式渲染

let text = [10, 20];
console.log(text.toString());
root.render({ text });

6.给元素设置样式

• 行内样式：需要基于对象的格式处理，直接写样式字符串会报错

// 样式属性要基于驼峰命名处理
<h2 style={{ color: 'red', fontSize: '16px' }}>标题1</h2>

CSS使用kabab-case 写法

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

<h2 className="box">标题2</h2>

需求

需求一：基于数据的值，来判断元素的显示隐藏

// 需求一：基于数据的值，来判断元素的显示隐藏
let flag = false,
  isRun = false;
root.render(
  <>
    {/* 控制元素的display样式：不论显示还是隐藏，元素本身都渲染出来了 */}
    <button style={{ display: flag ? "block" : "none" }}>按钮1</button>

    {/* 控制元素渲染或不渲染 */}
    {flag ? <button>按钮2</button> : null}

    <button>{isRun ? "正在处理中" : "提交注册"}</button>
  </>
);

需求二：从服务器获取了一组列表数据，循环动态绑定相关的内容

// 需求二：从服务器获取了一组列表数据，循环动态绑定相关的内容
let data = [
  { id: 1, title: "111" },
  { id: 2, title: "222" },
  { id: 3, title: "333" },
];

root.render(
  <>
    <ul>
      {data.map((item, index) => {
        // 循环创建的元素一定设置key属性，属性值是本次循环的“唯一值[优化DOM-DIFF]”
        return (
          <li key={item.id}>
            <em>{index + 1}</em>
            &nbsp;&nbsp;
            <span>{item.title}</span>
          </li>
        );
      })}
    </ul>

    <br />

    {/* 扩展需求：没有数组，就是想单独循环五次 */}
    {new Array(5).fill(null).map((_, index) => {
      return <button key={index}>按钮{index + 1}</button>;
    })}
  </>
);

补充

new Array语法

稀疏数组对应的就是密集数组
密集数组：每一项都有值，哪怕值是null。

注：使用数组的迭代方法（forEach和map），它们不会去迭代稀疏数组。

let arr1=new Array(5)

常见命名规范

平时在项目中，命名：
驼峰命名法

• 小驼峰 camelCase
• 大驼峰 pascalCase
  kabab-case写法

JS表达式：

变量/值 {text}
数学运算 {1+1} -> 2
判断：三元运算符 { 1===1?‘OK’:'NO} ()
循环：借助于数组的迭代方法处理[ map ]

这不算JS表达式

if/switch

  {
    if(1===1){}
    switch(num){...}
  }

所有命令式编程的循环[for、for/in、for/of、while等]

  {
    for(let i=0;i>10;i++){}
  }

import React from "react";// React语法核心
import ReactDOM from "react-dom/client";// 构建HTMl（WebApp）的核心

// 获取页面中#root的容器，作为根容器
const root = ReactDOM.createRoot(document.getElementById("root"));
// 基于render方法渲染我们编写的视图，把渲染后的内容，全部插入到#root中进行渲染
root.render(
	...
);