【React】JSX构建视图

React是使用JSX来构建视图的，JSX就是Javascript and Xml(html) 把JS和HTML标签混合在了一起。本文主要介绍使用JSX的一些要点。

1、如何让编译器支持JSX语法？

• 只需要将新建文件的后缀改为.jsx结尾就可以
• webpack 打包时会对.jsx这种文件，按照JS的方式进行处理的

2、在html中写JS表达式需要使用{}，那么JS表达式的类型有哪些呢?

JS表达式可以计算并返回一个值的任何合法语句，就是能产生值的代码片段。表达式的结果可以是一个字面量（如数字或字符串），也可以是一个计算结果、函数调用、对象、数组等。

JS表达式大概包含以下：

• 变量/值 {text}
• 数学运算 {1+1}->{2}. {x+y}
• 判断：三元运算符 {1===1?"OK":"ON"}
• 循环：借助数组的迭代方法处理 map，filter

不包括以下形式：

• 所有命令式编程的循环（for 、for/in 、 for/of 、while）

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

• 条件控制语句 （if 、switch）

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

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

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

5、{}语法中嵌入不同的值，所呈现出的特点

• number/string类型：值是什么，就渲染什么
• boolean/null/undefined/Symbol/BigInt：渲染的内容为空
• 正则对象、时间对象、包装类对象：不支持渲染
• 数组对象：把数组中的每一项分别拿出来渲染（并不是变为字符串渲染，中间没有逗号）
• 函数对象：不支持在{}中渲染，但是可以作为函数组件，用<Component/>方式渲染!!

• 除数组对象外，其余对象一般都不支持在{}中进行渲染，但是也有特殊情况，比如：
  • JSX虚拟对象
  • 给元素设置style行内样式，要求必须写成一个对象格式

6、给元素设置样式

• 行内样式

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

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

<h2 className="box">

驼峰命名法
小驼峰：camelCase 首字母小写，其余每个有意义的单词首字母大写
大驼峰：PascalCase 首字母都要大写
kabab-case：personal-box

7、判断元素的显示隐藏
（1）通过css中display，不管是现实隐藏，元素本身都渲染出来
（2）通过字段判断三元表达式控制元素渲染或者不渲染

  let flag = false, isRun = false;

root.render(
    <>
        {/!* 控制元素的display样式：不论显示还是隐藏，元素本身都渲染出来了 *!/}
        <button style={{
            display: flag ? 'block' : 'none'
        }}>按钮1</button>

        <br />

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

        <br />

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

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

通过map循环数据进行渲染，

/* 需求二：从服务器获取了一组列表数据，循环动态绑定相关的内容 */
let data = [{
    id: 1,
    title: '欢迎大家来珠峰学习'
}, {
    id: 2,
    title: '期望大家可以把React学好'
}, {
    id: 3,
    title: '大家有问题可以随时找我'
}];

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.title}</span>
                </li>;
            })}
        </ul>

        <br />

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

9、扩展需求:没有数组，就是想单独循环五次
使用new Array(5).fill(null)实现如下：

root.render(
    <>
        {new Array(5).fill(null).map((_, index) => {
            return <button key={index}>
                按钮{index + 1}
            </button>;
        })}
    </>
);

new Array的用法，如下：

稀疏数组对于的就是密集数组，密集数组：每一项都有值，哪怕值是null，使用数组的迭代方法（forEach和map）,不会去迭代稀疏数组。

好书推荐

鸿蒙之光HarmonyOS NEXT原生应用开发入门
《鸿蒙之光HarmonyOS NEXT原生应用开发入门》是一本全面介绍HarmonyOS NEXT版本开发的实战指南。无论你是对鸿蒙原生开发感兴趣的开发者，还是希望转型到HarmonyOSNEXT系统的资深工程师，这本书都能为你提供详尽而系统的指导。

《鸿蒙之光HarmonyOS NEXT原生应用开发入门》以HarmonyOS NEXT版本为核心，从基础知识到实战案例，引领读者逐步探索“纯血鸿蒙”原生开发的奥秘。全书共16章，内容涵盖HarmonyOS架构、DevEco Studio使用、应用结构解析、ArkTS编程语言、Ability组件、ArkUI开发、公共事件处理、窗口管理、网络编程、安全管理、数据管理、多媒体开发、多端部署及应用测试等关键主题。书中不仅详细阐述了相关理论知识，还结合了多个实战项目，如计算器开发、WeLink打卡系统、图片轮播播放器、购物车功能实现、录音机与音乐播放器创建、购物应用设计与微信应用模拟、图片查看器构建等，旨在通过实际操作提升读者的动手能力和解决实际问题的能力。