react

React是一个用于构建用户界面的javaScript库。

安装react步骤：

步骤一:打开黑窗口

步骤二:全局安装react

步骤三：创建项目 myreact是自己起的项目名，可以是要起的名字

步骤四：cd myreact (切换到自己的项目)

步骤五：npm start (打开项目)

jsx（javascript混合xml（html）语法格式）

目的：更好的在javascript中写html模板

特点：
1. 只有一个根节点
2. {} 写javascript
3. 数组可以直接写html标签
4. 对象样式自动展开
5. {/* */}注释
6. 类名用className

 条件渲染方法：

方法一、与运算符&&

条件&&元素

true&&中午鱼香肉丝 前面为true显示中午鱼香肉丝

false&&不显示  前面为false不显示（如下面条件渲染案例）

总结：

条件为真 &&右侧显示 条件为假 &&右侧不显示

方法二、三目运算符 

 条件？元素1：元素2

条件为真返回元素1，条件为假返回元素2  （如下面的案例条件渲染）

文本渲染：

普通文本渲染 {}

html文本渲染

dangerouslySetInnerHTML={{ __html: xxx }}

列表渲染：

用map()方法遍历

数组.map((item)=><h4 key={item}>{item}</h4>)

key是标识跟vue中的key的理念一样

事件 ：

与普通js事件一样只是命名采用小驼峰式（下面有案例说明怎么使用）

更新状态（State）：

this.setState({k:v})

this.setState({k:v},()=>console.log("执行完毕的回调函数"))  (案例如下)

import React, { Component } from 'react'

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: "<strong>放假</strong>回家很开心",
            isLog: false,
            list: ['vue', 'react', 'jquery', 'js']
        }
    }
    sayHi = (msg = "握手") => {
        alert(msg)
    }
    render() {
        return (
            <div>
                {/* 更新数据 */}
                <button onClick={()=>{this.setState({isLog:!this.state.isLog},()=>{
                    console.log("切换数据完成")
                })}}>切换</button>  
                {/* 事件 */}
                <button onClick={this.sayHi.bind(this, '哈哈哈')}>愿望-传参2</button>
                <button onClick={() => { this.sayHi('哈哈哈') }}>愿望-传参</button>
                <button onClick={this.sayHi}>愿望</button>
                <button onClick={() => alert('2022即将来临')}>点击</button>
                {/* 列表渲染 */}
                {this.state.list.map(item => <h4 key={item}>{item}</h4>)}
                {/* 文本渲染 */}
                {this.state.msg}
                <div dangerouslySetInnerHTML={{ __html: this.state.msg }}></div>
                {/* 条件渲染 */}
                {this.state.isLog ? <p>欢迎回来</p> : <p>请登录</p>}
                {this.state.isLog && <p>中午鱼香肉丝</p>}
            </div>
        )
    }
}

显示结果