react之jsx语法

jsx语法的定义

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。

jsx语法的优点

1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2. 它的类型是安全的，在编译过程中就能发现错误。
3. 使用 JSX 编写模板更加简单快速。

使用jsx语法

安装插件

// babel 插件
npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D
// 安装能够识别转换jsx语法的包 babel-preset-react
npm i babel-preset-react -D  

添加 .babelrc 配置文件

    {
        "presets": ["env", "stage-0", "react"],
        "plugins": ["transform-runtime"]
    }

在项目中使用jsx语法

当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

 // 引用React、Component、ReactDOM
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'; 
 // 创建组件
 export default class Name extends Component { }
 // render函数
 render() {
     // 这里面可以做任何js操作最后return 一个dom结构就可以了
     return (
        <div></div>
     )
 }

jsx语法基本使用

渲染html

单个html

    ReactDOM.render(
        return (
            <h1>张培跃</h1>
        )
    )

多个html

    ReactDOM.render(
        return (
            <div>
                <h1>张培跃</h1>
                <h2>欢迎学习 React</h2>
                <p>今天天气不错，挺风和日丽的！</p>
            </div>
        )
    )

以变量的形式

    var myInfo=<h1>我好帅！我好苦恼啊！</h1>;
    ReactDOM.render(
        return myInfo;
    )

注意：不能在最外层添加多个标签，在最外面套一个div就行了,不然会报错，特别是渲染列表多重循环的时候

jsx使用style

    ReactDOM.render(
        let ys = {color: yellow};
        return (
            <div> // 不包起来会报错
                <div style={{color: red}}> </div>   // 内联 
                <div style={ys}> </div> // 变量的形式
                <div style={judge ? {color: red} : ys}> </div>  // 三元表达式
            </div>
        )
    )

jsx中渲染部分dom

    ReactDOM.render(
        return (
            <div>
                {
                  judge ？ 
                  <div className="yes"></div>  // 因为clas在js中是关键字保留字 不能使用所以用的className
                  :
                  <div className="no"></div>
                }
            </div>
        )
    )

jsx中数组渲染

    let arr=[
        <h1>你是风儿</h1>,
        <h2>我是沙</h2>,
        <h3>缠缠绵绵到天涯</h3>
    ];
    let arr= [你是风儿, 我是沙, 缠缠绵绵到天涯];
    ReactDOM.render(
        
        return (
            <div>
                {arr}                        // 数组语法
                arr.map((item, index)=> {    // 利用map属性
                    return <div key={index}>{item}</div>
                })
                list.map((item, index) => {  // 有时候后台给的数据嵌套了  双重嵌套
                    <div key={index}>
                        item.map(itemChild, indexChild) {  // 注意添加key 不添加直接报错
                            return <div key={index}>{item.mes}</div>
                        }
                    </div>        
                }) 
            </div>
        )
    )  

jsx注释

  ReactDOM.render(
        return (
            <div>
                // 单行注释
                <!--多行
                1231321
                12312
                1231
                注释-->
            </div>
        )
    )