React 系列二：核心JSX语法

最新推荐文章于 2024-06-05 16:22:17 发布
最新推荐文章于 2024-06-05 16:22:17 发布
阅读量352 收藏 2
点赞数 1
分类专栏： React 文章标签： reactjs 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XHSRookies/article/details/118875697
版权

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

前言

这节我们将教你一个有趣的标签语法，他既不是字符串也不是 HTML，他被称为 JSX，是一个 JavaScript 的语法扩展，我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。

本文会向你介绍以下内容：

  • 认识 JSX 的语法
  • 在 JSX 中嵌入表达式
  • 事件监听
  • 条件渲染
  • 列表渲染
  • JSX 原理解析
  • 案例练习

认识 JSX 的语法

JSX 是什么？

我们先来看一段代码：

const element = <h1>Hello, XHS-Rookies!</h1>

这段 element 变量的声明右侧赋值的标签语法是什么呢？

这个有趣的标签语法既不是字符串也不是 HTML。

它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

注意： 对于JSX来说，虽然是一种JavaScript语法扩展，但是你能发现其无法直接使用在HTML中，需要借助babel的转换，转换后会自动帮我解析成想要的样式。

为什么使用 JSX？

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

JSX 的书写规范：

  • JSX 的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个 div 原生；

  • 为了方便阅读，我们通常在 jsx 的外层包裹一个小括号()，这样可以方便阅读，并且 jsx 可以进行换行书写；

  • JSX 中的标签可以是单标签，也可以是双标签；

注意： 如果是单标签，必须以/>结尾；

在 JSX 中嵌入表达式

如果我们 jsx 中的内容是动态的，我们可以通过表达式来获取：

书写规则：{表达式}，大括号内可以是变量、字符串、数组、函数调用等任意 js 表达式；

JSX 中的注释

这是嵌入到 JavaScript 中的一种语法，所以在编写注释时，需要通过 JSX 的语法来编写：

<div>
  {/* 我是一段注释 */}
  <h2>Hello World</h2>
</div>

JSX 嵌入变量

情况一： 当变量是 Number、String、Array 类型时，可以直接显示

情况二： 当变量是 null、undefined、Boolean 类型时，内容为空；

  • 如果想要显示 null、undefined、Boolean，那么需要转成字符串；转换的方式有很多，比如 toString 方法、和空字符串拼接，String(变量)等方式；

情况三： 对象类型不能作为子元素（not valid as a React child）

class App extends React.Component {
  render() {
    let data = {
      name: 'xhs-rookies',
      age: 18,
      skills: ['JavaScript', 'React', 'Webpack'],

      test1: null,
      test2: undefined,
      flag: false,

      friend: {
        name: 'xhs-zymxxxs',
        age: 29,
      },
    }
    return (
      <div>
        <div>
          {/* 我是一段注释 */}
          <h2>Hello React</h2>
        </div>

        <div>
          {/* 1.可以直接显示 */}
          <h2>{data.name}</h2>
          <h2>{data.age}</h2>
          <h2>{data.skills}</h2>

          {/* 2.不显示 */}
          <h2>{data.test1}</h2>
          <h2>{data.test1 + ''}</h2>
          <h2>{data.test2}</h2>
          <h2>{data.test2 + ''}</h2>
          <h2>{data.flag}</h2>
          <h2>{data.flag + ''}</h2>

          {/* 3.不显示 */}
          <h2>123{data.friend}</h2>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

为什么 null、undefined、Boolean 在 JSX 中要显示为空内容呢？ 原因是在开发中会进行很多的判断；

  • 在判断结果为 false 时，不显示一个内容；
  • 在判断结果为 true 时，显示一个内容；

JSX 嵌入表达式

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。

在下面的示例中，我们将调用 JavaScript 函数 formatName(user) 的结果，并将结果嵌入到<h1>元素中。

function formatName(user) {
  return user.firstName + ' ' + user.lastName
}

const user = {
  firstName: 'xhs',
  lastName: 'rookies',
}

const element = <h1>Hello, {formatName(user)}!</h1>

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

JSX 绑定属性

你可以通过使用引号，来将属性值指定为字符串字面量：

const element = <div className="active"></div>

也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：

const element = <img src={user.avatarUrl}></img>

在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。

事件监听

和原生绑定区别

如果原生 DOM 原生有一个监听事件，我们可以如何操作呢？

  • 方式一：获取 DOM 原生，添加监听事件；
  • 方式二：在 HTML 原生中，直接绑定 onclick；

我们这里演练一下方式二：

  • btnClick()这样写的原因是 onclick 绑定的后面是跟上JavaScript 代码；
<button onclick="btnClick()">点我一下</button>
<script>
  function btnClick() {
    console.log('按钮发生了点击')
  }
</script>

在 React 中是如何操作呢？

我们来实现一下 React 中的事件监听，这里主要有两点不同

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写；
  • 我们需要通过{}传入一个事件处理函数，这个函数会在事件发生时被执行；
class App extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.btnClick}>点我一下</button>
      </div>
    )
  }

  btnClick() {
    console.log('React按钮点击了一下')
  }
}

事件的 this 绑定

你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。

class LoggingButton extends React.Component {
  
  handleClick() {
    //为了帮助大家直观看到 this ，此处调用了 alert 输出 this (此处可等同于 this ，更多相关知识可阅读原型链)
    alert('this 指向为: ' + this.__proto__.constructor.name)

    //更多内容请前往输出台查看
    console.log('this is:', this)
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return <button onClick={() => this.handleClick()}>Click me</button>
  }
}

如果你想了解 bind 和箭头函数对 this 使用的区别，可以选择查看bind 和箭头函数的区别

事件参数传递

在执行事件函数时，有可能我们需要获取一些参数信息：比如 event 对象、其他参数

情况一：获取 event 对象

  • 很多时候我们需要拿到 event 对象来做一些事情（比如阻止默认行为）
  • 假如我们用不到 this，那么直接传入函数就可以获取到 event 对象；
class App extends React.Component {
  btnClick(e) {
    e.preventDefault()

    alert('e 的 className: ' + e.target.className)

    //更多内容请前往输出台查看
    console.log(e)
  }
  render() {
    return (
      <div>
        <a className="click-me" href="https://xhs-rookies.com/" onClick={this.btnClick}>
          点我一下
        </a>
      </div>
    )
  }
}

情况二：获取更多参数

  • 有更多参数时，我们最好的方式就是传入一个箭头函数，主动执行的事件函数，并且传入相关的其他参数；
class App extends React.Component {
  render() {
    let data = {
      names: ['衣服', '鞋子', '裤子'],
    }
    return (
      <div>
        <a href="https://xhs-rookies.com/" onClick={(e) => this.aClick(e,'点我一下','-1')}>
          点我一下
        </a>

        {data.names.map((item, index) => {
          return (
            <a key={item.toString()} href="#" onClick={(e) => this.aClick(e, item, index)} style ={{marginLeft:'10px'}}>
              这里是{item}
            </a>
          )
        })}
      </div>
    )
  }

  aClick(e, item, index) {
    e.preventDefault()

    alert('item 为: ' + item + ' index 为: ' + index)

    //更多内容请前往输出台查看
    console.log(e)
  }
}

条件渲染

某些情况下，界面的内容会根据不同的情况显示不同的内容，或者决定是否渲染某部分内容：

在 React 中，所有的条件判断都和普通的 JavaScript 代码一致；

常见的条件渲染的方式有哪些呢？

条件判断语句

一种方式是当逻辑较多时，通过条件判断：

class App extends React.Component {
  render() {
    let data = {
      isLogin: true,
    }
    let titleJsx = null
    if (data.isLogin) {
      titleJsx = <h2>欢迎回来~</h2>
    } else {
      titleJsx = <h2>请先登录~</h2>
    }

    return <div>{titleJsx}</div>
  }
}

当然，我们也可以将其封装到一个独立的函数中：

class App extends React.Component {
  this.data = {
    isLogin: true
  }

  render() {
    return (
      <div>
        {this.getTitleJsx()}
      </div>
    )
  }

  getTitleJsx() {
    let titleJsx = null;
    if (this.data.isLogin) {
      titleJsx = <h2>欢迎回来~</h2>
    } else {
      titleJsx = <h2>请先登录~</h2>
    }
    return titleJsx;
  }
}

三元运算符

另外一种实现条件渲染的方法就是三元运算符：condition ? true : false;

三元运算符适用于没有太多逻辑的代码：只是根据不同的条件直接返回不同的结果

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLogin: true,
    }
  }

  render() {
    return (
      <div>
        <h2>{this.state.isLogin ? '欢迎回来~' : '请先登录~'}</h2>
        <button onClick={(e) => this.loginBtnClick()}>
          {this.state.isLogin ? '退出' : '登录'}
        </button>
      </div>
    )
  }

  loginBtnClick() {
    this.setState({
      isLogin: !this.state.isLogin,
    })
  }
}

与运算符&&

在某些情况下，我们会遇到这样的场景：

  • 如果条件成立，渲染某一个组件；
  • 如果条件不成立，什么内容也不渲染；

如果我们使用三元运算符，是如何做呢？

{
  this.state.isLogin ? <h2>{this.state.username}</h2> : null
}

其实我们可以通过逻辑与&&来简化操作：

{
  this.state.isLogin && <h2>{this.state.username}</h2>
}

列表渲染

列表渲染

在开发中我们会从服务器请求到大量的数据，数据会以数组的形式存储。

我们需要通过 JavaScript 代码的方式组织数据，转成 JSX。

我们来演练一个案例：

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Node'],
    }
  }

  render() {
    return (
      <div>
        <h2>前端技能</h2>
        <ul>
          {this.state.skills.map((item) => {
            return <li key={item.toString()}>{item}</li>
          })}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

数组处理

很多时候我们在展示一个数组中的数据之前，需要先对它进行一些处理：

  • 比如过滤掉一些内容：filter 函数
  • 比如截取数组中的一部分内容：slice 函数

比如我当前有一个数组中存放了一系列的数字：[10, 30, 120, 453, 55, 78, 111, 222]

案例需求：从给定数组中获取所有大于等于 50 的数字，并且展示前 3 个数字

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      numbers: [10, 30, 120, 453, 55, 78, 111, 222],
    }
  }

  render() {
    return (
      <div>
        <h2>数字列表</h2>
        <ul>
          {this.state.numbers
            .filter((item) => item >= 50)
            .slice(0, 3)
            .map((item) => {
              return <li key={item.toString()}>{item}</li>
            })}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

列表的 key

我们会发现在前面的代码中只要展示列表都会报一个警告：

image.png列表展示警告

这个警告是告诉我们需要在列表展示的 jsx 中添加一个 key。

至于为什么需要key，这里涉及到react组件渲染的规则，在特别长列表的时候，或是说DOM节点的子元素发送改变，像是在子元素列表尾部新增元素的时候，只是需要将新增的内容放置于尾部即可，这没有什么问题。

但是如果需要在列表头部新增元素，那么开销会非常大。为了解决这类似的问题，React引入了，使用 key 进行优化后，树的转换效率会提升。

详细关于 key 的内容请见：

列表 & Key – React (reactjs.org)

深入理解为什么 key 是必须的

JSX 原理解析

JSX 转换本质

实际上，jsx 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。所有的 jsx 最终都会被转换成React.createElement的函数调用。如果你想深入了解 JSX 的实现原理，请详见深入 JSX

案例练习

列表展示

真实开发中，我们的数据通常会从服务器获取，比较常见的是获取一个列表数据，保存到一个数组中进行展示

  • 比如现在有一个代办事项列表，我们如何通过 React 进行展示呢？

我们还是通过一个组件来完成：

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      things: ['写文章', '开会', '上课', '读书'],
    }
  }

  render() {
    return (
      <div>
        <h2>代办事项列表</h2>
        <ul>
          {this.state.things.map((item, index) => {
            return <li key={item.toString()}>{index + 1 + '.' + item}</li>
          })}
        </ul>
      </div>
    )
  }
}

点赞功能案例

代办事项列表的案例中并没有交互，我们再来实现一个点赞功能的案例：

class App extends React.PureComponent {
  constructor() {
    super()
    this.state = {
      isLike: false,
      likeNum: 233,
    }
  }

  likeOrUnlike() {
    if (this.state.isLike) {
      this.setState({
        isLike: false,
        likeNum: this.state.likeNum - 1,
      })
    } else {
      this.setState({
        isLike: true,
        likeNum: this.state.likeNum + 1,
      })
    }
  }

  render() {
    console.log('render')
    return (
      <div>
        <p>点赞人数：{this.state.likeNum}</p>
        <button onClick={(e) => this.likeOrUnlike()}>
          {this.state.isLike ? '取消点赞' : '点赞'}
        </button>
      </div>
    )
  }
}
XHSRookies
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSX 语法详解
web00_11的博客
11-14 9875
JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX
用jsx写vue组件，怎样监听.sync修饰符的事件
weixin_42689772的博客
04-09 4075
<el-dialog title="详细" :visible.sync="open" width="700px" append-to-body > </el-dialog > jsx写法 <el-dialog title="详细" on={{ ['update:visible']: this.view}} visible={this.open} width="700px" append-to-body ></el-dialog > view(){ t..
js中filter过滤过滤器
最新发布
cuicanxinghui的博客
06-05 127
关于JSON数据的过滤。
jsx 基本语法
悟世君子的博客
07-10 2052
JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面 1、基本用法 let poetry = '满地斜阳,翠色和烟老。' let jsx = <div>落尽梨花春事了。{poetry}</div> ReactDOM.render( jsx, document.getE.
JSX语法
weixin_41464845的博客
08-05 897
JavaScript语法扩展
react 组件 jsx 基本使用
weixin_46323188的博客
03-07 691
React 学习之路01概述：脚手架的使用:合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 概述： React 的特点： 声明式、基于组件、学习一次，随处使用 脚手架的使用: 脚手架是开发 现代 Web 应用的必备 充分利用 Webpa
vim-jsx-improve：React jsx的语法和缩进插件
02-06
修复了React jsx文件的语法突出显示和缩进的问题。 与xml.vim配合良好 该插件没有依赖性，包含了jsx和javascript所需的所有代码。 注意：如果已经安装，您需要禁用vim-javascript插件，我必须更改一些高亮显示组以...
preact-rollup-react-jsx-transforms：使用JSX语法对3p软件包进行精确处理
03-03
这个工具的核心功能是将不支持JSX的3p软件包转换为React JSX语法。这通常涉及到以下步骤： 1. **识别和解析**：工具会先扫描3p软件包的源代码，寻找不支持JSX的表达式。 2. **转换**：找到的非JSX表达式会被转化为...
hello-react-jsx:使用JSX的React中的Hello World
05-21
JSX是一种将XML语法引入JavaScript的语言，可以将其视为JavaScript扩展。 它允许开发人员直接在其JavaScript中编写XML。 JSX使在React Components JavaScript定义中直接定义HTML模板及其相应的模型属性变得容易。 ...
landau:具有JSX语法和类似React的组件系统的OpenJSCAD
04-29
Landau旨在成为更大的CAD应用程序生态系统中的核心但可扩展的构建基块。 可与Landau一起使用的更多有用的项目： ：用于渲染和检索有关Landau模型的信息的服务器。 是构建与Landau相关的GUI和非JS应用程序的良好基础...
babel-plugin-react-hiccup:打ic语法代替JSX for Babel React
05-17
babel插件React打- 使用Babel的React组件的打ic语法。 React本地准备。例子输入 const element = [ 'h1' , "title" ]const element = [ 'h2#myId.myClass' , "title" ]const element = [ 'h3.foo' , { className : '...
jsx语法
wallowyou的博客
03-29 635
jsx语法 jsx的官方定义是xml语法的ECMAScript扩展。react官方早期为jsx语法开发了一套编译器JSTransform，目前已经不再维护，全部采用Babel的jsx编译器实现。jsx的基本语法1.1. xml基本语法标签可以任意嵌套，可以像HTML一样清晰的看到DOM树状结构及其属性。比如我们构造一个List组件：const List=()=>( <div>
Vue中JSX的基本用法
热门推荐
CRMEB小程序商城的博客
06-08 2万+
首先需要约定一下，使用JSX组件命名采用首字母大写的驼峰命名方式，样式可以少的可以直接基于vue-styled-components写在同一个文件中，复杂的建议放在单独的_Styles.js_文件中，当然也可以不采用CSS-IN-JS的方式，使用Less/Sass来写，然后在文件中import进来。下面是一个通用的骨架： 插值 在JSX中使用单个括号来绑定文本插值 在jsx中不需要把分成事件绑定和赋值二部分分开来写，因为有相应的babel插件来专门处理。在JSX中可以直接使用来指定样式类，内联样式可以直接写
jsx 语法
书中自有妍如玉的博客
11-27 503
jsx 语法
React jsx规则JSX核心语法一 书写规范
SOLar7SysteM的博客
10-06 624
转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式；情况二：当变量是null、undefined、Boolean类型时，内容为空；情况一：当变量是Number、String、Array类型时，可以直接显示。比如UI中需要展示数据状态，在某些状态发生改变时，又需要改变UI；1.若首字母小写，那么React就会去寻找与之同名的html标签。/*1.jsx里面可以放入各种表达式，这里只是举例几个 */2. 若首字母大写，那么React就会去寻找与之同名的组件。
【前端第十一课】React 基础；JSX 语法
Ws_zqw的博客
12-28 1327
React 基础 JSX 语法
React基础-JSX事件绑定-事件传参
m0_71485750的博客
09-19 1万+
原因是btnClick函数并不是我们主动调用的，而且当button发生改变时，React内部调用了btnClick函数;而它内部调用时，并不知道要如何绑定正确的this;
react中 JSX介绍-基本使用
weixin_58207509的博客
11-05 646
JSX是什么 JSX：是 JavaScript XML的缩写。 在 JS 代码中书写 XML 结构 注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。 React用它来创建 UI（HTML）结构 jsx示例 // 导入react和react-dom import React from 'react' import ReactDOM from 'react
web前端react框架
02-20
React的语法结合了JavaScript和XML的特性，称为JSX，使得代码更易于理解和编写。 在React中，有函数组件和类组件两种形式。函数组件简洁且无状态，适合定义简单的UI逻辑，而类组件可以拥有自己的状态，并可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值