携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

1. JSX 的基本使用

1.1 createElement() 的问题

分析为什么推荐使用 JSX ，而不推荐使用 createElement() 的原因，JSX 语法跟 HTML 几乎一样。

1. 繁琐不简洁。
2. 不直观，无法一眼看出所描述的结构。
3. 不优雅，用户体验不爽。

1.2 JSX 简介

1. JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML）格式的代码。

2. 优势：

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

3. JSX 是 React 的核心内容

1.3 使用步骤

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

const title = <h1>Hello JSX</h1>

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

ReactDOM.render(title, document.getElementById('root'))

1.4 为什么脚手架中可以使用 JSX 语法？

1. JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展。
2.  需要使用 babel 编译处理后，才能在浏览器环境中使用。
3.  create-react-app 脚手架中已经默认有该配置，无需手动配置。
4.  编译 JSX 语法的包为：@babel/preset-react。

1.5 注意点

1. react 元素的属性名使用驼峰命名法。
2. 特殊属性名：class -> className，for -> htmlFor，tabindex -> tableIndex。
3. 没有子节点的 react 元素可以用 /> 结束。
4. 推荐：使用小括号包裹 JSX，从而避免 JS 中的自动插入分号陷进。

const dv = (
    <div>Hello JSX</div>
)

2. JSX 中使用 JavaScript 表达式

嵌入 JS 表达式

• 数据存储在 JS 中
• 语法：{ JavaScript 表达式 }
• 注意：语法中是单大括号，不是双大括号！

const name = 'Jack'
const dv = (
    <div>你好，我叫：{name}</div>
)

注意点

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

const sayHi = () => 'Hi~'
const h1 = <h1>Hello JSX!!</h1>

const dv = (
    <div>
      <p>{1}</p>
      <p>{'a'}</p>
      <p>{1 + 7}</p>
      <p>{3 > 5 ? '大于' : '小于等于'}</p>
      <p>{sayHi()}</p>
      {h1}
      
      {/* 错误演示 */}
      {/* <p>{ {a:'6', b:'7'} }</p> */}
      {/* { if(true){} } */}
      {/* { for(var i = 0; i < 10; i++){} } */}
    </div>
)

ReactDOM.render(dv,document.getElementById('root'))

3. JSX 的条件渲染

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

// 条件渲染
const isLoading = true

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

// 2. 三元运算符
// const loadData = () =>{
//   return isLoading ? (<div>正在加载中。。。。。</div>) : (<div>数据加载完成，此处显示加载后的数据</div>)
// }

// 3. 逻辑与运算符
const loadData = () =>{
  return isLoading && (<div>正在加载中。。。。。</div>)
}

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

ReactDOM.render(dv,document.getElementById('root'))

4. JSX 的列表渲染

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

// 列表渲染
const songs = [
  {id:1, name:'1279473943gfgwufsd'},
  {id:2, name:'bdskskjfhskahdOApdo'},
  {id:3, name:'jsbsalhudw8qye8q8327586'}
]

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

ReactDOM.render(list,document.getElementById('root'))

5. JSX 的样式处理

1. 行内样式 ------- style

const dv = (
  <h1 style={{color:'red',backgroundColor:'yellow'}}>
    JSX 的样式处理
  </h1>
)

ReactDOM.render(dv,document.getElementById('root'))

2. 类名 ------- className（推荐）

// 引入 css 文件
import './index.css'

const dv = (
  <h1 className='title'>
    JSX 的样式处理
  </h1>
)

ReactDOM.render(dv,document.getElementById('root'))