【React】JSX基础

最新推荐文章于 2024-04-11 16:08:28 发布

Learn Forever

最新推荐文章于 2024-04-11 16:08:28 发布

阅读量320

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_41466440/article/details/124913669

版权

React 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了JSX的概念、优势以及在React中的应用，包括JSX中的JS表达式、列表渲染、条件渲染和样式处理。重点讲解了如何利用map方法进行列表渲染，以及通过三元运算符和逻辑与运算符实现条件渲染。此外，还提到了JSX的注意事项，如根节点的存在、标签闭合和属性命名规范，并分享了VSCode的配置建议以保持代码整洁。

摘要由CSDN通过智能技术生成

1. JSX介绍

目标任务: 能够理解什么是JSX，JSX的底层是什么

概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构

作用：在React中创建HTML结构（页面UI结构）

优势：
1.采用类似于HTML的语法，降低学习成本，会HTML就会JSX
2.充分利用JS自身的可编程能力创建HTML结构

注意：JSX 并不是标准的 JS 语法，是 JS 的语法扩展，浏览器默认是不识别的，脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法
在这里插入图片描述

2. JSX中使用js表达式

语法

{ JS 表达式 }

const name = '柴柴'

<h1>你好，我叫{name}</h1>   //    <h1>你好,我叫柴柴</h1>

可以使用的表达式

字符串、数值、布尔值、null、undefined、object（ [] / {} ）
1 + 2、‘abc’.split(‘’)、[‘a’, ‘b’].join(‘-’)
fn()

特别注意

if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 {} 中！！

3. JSX列表渲染

页面的构建离不开重复的列表结构，比如歌曲列表，商品列表等，我们知道vue中用的是v-for，react这边如何实现呢？

实现：使用数组的map 方法
案例：

// 来个列表
const songs = [
  { id: 1, name: '痴心绝对' },
  { id: 2, name: '像我这样的人' },
  { id: 3, name: '南山南' }
]

function App() {
  return (
    <div className="App">
      <ul>
        {
          songs.map(item => <li>{item.name}</li>)
        }
      </ul>
    </div>
  )
}

export default App

注意点：需要为遍历项添加 key 属性
在这里插入图片描述

1.key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用
2.key 在当前列表中要唯一的字符串或者数值（String/Number）
3.如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值
4.如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值

4. JSX条件渲染

作用：根据是否满足条件生成HTML结构，比如Loading效果
实现：可以使用 三元运算符 或 逻辑与(&&)运算符。复杂的判断逻辑收敛为一个函数，不要直接写在模板中。
案例：

// 来个布尔值
const flag = true
function App() {
  return (
    <div className="App">
      {/* 条件渲染字符串 */}
      {flag ? 'react真有趣' : 'vue真有趣'}
      {/* 条件渲染标签/组件 */}
      {flag ? <span>this is span</span> : null}
    </div>
  )
}
export default App

5. JSX样式处理

行内样式 - style

  function App() {
    return (
      <div className="App">
        <div style={{ color: 'red' }}>this is a div</div>
      </div>
    )
  }
  
  export default App

行内样式 - style - 更优写法

  const styleObj = {
      color:red
  }
  
  function App() {
    return (
      <div className="App">
        <div style={ styleObj }>this is a div</div>
      </div>
    )
  }
  
  export default App

类名 - className（推荐）

app.css

  .title {
    font-size: 30px;
    color: blue;
  }

app.js

  import './app.css'
  
  function App() {
    return (
      <div className="App">
        <div className='title'>this is a div</div>
      </div>
    )
  }
  export default App

类名 - className - 动态类名控制

  import './app.css'
  const showTitle = true
  function App() {
    return (
      <div className="App">
        <div className={ showTitle ? 'title' : ''}>this is a div</div>
      </div>
    )
  }
  export default App

6. JSX注意事项

1.JSX必须有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）替代

2.所有标签必须形成闭合，成对闭合或者自闭合都可以

3.JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class -> className for -> htmlFor

4.JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现

格式化配置

1.安装vsCode prettier插件

2.修改配置文件 setting.json

{
  "git.enableSmartCommit": true,
  // 修改注释颜色
  "editor.tokenColorCustomizations": {
    "comments": {
      "fontStyle": "bold",
      "foreground": "#82e0aa"
    }
  },
  // 配置文件类型识别
  "files.associations": {
    "*.js": "javascript",
    "*.json": "jsonc",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "extensions.ignoreRecommendations": false,
  "files.exclude": {
    "**/.DS_Store": true,
    "**/.git": true,
    "**/.hg": true,
    "**/.svn": true,
    "**/CVS": true,
    "**/node_modules": false,
    "**/tmp": true
  },
  // "javascript.implicitProjectConfig.experimentalDecorators": true,
  "explorer.confirmDragAndDrop": false,
  "typescript.updateImportsOnFileMove.enabled": "prompt",
  "git.confirmSync": false,
  "editor.tabSize": 2,
  "editor.fontWeight": "500",
  "[json]": {},
  "editor.tabCompletion": "on",
  "vsicons.projectDetection.autoReload": true,
  "editor.fontFamily": "Monaco, 'Courier New', monospace, Meslo LG M for Powerline",
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "editor.fontSize": 16,
  "debug.console.fontSize": 14,
  "vsicons.dontShowNewVersionMessage": true,
  "editor.minimap.enabled": true,
  "emmet.extensionsPath": [
    ""
  ],
  // vue eslint start 保存时自动格式化代码
  "editor.formatOnSave": true,
  // eslint配置项，保存时自动修复错误
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "vetur.ignoreProjectWarning": true,
  // 让vetur使用vs自带的js格式化工具
  // uni-app和vue 项目使用
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.semicolons": "remove",
  // // 指定 *.vue 文件的格式化工具为vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // // 指定 *.js 文件的格式化工具为vscode自带
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  // // 默认使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.jsxBracketSameLine": true,
  // 函数前面加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "prettier.singleQuote": true,
  "prettier.semi": false,
  // eslint end
  // react
  // 当按tab键的时候，会自动提示
  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.includeLanguages": {
    // jsx的提示
    "javascript": "javascriptreact",
    "vue-html": "html",
    "vue": "html",
    "wxml": "html"
  },
  // end
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // @路径提示
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "git.ignoreMissingGitWarning": true,
  "window.zoomLevel": 1
}