React18学习之五.JSX语法_react18 jsx语法

1.JSX构建视图的基础知识

JSX javascript and xml（html）把js和html混合在了一起

@1 VSCODE如何支持JSX语法，格式化，快捷提示

        +创建的js文件，我们把后缀名设置为jsx即可，这样js文件中就可以支持jsx语法了

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

@2在html中嵌入js表达式需要基于“{}”语法

@3在ReactDOM.createRoot()的时候，不能直接把html/body作为根容器，需要指定一个额外的盒子如“#root”

@4每一个构建的视图，只能有一个“根节点”

        +出现多个根节点则报错

        +React给我们提供了一个特殊的节点（标签）: React.Frament空文档标记标签

        <></>

        既保证了可以只有一个根节点，又不新增一个HTML层级结构

2.代码解析

3.那些属于js表达式？

变量/值 {tex}

数学运算：{1+1} --> 2 {x+Y}

判断：三元运算符 { 1=== 1 ? "yes" : "no"}

循环：循环的函数方法map等

4.元素样式设置

 +行内样式：需要基于对象的格式处理，直接写样式字符串会报错,属性采用小驼峰命名方式

        <div style={{fontSize: '20px', color: "blue"}}>react18学习</div>

+className：

        <div className='box' >react18学习</div>

5.项目中的命名方法

        @1小驼峰：首字母小写，其余每一个有意义单词首字母大写

        @2大驼峰：首字母都要大写

        @3kabab-case：person-box

        @4下划线：person_box

6.项目中常见的需求展示

        @1.基于数据的值，来判断元素的显示和隐藏

        控制元素的display样式：不论显示还是隐藏，元素本身都渲染出来了

let flag = true;
root.render(
  <>
      <button style={{display: flag?'block':'none'}}></button>
  </>
);

        项目中优化方式,条件不成立，该元素不渲染

let flag = true;
root.render(
  <>
      {flag?<button>按钮</button>: null}
      {flag&&<button>按钮</button>}
  </>
 
);

            @2.基于数据的值，来判断元素的不同渲染结果

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

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

let data = [{id: 1,title: 'apple'},
        {id: 2, title: 'banana'},
        {id: 3,title: 'pitaya'}]
root.render(
  <>
      <h2>今日水果</h2>
      <ul>
        {
          data.map(item=>
            <li key={item.id}>{item.title}</li>
          )
        }
      </ul>
  </>
);

        @4.没有数组，只是香单独循环五次

new Array(5): [空 ×5], 只传一个数字num，是创建长度为N，每一项是empty的稀疏数组，不能使用数组的迭代方法（forEach和map）

new Array(5, 10) :[5, 10] 密集数组， 每一项都有值，不为空，哪怕值为null

但是可以使用Array.fill的方法去给稀疏数组做填充,使其每一项为null

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