当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 后端开发学React - 2 JSX语法

后端开发学React - 2 JSX语法

2020年07月24日  | 移动技术网IT编程  | 我要评论

后端开发学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

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网