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还是会通过babel将JSX编译为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 编写模板更加简单快速。