（三）react中JSX语法的基本使用

原创已于 2023-03-27 19:59:40 修改 · 658 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #ecmascript

于 2023-03-23 09:18:27 首次发布

react 专栏收录该内容

4 篇文章

订阅专栏

1. 导入 react

import React from 'react' // react库

import ReactDOM from 'react-dom' // 用于操作dom元素

2. 创建虚拟DOM

语法：React.createElement('类型参数', { 入参即元素的属性，null表示无 },子元素)

参数介绍：类型参数type可以是字符串、函数，也可以是React提供的一些内置组件类型。实际上类型参数type可以是：

标签名字符串：浏览器原生标签
React 组件：class 组件或函数组件
React fragment、React Profiler等内置组件

例如：

const virtualDom= React.createElement('div', {

  className：'greeting'

}, 'Hello, world!')

但是有个问题：React.createElement() 方法创建单层元素还算可以，可是如果出现嵌套结构，使用这种方法可读性差，比较繁琐，无法一眼就看出结构层次，例如：

    React.createElement(  'div', null,  
       React.createElement('h1', null, '手机'), 
       React.createElement('ul', null, 
          React.createElement('li', null, '华为'),  
          React.createElement('li', null, '荣耀')
       )
   )

所以接下来咱们的 JSX 语法就该登场了！

例如上述代码可以用JSX来书写：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

（1)：什么是 JSX

JSX即JavaScript XML，表示 JavaScript 代码中写 XML（HTML）格式的代码，就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，只要你把HTML代码写在JS里，那就是JSX。它是react.js开发的一套语法糖，一个在React组件内部构建标签的类XML语法。可以提高组件的可读性，因此推荐使用JSX。

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

注意：

最终会被编译为 createElement() 方法
只能有一个根标签
标签要闭合（单边标签得有斜杠）
小写首字母对应 HTML的标签，组件名首字母大写。
注释使用 / * 内容 */
html标签内注释｛/* 最外层有花括号*/｝

（2)：JSX 语法怎么用

前提：安装：npm i -D babel-preset-react （依赖与：babel-core/babel-loader）脚手架创建的项目会自动安装

1、使用 JSX 语法创建react 元素

// JSX 语法
const ele = （
    <div>
       <h1>手机</h1>
       <ul>
          <li>华为</li>
          <li>荣耀</li>
       </ul>
    </div>
）

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

语法：ReactDOM.render(template,targetDOM)。

参数介绍：参数1：组件参数2：dom对象表示渲染到哪个元素内

// 渲染
ReactDOM.render(ele, document.querySelector('#root'))

注意：

JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，例如：className
特殊属性名： class --> className(因为class是js的关键字）、for --> htmlFor（因为for是js的关键字）
所有的标签都必须闭合，无论是单标签还是双标签
推荐：使用小括号包裹 JSX 结构，从而避免 JS 中的自动插入分号陷阱
事件名用驼峰命名法。HTML是全小写（onclick），JSX中是驼峰(onClick)

3、嵌入 JS 表达式

语法：{JavaScript表达式}

const name = '张三'
const title = (
   <div>你好，我叫：{name}</div>
)

注意点

单打括号中可以是任意的 JavaScript 表达式，如：三元表达式，加减乘除，数组，字符串
单大括号中不能出现语句(例如：if/for等)
JS 对象一般只会出现在style属性中

4、条件渲染实现

可以在函数表达式中使用 if/else 或者三元运算符来实现

const loadData = () => {
    if(idLoading) {
        return <div>数据加载中...</div>
    } else {
        return <div>数据加载完成</div>
    }
}

const load = (
    <div>
        {loadData()}
    </div>
)

5、JSX 的列表渲染

const books = [
    {id: 1, name: 'React'},
    {id: 2, name: 'Vue'},
]

通过遍历数组的方法 map 语法：Array.prototype.map()

const list = (
    <ul>
        {books.map(item => <li>{item.name}</li>)}
    </ul>
)

6、JSX 的样式处理

行内样式 - style

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

类名 - className

需要使用 import '样式文件路径/样式文件名称.css’导入样式文件 ,title类在xxx.css文件中定义好

<h1 className="title">  
    JSX的样式处理
</h1>

总结

JSX 表示在JS代码中写HTML结构，是React声明式的体现
使用 JSX 配合嵌入的 JS 表达式、条件渲染、列表渲染，可以描述任意 UI 结构
推荐使用 className 的方式给JSX添加样式

7.JSX编译原理

JSX的语法需要通过 babel-preset-react 编译后，才能被解析执行

/* 1 在 .babelrc 开启babel对 JSX 的转换 */

{

  "presets": [

    "env", "react"

  ]

}



/* 2 webpack.config.js */

module: [

  rules: [

    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },

  ]

]



/* 3 在 js 文件中 使用 JSX */

const dv = (

  <div title="标题" className="cls container">Hello JSX!</div>

)



/* 4 渲染 JSX 到页面中 */

ReactDOM.render(dv, document.getElementById('app'))

附：箭头函数也可以创建虚拟Dom

注：组件名称必须以大写字母开头，和标签可以区分开，清晰明了。

let Mon = ()=>{

  return <h1>6666666</h1>

}

root.render(<Mon></Mon>); // 相当于 new Mon()