React入门02-JSX基础知识点

最新推荐文章于 2024-07-16 09:11:26 发布

It'sMyGo

最新推荐文章于 2024-07-16 09:11:26 发布

阅读量674

点赞数 24

分类专栏： React入门文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/qq_33546823/article/details/140086184

版权

React入门专栏收录该内容

7 篇文章 0 订阅

订阅专栏

什么是JSX？

JSX 是一种 JavaScript 的语法扩展。它让你可以在 JavaScript 中直接编写类似 HTML 的标签语法，使代码更具可读性和简洁性。以App.js文件为例，UI模板被编写在一个函数当中被return出去，其中还能将javascript变量绑定到该模板当中，如图所示，message变量被绑定了标签<h1>当中，而不需要操作DOM来实现插值的操作。

实际运行起来实现的效果如下图所示。

使用JSX有什么优势呢？

JSX集成了Javascript以及HTML标签书写的优势，能够直观的在JS代码中使用类HTML标签创建React的UI组件，并且在JSX的表达式当中使用JS的表达式，和正常网页开发对比。

JSX的本质是什么？

浏览器并不能直接识别我们书写的JSX内容，需要经过编译后转换为函数的调用，函数调用的参数就是组件内的每个元素，这些元素都会被编译为Javascript对象，这写对象描述了组件的结构以及属性。

我们就以Babel为例子，Babel能够将浏览器不能解析的JSX内容转换为浏览器能够理解的_jsx（）函数调用，其中参数就是这些元素属性构成的对象，最终渲染到浏览器上。

转换前的JSX代码如下：

<div className="App">
   this is a demo
  <h1>{ message }</h1>
</div>

转换后的浏览器能够识别的代码内容如下：

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*#__PURE__*/_jsxs("div", {
  className: "App",
  children: ["this is a demo", /*#__PURE__*/_jsx("h1", {
    children: message
  })]
});

我们可以使用Babel官方网站体验转换，如下图所示。

这里提一嘴题外话，Babel主要用于将现代的JavaScript代码（包括JSX和ES6+特性）转换为向后兼容的Javascript代码，使其能够在旧版本的浏览器中运行。

JSX常用的使用方式（高频场景）

通过大括号{ JS表达式 }可以在JSX中使用JS的表达式（注意不能书写语句），作为对比在Vue当中则是使用双大括号{{ JS表达式 }}来实现变量插值，下面将说明常用的几种表达式的使用。

直接传递字符串
插入变量
函数调用
方法调用
使用JS的对象（常用于行内样式的书写）
其它JS表达式

如下方的代码所示，分别例举了几个高频场景。

const message = 'Hello World 002';

// 函数的调用
function getMessage() {
  return 'Hello World Function 003';
}

function App() {
  return (
    <div className="App">
      this is a demo
      <h1>{ message }</h1>
      {/* 1. 插入字符串 */}
      {'Hello World 001'}
      <div></div>
      {/* 2. 变量插值 */}
      {message}
      <div></div>
      {/* 3. 函数的调用 */}
      {getMessage()}
      <div></div>
      {/* 4. 方法的调用 */}
      {message.toLowerCase() +' to lower case'}
      {/* 5. 使用对象（常用于内联样式） */}
      <div style={{ color: 'red' }}>Hello World</div>
      {/* 6. 其它JS表达式，例如条件表达式，map列表渲染，复杂条件渲染等等 */}
      {message.length > 5 ? 'Long Message' : 'Short Message'}
    </div>
  );
}

export default App;

如下图所示是实现后的效果，完全达到预期。

JSX中实现列表渲染

如果想要在JSX中实现列表渲染通常使用JavaScript中的map方法，调用数组的map方法将会遍历数组，每个遍历元素返回一个JSX元素，并且不要忘了给每个元素设置key属性。

示例代码如下所示，首先定义一个字符串数组，内容就是无序列表的显示内容，接着调用items上的map方法，index就是元素的下标，item就是遍历的数组元素，每次遍历都会返回绑定了唯一key值的JSX的<li>元素。

const items = ["Apple", "Banana", "Cherry"];

function App() {
  return (
    <div className="App">
      this is a demo
      <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
    </div>
  );
}

export default App;

其实上面的代码相当于下面的代码：

function App() {
  return (
    <ul>
      <li key="1">Apple</li>
      <li key="2">Banana</li>
      <li key="3">Cherry</li>
    </ul>
  );
}

· 实现效果如下图所示：

使用列表渲染为什么一定要绑定key值呢？

key值帮助 React 识别哪些元素发生了变化，避免不必要的重新渲染。如果不绑定key值，每次微小的更新都可能导致整个列表重新渲染。例如：如果我只是删除了Apple选项，我并没有必要去更新Cherry，但是如果没有key标识，那么就将会导致整个列表的重新渲染。

总的来说，key值能够让React追踪元素变化，优化渲染过程，减少不必要的DOM更新，提高性能。

使用JSX实现条件渲染

最简单的条件渲染使用三元运算符和逻辑与运算&&就可以实现基础的条件渲染，如果想要实现更复杂的条件渲染就可以在外部定义函数，通过if语句判断后端返回的数据参数，返回不同的UI模板从而实现条件渲染。

const isLoggedIn = true

// 复杂条件渲染函数
const Greeting = () => {
  // if判断语句
  if (isLoggedIn) {
    return <p>Welcome User</p>
  } else {
    return <p>Welcome Guest</p>
  }
}


function App() {
  return (
    <div className="App">
      this is a demo
    {/* 使用逻辑与实现条件渲染 */}
    {isLoggedIn && <p>Welcome User</p>}
    {/* 使用三元表达式实现条件渲染*/}
    {isLoggedIn ? <p>Welcome User</p> : <p>Welcome Guest</p>}
    {/* 复杂的条件渲染：自定义函数 + if判断 */}

    </div>
  );
}

export default App;

当isLoggedIn为true的时候，显示的效果如下图所示。