React为什么选择jsx而不是js

前言

在刚刚接触 React 的时候,首先和平常开发使用不同的是 jsx。在 jsx 中 html 的标签的书写是在 JavaScript 中,嵌套进去,从而描述组件结构,对于我们平时是html 和 js 是分开的。

jsx

jsx 是 js 语法扩展,它结合了 JavaScript 和 XML 标记的语法,使开发人员能够以声明性的方式描述组件的结构,从而提高代码的可读性和维护性。可以用写 XML 的方式写 JavaScript, 使得用JSX 写组件更为便捷、结构更加清晰。

什么是 XML

XML 可扩展标记语⾔,是一种很像HTML的标记语言。主要⽤于传输和存储数据,其焦点是数据的内容。

js 复制代码
<!--XML声明,它定义了版本和所使用的编码-->
<?xml version="1.0" encoding="UTF-8"?>
<box>	<!--根元素-->

<person id="9527"> 
    <name>孙悟空</name> 
    <age>未知</age> 
    <wq>金箍棒</wq> 
</person>

</box>

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

要是说我偏不使用 jsx,也可以使用 React.createElement 来创建 React 组件。

js 复制代码
render() { 
    return React.createElement( 
        "div", 
        null, 
        "Hello ", 
        this.props.name 
    ); 
}

使用

我们通过 JSX 编写的组件,相对 React.createElement 来说就要简洁明了许多,同样的组件,编写起来会更为简洁,并且代码的层次也会更加的清晰, 从下面的例子来看,jsx 就像 javascript 和 html 的结合。

js 复制代码
import React from 'react'
import ReactDOM from 'react-dom'

const box = <div>
    <span>我是个盒子<span>
</div>
React.render(
    box,
    document.getElementById('root')
)

在结构中使用数据是用 {} 来包裹起来,在 {} 里可以写任意表达式

js 复制代码
import React from 'react'
import ReactDOM from 'react-dom'

let text = '我是个盒子'
const box = <div>
    <span>{text}<span>
    <span>{2 > 1 ? '真' : '假'}<span>
</div>
React.render(
    box,
    document.getElementById('root')
)

jsx 本身也算是一个表达式

js 复制代码
function showBox (size) {
    if(size == 'big) {
        return <span>大盒子<span>
    }else {
        return <span>小盒子<span>
    }
}
let box = showBox('big)

在 jsx 中标签的属性名与平时 html 标签属性也不一样

js 复制代码
import React from 'react'
import ReactDOM from 'react-dom'
let className = 'fontStyle'
const box = <div>
    // 在jsx class 属性写成 className
    <span className={className}>我是个盒子<span>
</div>
React.render(
    box,
    document.getElementById('root')
)

当需要根据数据列来渲染 dom,可以使用 map 来循环并使用 key 值标记每条数据。

js 复制代码
let list = [
    {id: 1, name: '孙悟空'},
    {id: 1, name: '猪八戒'},
    {id: 1, name: '沙和尚'},
]
let persons = (
    <ul>
        {list.map( item => <li key={item.id}>{item.name}</li> )}
    </ul>
)

当我们通过JSX来编写组件,但是最终React还是会通过babelJSX编译为js可执行的代码。

使用 npm run eject 来释放 webpack 的配置文件

可以在 config 文件夹中寻找到该段代码,这里使用 babel-loader 对 jsx 进行翻译,使代码能让浏览器里运行。

js 复制代码
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    presets: [
      [
        require.resolve('babel-preset-react-app'),
        {
          runtime: hasJsxRuntime ? 'automatic' : 'classic',
        },
      ],
    ],

    plugins: [
      isEnvDevelopment &&
        shouldUseReactRefresh &&
        require.resolve('react-refresh/babel'),
    ].filter(Boolean),
    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true,
    // See #6846 for context on why cacheCompression is disabled
    cacheCompression: false,
    compact: isEnvProduction,
  },
},

总结

JSX 的优点:

  • JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。

  • 声明式语法直观,结构清晰明了。

  • 它是类型安全的,在编译过程中就能发现错误。

  • 使用 JSX 编写模板更加简单快速。

相关推荐
摸鱼仙人~31 分钟前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.1 小时前
serviceWorker缓存资源
前端
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子4 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码5 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html