react-jsx基础使用02

react05

jsx的语法基础应用 - 2

{}: 此语法中使用不同类型值的时候可以具体效果

• number（Infinity） 、string类型 ： 内容是什么就呈现什么
• boolean、undefined、null 、bigint（10n）、 symbol： 渲染效果为空白
• 普通对象类型： {a : 1} ==> 报错： Objects are not valid as a React ， 普通对象不支持渲染
• 数组：[10,20] 数组中的每个元素都会分别渲染，并不会变成字符串渲染，但是没有逗号
  • 数组中的元素不能是普通对象，会报错
  • 对象中除了数组对象，和虚拟dom对象可以渲染，其他的实例对象，时间对象。。。都不支持渲染
• 函数对象：可以渲染，但是要作为函数组件来渲染，使用方式渲染，不能使用 { }

给元素添加样式 :

• 行内样式 ：style = {} {}语法中放值，值是一个对象所以有两层

  • style = {{ 键值对，键名使用驼峰命名法、值必须为字符串 }}

  • 设置样式类名： 不在使用class，使用className

需求应用

• 场景一：通过一个变量俩控制元素的显示和隐藏，或控制元素中展示的内容（皆以按钮元素为例，三目判断的联系）

  • 

  • 效果图

  • 对比 isShow 为 false时 两者的渲染情况

  • 样式控制显示隐藏，无论是否展示样式变而已，元素都已经创建了，三目控制的元素本身的的创建销毁，两者比较来说，

• 场景二：服务端拿到数据data，格式为数组包对象,使用数据来进行元素的循环创建

  • 明确一点：react中的循环需要使用数组的具有返回值的迭代方法,jsx中绑定变量的用法，{}语法
  • 
    

• 扩展，此时没有获取数组数据，在创建一个列表

  • new Array(5) ===> 可以通过new关键字，构建一个数组实例,注意，使用此方法时如果只传入一个元素且此元素为number类型，这表示构建一个指定长度的稀疏数组，每个元素都为空（empty）， 此时的数组不支持使用数组的迭代方法，但可基于数组使用fill（）给稀疏数组填充值，使其变为紧密数组

  • 

  • 看图可知稀疏数组，在执行filter时没有打印，变为紧密数组后执行filter就有了打印，[empty , empty] !== [null , null] , null本事就是值，empty就是空，nothing

  •