后端开发React - 2 JSX语法

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

2. 在 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>
        )
    }
}

2. 多行注释

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'

2. 将最外侧<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