react学习-JSX（二）

一、JSX是什么？

概念：JSX是 javascript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 的结构

作用：在 React 中创建 HTML 结构

二、JSX表达式

语法：{ js 表达式 }

与 Vue 的插值表达式非常相似

可以使用的表达式

1. 字符串、数值、布尔值、null、undefined、object（ [] / {} ）
2. 1 + 2、'abc'.split('')、['a', 'b'].join('-')
3. function
4. 使用常规的变量

const name = 'xxhzm'
{ name }

2. 使用 function

const getAge = () => {
  return 16
}

3. 使用一个三元运算符

const flag = true
{ flag ? '真棒' : '真菜'  }

注：if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 {} 中！！

三、JSX列表渲染

在 vue 中使用 v-for 这个指令来进行渲染，但是 react 中没有指令。那react 如何实现呢？

在 react 中使用列表渲染需要使用原生的 map 方法

const list = [
  { id: 1, name: '奔驰' },
  { id: 1, name: '宝马' },
  { id: 1, name: '奥迪' },
]

{ list.map(item => 
{ item.name }
) }

我们需要渲染哪一个内容就 return 谁

在 vue 中使用 v-for 渲染的时候需要添加一个 key，那 react 呢？

我们可以直接在遍历的标签上添加一个 key 属性，提供 diff 性能

{ list.map(item => 
{ item.name }
) }

注：我们在标签上添加的 key 属性仅仅在 react 内部中使用，不会出现在真实的 DOM 结构中

四、JSX条件渲染

在 vue 中我们可以使用 v-if v-else v-show，上面已经说过了 react 中没有指令，那么如何进行实现呢？

1. 使用三元表达式 - 满足条件渲染 span 标签

   const flag = true
   { flag ? hello world : null }

   如何模板结构很复杂呢？

   我们可以使用()来将模板内容包裹起来，在()中换行什么的都没有问题

   { flag ? (
   hello world
   : null }

2. 使用 逻辑与(&&) 逻辑或(||) 运算符

   const flag = false
   
   { flag && hello world }
   { flag || Hi }

五、JSX样式处理

1. 行内样式

   在写行内样式时我们直接在标签上添加一个 style 属性即可

   hello world

   也可以写成

   const style = {
     color: 'red', 
     fontSize: '30px'
   }
   
   hello world

2. 类名样式

   在元素上直接绑定一个 className 属性即可

   app.css：
   .active {
     color: skyblue;
     font-size: 30px
   }
   
   app.js：
   import './app.css'
   
   

3. 动态类名样式

   const activeFlag = false
   
   hello world

六、JSX注意事项

1. JSX必须有一个根节点，如果没有根节点，可以使用<>（幽灵节点）替代
2. 所有标签必须形成闭合，成对闭合或者自闭合都可以
3. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class -> className for -> htmlFor
4. JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现