JSX介绍-基本使用

react创建一个元素

React.createElement的格式:

React.createElement(‘标签名’,{标签上的属性1:值1},子元素1,子元素2)

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// 创建元素
const title = React.createElement('h1', {id:'box'}, 'hello react')

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

React.createElement的格式 :繁琐不简洁,不直观,无法一眼看出所描述的结构,不优雅,开发体验不好,接下来看看JSX穿件组件

JSX是什么

JSX:是 JavaScript XML的缩写。

  • 在 JS 代码中书写 XML 结构
    • 注意:JSX 不是标准的 JS 语法,是 JS 的语法扩展。脚手架中内置了包,用来解析该语法。
  • React用它来创建 UI(HTML)结构

理解:我们之前用html写页面,现在是用jsx来写页面

jsx示例:

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// jsx创建元素
const list = <ul><li>html</li><li>js</li><li>css</li><ul>

// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))

优势:

  • 采用类似于 HTML 的语法,降低了学习成本,会 HTML 就会 JSX
  • 充分利用 JS 自身的能力来创建 HTML 结构。比如,利用 JS 数组的 map 方法创建列表结构

JSX的注意事项

掌握JSX的5个注意事项

内容
  1. jsx必须要有一个根节点
  2. 属性名不能用js中的关键字。例如class, for
  3. 单标签要闭合
  4. 换行建议使用( )包裹
  5. 老版本(16.8)先引入react才能使用jsx
jsx必须要有一个根节点

虚拟根节点:<> xxx

import ReactDOM from 'react-dom'

const title = <> 

Hello React

p标签

ReactDOM.render(title, document.querySelector('#root'))

有两种格式: xxx

import ReactDOM from 'react-dom'

const title = <React.Fragment> <h1>Hello React</h1><p>p标签</p> </React.Fragment>>

ReactDOM.render(title, document.querySelector('#root'))
属性名不能用js中的关键字

例如class, for

  • class -> className
  • for ->htmlFor
单标签要闭合
老版本(16.8)先引入react才能使用jsx

理解引入react的作用(提供createElement的功能)

老版本中不引入就会报错React must be in scope when using JSX

JSX-嵌入表达式

嵌入表达式的格式:

{ JS 表达式 }

例如:

import ReactDOM from 'react-dom'

const num = Math.random()
const title = (<div>
               		随机值:{ num }
               </div>)

ReactDOM.render(title, document.querySelector('#root'))

大括号是一种特殊的语法,让 JSX 解析器知道它需要将它们之间的内容解释为 JavaScript代码 而不是字符串

作用:执行{}内部的代码,并输出结果。

嵌入表达式的位置
  1. 属性值
  const logo = 'https://create-react-app.dev/img/logo.svg'
  <img width="80" src={logo} />
  1. 内容
   const name = '小芳'
   <div>{name}</div>
注意: 单花括号中可以写什么?

可以写

  1. 表达式
  2. 定义:数据类型和运算符的组合(可以单独出现数据类型,也可以数据类型+运算符的组合)
  3. 特点:有值(或者能够计算出一个值); 能被console.log()
  4. 其他的jsx表达式
  5. 注释

不可以写

  1. 对象
  2. js语句:if 语句/ switch-case 语句/ 变量声明语句

JSX-条件渲染

实现方式
  • if/else
  • 三元运算符
  • 逻辑与(&&)运算符
  • switch case
示例

简单情况-用三元表达式

const flag = 0
const content = (<div>{flag ? '达成' : '没有达成'}</div>)

简单情况-用逻辑与

const isLogin = true
const content = (<div>{ isLogin && '您登录了'}</div>)

复杂情况-使用额外的函数

const loadData = (isLoading) => {
  if (isLoading) {
    return <div>数据加载中,请稍后...</div> 
  } else {
    return <div>数据加载完成,此处显示加载后的数据</div>
  }
}
const content = <div>{loadData(true)}</div>

JSX-列表渲染

场景

从后端取回来的数据保存在数组中,需要用列表展示。这里的数组如下:

const skills = [
  { id: 1, name: 'html' }, 
  { id: 2, name: 'css' }, 
  { id: 3, name: 'js' }
]

我们要生成的dom结构如下:

<ul>
  <ol>技能1:htmlol>
  <ol>技能2:cssol>
  <ol>技能3:jsol>
ul>

如何实现呢?

笨方法

直接定义一个数组,每个元素都是一个jsx结构

const skills = [<ol>技能1:html</ol>, <ol>技能2: css</ol>, <ol>技能3: js</ol>]

const content = <ul>{skills}</ul>

ReactDOM.render(content, document.getElementById('root'))
用map

完整格式

// 完整格式
const t = skills.map(function(item) {
  return <ol>技能{item.id}: {item.name}</ol>
})

const list = <ul>{t}</ul>

简写格式

const list = (
  <ul>
    {skills.map(item => <ol>技能{item.id}: {item.name}</ol>)}
  </ul>
)

列表渲染中的key

了解key的作用

React 内部用来进行性能优化时使用的,在最终的HTML结构中是看不到的。

性能优化

例如,数据如下

const songs = [
  { id: 1, name: '痴心绝对' }, 
  { id: 2, name: '像我这样的人' }, 
  { id: 3, name: '南山南' }
  { id:4, name: 'abc'}
]

生成的dom

<ul>
  <li>排名:1 - 歌名:痴心绝对li>
  <li>排名:2 - 歌名:想我这样的人li>
  <li>排名:3 - 歌名:南山南li>
ul>

如果添加一条数据,则视图也要随之更新,而更新的逻辑是:前三条正常保留,而重新添加第四条。

你可能感兴趣的:(react.js,前端,javascript)