02react基础语法

1.react基础

1.1react同步异步

import React, { Component } from 'react'

export default class App extends Component {
    state = {
        count: 1
    }
    render() {
        return (
            <div>
                {this.state.count}
                <button onClick={this.handleAdd1}>add1</button>
                <button onClick={this.handleAdd2}>add2</button>
            </div>
        )
    }

    handleAdd1 = () => {
        this.setState({
            count: this.state.count + 1
        })
        console.log(this.state.count)

        this.setState({
            count: this.state.count + 1
        })
        console.log(this.state.count)

        this.setState({
            count: this.state.count + 1
        },()=>console.log(this.state.count))
        
    }

    handleAdd2 = () => {

        setTimeout(() => {
            this.setState({
                count: this.state.count + 1
            })
            console.log(this.state.count)
    
            this.setState({
                count: this.state.count + 1
            })
            console.log(this.state.count)
    
            this.setState({
                count: this.state.count + 1
            })
            console.log(this.state.count)
        }, 0);
    }
}

/*
setState处在同步的逻辑中，异步更新状态，更新真实dom
setState处在异步的逻辑中，同步更新状态，更新真实dom

setState 接受第二个参数，第二个参数是回调函数，状态和dom更新完后就会被触发
*/

1.2属性props

import React, { Component } from 'react'
import Navbar from './Navbar'

export default class App extends Component {
    render() {
        return (
            <div>
                <div>
                    <h2>首页</h2>
                    <Navbar title="首页" leftshow={false}></Navbar>
                    {/* <Navbar title="首页" leftshow="false"></Navbar> 不用用引号，引号表示字符串 */}
                </div>
                <div>
                    <h2>列表</h2>
                    <Navbar title="列表" leftshow={true}></Navbar>
                </div>
                <div>
                    <h2>购物车</h2>
                    <Navbar title="购物车" leftshow={true}></Navbar>
                </div>

            </div>
        )
    }
}

1.3属性验证

import React, { Component } from 'react'
import Navbar from './Navbar'

export default class App extends Component {
    render() {
        return (
            <div>
                <div>
                    <h2>首页</h2>
                    <Navbar title="首页" leftshow={false}></Navbar>
                    {/* <Navbar title="首页" leftshow="false"></Navbar> 不用用引号，引号表示字符串 */}
                </div>
                <div>
                    <h2>列表</h2>
                    <Navbar title="列表" ></Navbar>
                </div>
                <div>
                    <h2>购物车</h2>
                    <Navbar title="购物车" leftshow={true}></Navbar>
                </div>

            </div>
        )
    }
}

import React, { Component } from 'react'
import zzPropTypes from 'prop-types'

console.log(zzPropTypes)

export default class Navbar extends Component {

    //属性验证
    static propTypes = {
        title: zzPropTypes.string,
        leftshow: zzPropTypes.bool
    }

    render() {
        console.log(this.props)
        let { title, leftshow } = this.props
        return (
            // <div>Navbar-{this.props.title}</div>

            <div>
                {leftshow && <button>返回</button>}
                Navbar-{title}
            </div>
        )
    }
}

//类属性
//参数类型验证
// Navbar.propTypes = {
//     title: zzPropTypes.string,
//     leftshow: zzPropTypes.bool
// }

1.4默认属性

import React, { Component } from 'react'
import zzPropTypes from 'prop-types'

console.log(zzPropTypes)

export default class Navbar extends Component {

    //属性验证
    static propTypes = {
        title: zzPropTypes.string,
        leftshow: zzPropTypes.bool
    }

    //默认属性
    static defaultProps = {
        leftshow: true
    }

    render() {
        console.log(this.props)
        let { title, leftshow } = this.props
        return (

            <div>
                {leftshow && <button>返回</button>}
                Navbar-{title}
            </div>
        )
    }
}

//默认值
// Navbar.defaultProps = {
//     leftshow: true
// }

1.5对象属性自动展开

import React, { Component } from 'react'
import Navbar from './Navbar'

export default class App extends Component {

    render() {
        var obj = {
            title: "nihao",
            leftshow: false

        }
        return (
            <div>
                <div>
                    <h2>首页</h2>
                    <Navbar title="首页" leftshow={false}></Navbar>
                    {/* <Navbar title="首页" leftshow="false"></Navbar> 不用用引号，引号表示字符串 */}
                </div>
                <div>
                    <h2>列表</h2>
                    <Navbar title="列表" ></Navbar>
                </div>
                <div>
                    <h2>购物车</h2>
                    <Navbar title="购物车" leftshow={true}></Navbar>
                </div>
                <div>
                    <h2>购物车2</h2>
                    {/* 对象属性自动展开,与python中的字典展开一致 */}
                    <Navbar {...obj}></Navbar> 
                </div>

            </div>
        )
    }
}

1.6函数式组件

import React from 'react'

export default function SideBar(props) {
    console.log(props)
    let { bg, position } = props
    return (
        <div style={
            {
                background: bg,
                 "200px",
                position: "fixed",
                right: 0
            }}>
            <ul>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
            </ul>
        </div>
    )
}

import React from 'react'

export default function SideBar(props) {
    console.log(props)
    let { bg, position } = props
    return (
        <div style={
            {
                background: bg,
                 "200px",
                position: "fixed",
                right: 0
            }}>
            <ul>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
            </ul>
        </div>
    )
}

import React, { Component } from 'react'
import zzPropTypes from 'prop-types'

console.log(zzPropTypes)

export default class Navbar extends Component {

    //属性验证
    static propTypes = {
        title: zzPropTypes.string,
        leftshow: zzPropTypes.bool
    }

    //默认属性
    static defaultProps = {
        leftshow: true
    }

    render() {
        console.log(this.props)
        let { title, leftshow } = this.props
        return (

            <div>
                {leftshow && <button>返回</button>}
                Navbar-{title}
            </div>
        )
    }
}

//默认值
// Navbar.defaultProps = {
//     leftshow: true
// }

1.7状态vs属性

import React, { Component } from 'react'

class Child extends Component {
    render() {
        return <div>
            child-{this.props.text}

            {/* 子组件修改属性会报错 */}
            {/* <button onClick={() => {
                this.props.text = "333333"
            }} >click 子</button> */}
        </div>
    }
}

export default class App extends Component {
    state = {
        text: "1111111"
    }
    render() {
        return (
            <div>
                <button onClick={() => {
                    // 属性可以由父组件修改
                    this.setState(
                        {
                            text: '2222'
                        }
                    )
                }}>click 父</button>
                {/* 属性能够从父组件获取 */}
                <Child text={this.state.text} />
            </div>
        )
    }
}

2.通信

2.1子传父

import React, { Component } from 'react'

class Navbar extends Component {
    render() {
        return <div style={{ background: "red" }}>
            <button onClick={() => {
                console.log("子通知父,让父的siShow取反")

                this.props.event() //调用父组件提供的函数来修改父组件中的变量,间接
            }}>click</button>
            <span>Navbar</span>
        </div>
    }
}

class Sidebar extends Component {
    render() {
        return <div style={{ background: "yellow" }}>
            <ul>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
            </ul>
        </div>
    }
}

export default class App extends Component {
    state = {
        isShow: false
    }

    handleEvent = () => {
        console.log("父组件定义的event事件")
        this.setState({
            isShow: !this.setState.isShow
        })
    }
    render() {
        return (
            <div>
                <Navbar event={this.handleEvent} />

                {this.state.isShow && <Sidebar />}
            </div>
        )
    }
}

/*
Siderbar隐藏和显示

父传子：属性
子传父：回调函数,父类提供一个方法，子类调用

*/

2.2父子通信版表单域（受控组件）

import React, { Component } from 'react'

class Field extends Component {
    render() {
        return <div style={{ background: "yellow" }}>
            <label>{this.props.label}</label>
            <input type={this.props.type} onChange={(evt) => {
                this.props.onChangeEvent(evt.target.value)
            }} value={this.props.value} />
        </div>
    }
}

export default class App extends Component {
    state = {
        // username: "",
        username: localStorage.getItem("username"),
        password: ""
    }
    render() {
        return (
            <div>
                <h1>登陆页面</h1>

                <Field label="用户名" type="text" onChangeEvent={(value) => {
                    // console.log(value)
                    this.setState({
                        username: value
                    })
                }} value={this.state.username} />
                <Field label="密码" type="password" onChangeEvent={(value) => {
                    // console.log(value)
                    this.setState({
                        password: value
                    })
                }} value={this.state.password} />
                <button onClick={() => {
                    console.log(this.state.username, this.state.password, '发送后端验证')
                }}>登陆</button>
                <button onClick={()=>{
                    this.setState({
                        username:"",
                        password:""
                    })
                }}>取消</button>
            </div>
        )
    }
}