零基础入门一文带你了解前端React中JSX的使用技巧

通过这篇文章，我们将会通过以下目标系统了解React中JSX的详细内容：

• 能够知道什么时JSX
• 能够使用JSx创建React元素
• 能够在JSX中使用Javascript 表达式
• 能够使用JSX的条件渲染和列表渲染
• 能够给JSX添加样式

---

目录

一、JSX的基本使用

1. createElement() 的问题

 2. JSX简介

3. 使用步骤

4. JSX 注意点

二、JSX中使用 JavaScript 表达式

  1. 嵌入 JS 表达式

2. 嵌入过程中注意点

三、JSX 的条件渲染

 四、JSX的列表渲染

五、JSX的样式处理

 六、JSX总结

---

一、JSX的基本使用

1. createElement() 的问题

在之前学习中，我们了解到创建React元素中使用到createElement(）方法，但是：

问题：① 繁琐不简洁                          ② 不直观，无法一眼看出所描述的结构                          ③ 不优雅，用户体验不佳

JSX

 2. JSX简介

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

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

3. 使用步骤

• 使用JSX语法创建 react元素

  // 使用JSX语法，创建react元素
  const title = <h1> Heelo JSX </h1>

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

  // 渲染创建号的 React元素
  ReactDOM.render(title,document.getElementById('root'))

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

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

4. JSX 注意点

• React 元素的属性名使用驼峰命名法。
• 特殊属性名：class -> className , for -> htmlFor , tabindex -> tabIndex。 
• 没有子节点的React元素可以使用 / > 结束。

  const title = <h1 className="title">Hello JSX <span /></h1>

• 推荐：使用小括号包裹JSX，从而避免 JS 中的自动插入分号陷阱。 

  // 使用小括号包裹 JSX 
  const title = (
        <h1 className="title">
            Hello JSX 
        <span />
     </h1>
  )

二、JSX中使用 JavaScript 表达式

  1. 嵌入 JS 表达式

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

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

2. 嵌入过程中注意点

• 单大括号中可以使用任意的 JavaScript 表达式。

  const sayHi = () => 'hi~'
  const title = (
      Hello JSX
      <p> {1} </p>
      <p> {'a'} </p>
      <p> {1 + 7} </p>
      <p> {3 > 5 ? '大于' : '小于等于'} </p>
      <p> {sayHi()} </p>
  )

• JSX自身也是 JS表达式。

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

• JS 中的对象是一个例外，一般只会出现在style 属性中。
• 不能在 { } 中出现造句（比如：if / for 等）。

三、JSX 的条件渲染

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

   const isLoading = true
   const loadData = () => {
      if(isLoading){
          return <div>数据加载中，请稍后 ... </div>
      }
      return {
          <div> 数据加载完毕，此处显示加载后的数据</div>
      }
   }
   constdv = (
       <div> {loadData()} </div>
   )

 四、JSX的列表渲染

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

const songs = [
   {id:1 , name : '歌曲1'},
   {id:2 , name : '歌曲2'},
   {id:3 , name : '歌曲3'},
]
const list = (
  <ul>
     { songs.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
)

五、JSX的样式处理

1. 行内样式 ———— style

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

2. 类名 ———— className(推荐)

   // 引入css 文件
   import './css/index.css'
   
   const list = (
     <h1 className="title"> JSX的样式处理</h1>
   )
   
   // index.css
   .title{
       text-align :center;
   }
   

 六、JSX总结

1. JSX时React的核心内容。
2. JSX表示在JS代码中写HTML结构，时React声明式的体现。
3. 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染，可以描述任意UI结构。
4. 推荐使用className 的方式给JSX添加样式。
5. React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能。