React之JSX的介绍与使用步骤,注意事项,条件渲染,列表渲染以及css样式处理

一、JSX的介绍

• 简介
  • JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码
• 优势
  • 声明式语法更加直观，与HTML结构相同，降低学习成本，提高开发效率。
• JSX是react的核心内容
  • 注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法。

总结

• 1. 使用jsx创建元素是react声明式UI的体现
• 2.使用jsx语法更加直观，降低学习成本，提高开发效率

二、JSX使用步骤

步骤

• 1.导入reactDOM包
• 2.使用JSX创建react元素
• 3.将react元素渲染到页面上

核心代码

//react17版本之后，使用jsx不需要额外导入React
//1.导入
import ReactDOM from 'react-dom/client'

//2.创建
const h1=<h1 className="box">hello react</h1>

//3.渲染
ReactDOM.createRoot(document.querySelector('#root')).render(h1)

三、JSX注意事项

• JSX必须要有一个根节点， 如果没有根节点，可以使用<></>（幽灵节点）或者<React.Fragment></React.Fragment>
• 所有标签必须结束，如果是单标签可以使用/>结束
• JSX中语法更接近与JavaScript，属性名采用驼峰命名法
  • class ===> className
  • for ===> htmlFor
• JSX可以换行，如果JSX有多行，推荐使用()包裹JSX，防止 JS 自动插入分号的 bug

四、JSX中使用JavaScript表达式

• JS 表达式：数据类型和运算符的组合（可以单独出现数据类型，也可以数据类型+运算符的组合）

  • 特点：有值 或者说 能够计算出一个值
  • 字符串、数值、布尔值、null、undefined、object（ [] / {} ）
  • 1 + 2、‘abc’.split(‘’)、[‘a’, ‘b’].join(‘-’)
  • function fn() {}、 fn() - 注意：函数不能直接渲染，但是，将来可以作为事件处理程序，因此，总的来说也可以出现在 {} 中
  • 验证是不是 JS 表达式的技巧：看内容能不能作为方法的参数，比如，console.log( 表达式 )

• 在jsx中使用表达式语法：{ JS 表达式 }

  • 比如，<h1>你好，我叫 {name}</h1>

  核心代码

const name = 'zs'
const age = 18
const title = (
  <h1>
    姓名：{name}, 年龄：{age}
  </h1>
)

可以访问对象的属性

const car = {
  brand: '玛莎拉蒂'
}
const title = (
  <h1>
    汽车：{car.brand}
  </h1>
)

可以访问数组的下标

const friends = ['张三', '李四']
const title = (
  <h1>
    汽车：{friends[1]}
  </h1>
)

可以使用三元运算符

const gender = 18
const title = (
  <h1>
    是否允许进入：{age >= 18 ? '是' : '否'}
  </h1>
)

可以调用方法

function sayHi() {
  return '你好'
}
const title = <h1>姓名：{sayHi()}</h1>

JSX本身

const span = <span>我是一个span</span>
const title = <h1>JSX 做为表达式：{span}</h1>

JSX中的注释

{/* 这是jsx中的注释 */}   快键键 ctrl + /

• 总结
  • 1.jsx中可以出现任意的js表达式
  • 2.在jsx中只能出现js表达式，不能出现js语句，比如if、for、while等

五、条件渲染

内容

• 在react中，一切都是javascript，所以条件渲染完全是通过js来控制的
• 可以使用if/else或三元运算符或逻辑与(&&)运算符

核心代码

• 通过判断if/else控制

const isLoding = false
const loadData = () => {
  if (isLoding) {
    return <div>数据加载中.....</div>
  } else {
    return <div>数据加载完成，此处显示加载后的数据</div>
  }
}

const title = <div>条件渲染：{loadData()}</div>

• 通过三元运算符控制

const isLoding = false
const loadData = () => {
  return isLoding ? (
    <div>数据加载中.....</div>
  ) : (
    <div>数据加载完成，此处显示加载后的数据</div>
  )
}

• 逻辑与（&&）运算符

const isLoding = false
const loadData = () => {
  return isLoding && <div>加载中...</div>
}

const title = <div>条件渲染：{loadData()}</div>

总结

1. 在react中，可以使用if/else或三元运算符或逻辑与(&&)运算符实现条件的渲染

六、列表渲染

内容：

• 作用：重复生成相同的 HTML 结构，比如，歌曲列表、商品列表等
• 实现：使用数组的 map 方法
• 注意：需要为遍历项添加 key 属性
  • key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用的
  • key 在当前列表中要唯一
  • 如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值
  • 如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值

核心代码

• 列表的渲染

const songs = [
  { id: 1, name: '痴心绝对' }, 
  { id: 2, name: '像我这样的人' }, 
  { id: 3, name: '南山南' }
]

const list = songs.map(song => <li>{song.name}</li>)

const dv = (
  <div>
    <ul>{list}</ul>
  </div>
)

• 直接在JSX中渲染

const songs = [
  { id: 1, name: '痴心绝对' }, 
  { id: 2, name: '像我这样的人' }, 
  { id: 3, name: '南山南' }
]

const dv = (
  <div>
    <ul>{songs.map(song => <li>{song.name}</li>)}</ul>
  </div>
)

• 遍历时添加 key 属性

const dv = (
  <div>
    <ul>
      {songs.map(song => (
        <li key={song.id}>{song.name}</li>
      ))}
    </ul>
  </div>
)

总结

• 注意1：列表渲染时应该给重复渲染的元素添加key属性，key属性的值要保证唯一

• 注意2：key 值尽量避免使用 index 下标

七、CSS样式处理

内容：

1. 行内样式 - style
   1. 像 width/height 等属性，可以省略 px，直接使用 数值 即可
   2. 如果是需要使用百分比的单位，此时，继续使用字符串的值即可（比如，"60%"）
2. 类名 - className【推荐】

核心代码：

• 行内样式-style

const dv = (
  <div style={ { color: 'red', backgroundColor: 'pink' } }>style样式</div>
)

• 类名-className

// 导入样式
import './base.css'
const dv = <div className="title">style样式</div>

总结：

1. JSX 中如何给元素添加样式？ 1 行内 style 2 类名 className

八、JSX 总结

• React 使用 JSX 来编写 UI（HTML）
• React 完全利用 JS 语言自身的能力来增强 UI 的编写 - 能用 JS 来实现的功能绝不会增加一个新的 API
• 现在，就可以使用 React 来编写任意 UI 结构了

// JSX
<div>{ JS 表达式}</div>