欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

后端开发React - 2 JSX语法

程序员文章站 2022-06-22 11:42:36
后端开发学React - 2 JSX语法2.1 什么是JSX1. 定义React发明了JSX,利用HTML语法来创建虚拟DOM。React的核心机制之一就是可以在内存中创建虚拟的DOM元素。以此来减少对实际DOM的操作从而提升性能。JSX 即Javascript XML,它是对JavaScript 语法扩展。React 使用 JSX 来替代常规的 JavaScript。你也可以认为JSX其实就是JavaScript。当遇到 < ,JSX就当HTML解析,遇到 { 就当JavaScrip...

后端开发学React - 2 JSX语法

2.1 什么是JSX

1. 定义

React发明了JSX,利用HTML语法来创建虚拟DOM。
React的核心机制之一就是可以在内存中创建虚拟的DOM元素。以此来减少对实际DOM的操作从而提升性能。
JSX 即Javascript XML,它是对JavaScript 语法扩展。
React 使用 JSX 来替代常规的 JavaScript。
你也可以认为JSX其实就是JavaScript。当遇到 < ,JSX就当HTML解析,遇到 { 就当JavaScript解析。

2. 特点

  • 快,执行速度更快,因为它在编译为JavaScript代码后进行了优化。
  • 可以使用熟悉的语法仿照HTML来定义虚拟DOM。从而编写模板更加简单快速。

2.2 React中使用

1. 使用步骤

这里还是使用系列1里面的项目作为示例

  1. 编写 app.js ,并将其暴露
import React,{Component} from 'react'

class App extends Component {
    render() {
        return (
            <div>
                <input />
                <ul>
                    <li>曼城</li>
                    <li>切尔西</li>
                </ul>
            </div>
        )
    }
}

export default App
  1. index.js 中将其编译后渲染到对应的 dom
import App from './App'

ReactDOM.render(<App />,document.getElementById('root'))

另:React中标签分为两种类型

  1. React组件类型(自定义,如上面的App)
  2. dom类型(div,span等)
    React渲染的时候通过首字母大小写来进行区分

2. 使用表达式

使用方式非常简单,把js代码写到{} 里面即可

app.js 作为示例,里面用到了三元运算符

import React,{Component} from 'react'

class App extends Component {
    render() {
        return (
            <div>
                <input />
                <ul>
                    <li>{true?'曼城':'曼联'}</li>
                    <li>切尔西</li>
                    <li>{100+100}</li>
                </ul>
            </div>
        )
    }
}

export default App

ps:

  1. JSX中是不可以用if else的
  2. js和xml部分都不要加引号,不然会被当做字符串解析

3. JSX中的注释

JSX中有两种注释方式

  1. 单行注释
class App extends Component {
    render() {
        return (
            <div>
            {
               //这是单行注释
            }
                <input />
                <ul>
                    <li>{true?'曼城':'曼联'}</li>
                    <li>切尔西</li>
                </ul>
            </div>
        )
    }
}
  1. 多行注释
class App extends Component {
    render() {
        return (
            <div>
            {
               /*
               这是多行注释
               */
            }
                <input />
                <ul>
                    <li>{true?'曼城':'曼联'}</li>
                    <li>切尔西</li>
                </ul>
            </div>
        )
    }
}

4. Fragment标签使用

正常在写React组件的时候,外层需要有个div 做一层包裹。
但是在Flex布局的时候就不能有这层包裹。所以就考虑引入<Fragment> 标签

  1. app.js 中引入Fragment
import React,{Component,Fragment} from 'react'
  1. 将最外侧<div> 换成 <Fragment>
import React,{Component,Fragment} from 'react'

class App extends Component {
    render() {
        return (
            <Fragment>
                <input />
                <ul>
                    <li>{true?'曼城':'曼联'}</li>
                    <li>切尔西</li>
                </ul>
            </Fragment>
        )
    }
}

export default App

2.3 JSX中注意点

1. class 需要改为 className

JSX中的class(css中的类)需要替换为className,因为如果用class会和React中的class(类)重名

<input className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />

2. html解析

如果需要将绑定的值直接当做html进行解析
需要加入这样一个属性:dangerouslySetInnerHTML={{__html:自定义变量}}
这样写的时候,相对于<li>{item}</li> 。这个{item} 就可以删除了

<ul>
    {
        this.state.list.map((item,index)=>{
            return (
                <li 
                    key={index+item}
                    onClick={this.deleteItem.bind(this,index)}
                    dangerouslySetInnerHTML={{__html:item}}
                >
                </li>
            )
        })
    }
</ul> 

3. label 中的 for 需要改为 htmlFor

如果我们想在点击label的时候就激活文本框,一般做法是在input上定义一个id,然后label加一个for属性,值为刚刚定义的id

    <label for="testInput">姓名:</label>
    <input id="testInput"/>

但是在JXS语法中会和循环的for重名,所以需要把 for 改为 htmlFor

    <label htmlFor="testInput">姓名:</label>
    <input id="testInput"/>

本文地址:https://blog.csdn.net/qq919694688/article/details/107534001