react（二）

上一章了解到了怎么安装react现在要介绍的是其一部分用法
对与新手来说下面两张图可以看一下。(￣▽￣*)

一开始要先在右下角切换语言 ψ(._. )>

1. react的jsx语法
只有一个根节点
{}写Javascript
数组可以直接写html标签
对象样式自动展开
{/* */}注释
类名用className

2. 模板语法

(1) 文本渲染
文本渲染 {}
{this.state.msg}
html渲染
dangerouslySetInnerHTML={{__html:xxx}}

import React, { Component } from 'react'
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
          msg: "你好阿坤",
        }
    }
    render() {
        return (
            <div>
             {/* 文本渲染 */}
                {this.state.msg}
                <div dangerouslySetInnerHTML={{ __html: this.state.msg }}></div>
            </div>
        );
    }
}

export default App;

(2) 条件渲染
三元运算符号
条件?<>:<>
&&符号
{条件&&<>}
(3)列表渲染
this.state.list.map(item=><h3 key={item}>{item}</h3>)

import React, { Component } from 'react'
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
          msg: "你好阿坤",
          isLog: false,
            list: ['vue', 'react', 'jQuery', 'js']
        }
    }
    render() {
        return (
            <div>
              {/* 列表渲染 */}
                {this.state.list.map(item => <h3 key={item}>{item}</h3>)}
             {/* 文本渲染 */}
                {this.state.msg}
                <div dangerouslySetInnerHTML={{ __html: this.state.msg }}></div>
                  {/* //条件渲染 */}
                {this.state.msg}
                {this.state.isLog ? <p>欢迎！！！阿鲲王者归来</p> : <p>请登录</p>}
                {this.state.isLog && <p>鲲山行</p>}
            </div>
        );
    }
}

export default App;

3.函数组件
无状态组件组件/视图组件/

function App {
   return (<></>)
}
export default App;

4. 类组件
有状态组件/容器组件/

import React,{Component} from 'react'

export default class App extends Component{
    render(){
        return(<></>)
    }
}

5. 事件
和普通事件一致，需要驼峰式写法
onClick={this.sayHi}
onClick={()=>{this.sayHi(参数)}}
onClick={this.sayHi.bind(this,参数)}

6. 更新状态
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: "你好阿坤",
            isLog: false,
            list: ['vue', 'react', 'jQuery', 'js']
        }
    }
    // sayHi(msg = "开心") {
    //     alert(msg)
    // }
    sayHi = (msg = "开心") => {
        alert(msg);
        console.log(msg);
    }
    render() {
        return (
            <div>
                {/* 更新数据 */}
                <button onClick={() => {
                    this.setState({
                        isLog: !this.state.isLog
                    }, () => {
                        console.log("切换完毕");
                    })
                }}>切换</button>
                {/* 事件 */}
                <button onClick={this.sayHi.bind(this, '化学方程式')}>传参</button>
                <button onClick={() => { this.sayHi('开心方程式') }}>传参1</button>
                <button onClick={this.sayHi}>问候</button>
                <button onClick={() => alert('新年快乐')}>问候*1</button>
                {/* 列表渲染 */}
                {this.state.list.map(item => <h3 key={item}>{item}</h3>)}
                {/* 文本渲染 */}
                {this.state.msg}
                <div dangerouslySetInnerHTML={{ __html: this.state.msg }}></div>

                {/* //条件渲染 */}
                {this.state.msg}
                {this.state.isLog ? <p>欢迎！！！阿鲲王者归来</p> : <p>请登录</p>}
                {this.state.isLog && <p>鲲山行</p>}
            </div>
        )
    }
}