5.JSX的基本使用

• 5.JSX的基本使用
  • 1.createElement()的问题
  • 2.JSX简介
  • 3.使用步骤
  • 4.为什么脚手架可以使用 JSX 语法?
  • 5.注意点
  • 6.嵌入 JS 表达式
  • 8.JSX的条件渲染
  • 9.JSX 的列表渲染
  • 10.JSX 的样式处理
  • 11.JSX 总结

1.createElement()的问题

• 1.繁琐不简洁

• 2.不直观, 无法一眼看出所描述的结构

• 3.不优雅, 用户体验不爽

JSX示例:

<div className="shopping-list">
  <h1>Shopping List</h1>
  <ul>
    <li>Instagram</li>
    <liwhatsApp</li>
  </ul>
</div>

2.JSX简介

JSX 是 JavaScript XML 的简写, 表示在 JavaScript 代码中写 XML (HTML) 格式的代码

优势: 声明式语法更加直观, 与HTML结构相同, 降低了学习成本, 提升开发效率

JSX 是 React 的核心内容

3.使用步骤

1.使用 JXS 语法创建 react 元素

// 使用 Jsx 语法, 创建 react 元素
const title = <h1>hello JXS</h1>

2.使用 ReactDOM.render() 方法渲染react元素到页面中

// 渲染创建好的 React元素
ReactDOM.render(title, root)

4.为什么脚手架可以使用 JSX 语法?

1.JSX 不是标准的 ECMAScript 语法, 它是 ECMAScipt 的语法扩展

2.需要使用 babel 编译处理后, 才能在浏览器环境中使用

3.create-react-app 脚手架已经默认有该配置, 无需手动配置

4.编译 JSX 语法的包为: @babel/preset-react

5.注意点

1.React 元素的属性名使用驼峰命名法

2.特殊属性名: class -> className, for -> htmlFor, tabindex -> tabIndex

3.没有子节点的React元素可以用 /> 结束

4.推荐: 使用小括号包裹 JSX, 从而避免JS 的自动插入分号陷阱

// 使用小括号包裹 JXS
cosnt dv = (
	<div>Hello JSX</div>
)

6.嵌入 JS 表达式

• 语法存储在 JS 中
• 语法: {JavaScript表达式}
• 注意: 语法中是单大括号, 不是双大括号 !

const name = 'xc'
const dv = (
  <div>你好, 我叫: ??? </div>
)

const name = 'xc'
const dv = (
  <div>你好, 我叫: { name } </div>
)

7.注意点

• 单大括号中可以使用任意的 JavaScript 表达式
• JSX 自身也是 JS 表达式
• 注意: JS 中的对象是一个例外, 一般只会出现在 style 属性中
• 注意: 不能在{}中出现语句 (比如: if/for等)

const h1 = <h1>我是JSX</h1>
const dv = (
   <div>嵌入表达式: {h1}</div>
)

8.JSX的条件渲染

• 场景: loading效果
• 条件渲染: 根据条件渲染特定的JXS结构
• 可以使用 if/else 或 三元运算符或逻辑与运算符来实现

const isLoading = true
const loadData = () => {
  if(isLoading) {
    return <div>loading</div>
  }
  return <div>数据加载完成, 此处显示加载后的数据</div>
}

const title2 = (
  <h1>
    条件渲染: 
    {loadData()}
  </h1>
)

9.JSX 的列表渲染

• 如果要渲染一组数据, 应该使用数组的 map() 方法
• 注意: 渲染列表时应该添加 key 属性, key属性的值要保证唯一
• 原则: map()遍历谁, 就给谁添加 key 属性
• 注意: 尽量避免使用索引号作为key

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

const title3 = (
  <ul>
    {songs.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
)

10.JSX 的样式处理

1.行内样式- style

<h1 style={ {color: 'red',backgroundColor: 'skyblue'} }>
  JXS的样式处理
</h1>

2.类名 - className (推荐)

<h1 className="title">
	JSX的样式处理
</h1>

11.JSX 总结

1.JSX是React的核心内容

2.JSX表示在JS代码中写HTML结构, 是React声明式的体现

3.使用JSX配合嵌入的 JS 表达式, 条件渲染, 列表渲染, 可以描述任意 UI 结构.

4.推荐使用 className 的方式给JSX添加样式

5.React完全利用 JS 语言自身的能力来编写 UI, 而不是造轮子增强 HTML 功能