React学习笔记—基础语法(二)

九、setState的第二个回调函数 && 第二种写法

1、setState的第二个回调函数:

因为 setState 方法是异步的,修改了数据之后,在第二个回调函数里才能拿到修改后的值

这个函数需要等状态更新到 dom 树上才会执行,类似于 vuethis.$nextTick

import React, { Component } from 'react'

export default class State extends Component {
    state = {
        myname: "liutao"
    }
    render() {
        return (
            <div>
                {this.state.myname}
                <button onClick={this.handleClick}>click</button>
            </div>
        )
    }
    handleClick = () => {
        this.setState({
            myname: "kerwin"
        }, () => {
            console.log(this.state.myname); // kerwin
        }) // 之后发生了什么?????
        /* 
            创建了虚拟dom
            diff对比(异步)
        */
        console.log(this.state.myname); // liutao1

    }
}

2、setState的第二种写法:

同一时间 loop 连续 setState 会进行合并

setState 里面可以直接传一个回调函数,参数为 prevState==> 上次修改后的最新值

import React, { Component } from 'react'

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

    handleAdd1 = () => {
        this.setState({
            count: this.state.count + 1
        })
        this.setState({
            count: this.state.count + 1
        })
        // 同一时间loop连续setState 会进行合并
    }

    handleAdd2 = () => {
        this.setState((prevState) => {
            return {
                count: prevState.count + 1
            }
        })
        this.setState((prevState) => {
            return {
                count: prevState.count + 1
            }
        })
        // 不会合并,队列
    }

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

十、React中隐藏与显示 && 创建与删除

1、使用三目运算符实现隐藏与显示:

import React, { Component } from 'react'
import "./css/index.css"

export default class App extends Component {
    state = {
        isHide: false
    }
    render() {
        return (
            <div>
                <button onClick={() => {
                    this.setState({
                        isHide: !this.state.isHide
                    })
                }}>show/hide</button>
                <div className={this.state.isHide ? "hide" : ''}>1111111</div>
            </div>
        )
    }
}

2、使用三目运算符创建与删除节点:

import React, { Component } from 'react'
import "./css/index.css"

export default class App extends Component {
    state = {
        isCreate: false
    }
    render() {
        return (
            <div>
                <button onClick={() => {
                    this.setState({
                        isCreate: !this.state.isCreate
                    })
                }}>create/delete</button>
                {
                    this.state.isCreate ?
                        <div>2222</div>
                        :
                        <div>333333</div>
                }
            </div>
        )
    }
}

十一、React中的默认属性与属性验证

1、对象属性和类属性的对比:

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

// ES6写法
class Test {
    a = "对象属性" // constructor
}

Test.a = "类属性"
console.log(Test.a); // 类属性
console.log(new Test().a); // 对象属性


// ES7写法
class Test {
    static a="类属性"
    a = "对象属性" // constructor
}

console.log(Test.a); // 类属性
console.log(new Test().a); // 对象属性

2、React中的属性验证(propTypes):

引入属性验证的包:

import MyPropTypes from 'prop-types' // 提供验证数据类型的方法

ES6写法的属性验证:

import React, { Component } from 'react'
import MyPropTypes from 'prop-types' // 提供验证数据类型的方法

class Navbar extends Component {
    render() {
        return (
            <div>
                <button>back</button>
                Navbar-----{this.props.mytitle}
                {
                    this.props.isShow ?
                        <button>home</button> : null
                }
            </div>
        )
    }
}

// 属性验证
Navbar.propTypes = {
    isShow: MyPropTypes.bool,
    mytitle: MyPropTypes.string
}


export default class App extends Component {
    render() {
        return (
            <div>
                <Navbar mytitle="home" isShow={false}></Navbar>
                <Navbar mytitle="list" isShow={true}></Navbar>
                <Navbar mytitle="detail" isShow={true}></Navbar>
            </div>
        )
    }
}

ES7写法的属性验证(static):

import React, { Component } from 'react'
import MyPropTypes from 'prop-types' // 提供验证数据类型的方法

class Navbar extends Component {
    // 属性验证
    static propTypes = {
        isShow: MyPropTypes.bool,
        mytitle: MyPropTypes.string
    }

    render() {
        return (
            <div>
                <button>back</button>
                Navbar-----{this.props.mytitle}
                {
                    this.props.isShow ?
                        <button>home</button> : null
                }
            </div>
        )
    }
}


export default class App extends Component {
    render() {
        return (
            <div>
                <Navbar mytitle="home" isShow={false}></Navbar>
                <Navbar mytitle="list" isShow={true}></Navbar>
                <Navbar mytitle="detail" isShow={true}></Navbar>
            </div>
        )
    }
}

3、React中的默认属性(defaultProps):

import React, { Component } from 'react'
import MyPropTypes from 'prop-types' // 提供验证数据类型的方法

class Navbar extends Component {
    // 默认属性
    static defaultProps = {
        isShow: true
    }

    render() {
        return (
            <div>
                <button>back</button>
                Navbar-----{this.props.mytitle}
                {
                    this.props.isShow ?
                        <button>home</button> : null
                }
            </div>
        )
    }
}


export default class App extends Component {
    render() {
        return (
            <div>
                <Navbar mytitle="home" isShow={false}></Navbar>
                <Navbar mytitle="list"></Navbar>
                <Navbar mytitle="detail"></Navbar>
            </div>
        )
    }
}

4、React中属性的简写方式:

import React, { Component } from 'react'
import MyPropTypes from 'prop-types' // 提供验证数据类型的方法

class Navbar extends Component {
    // 属性验证
    static propTypes = {
        isShow: MyPropTypes.bool,
        mytitle: MyPropTypes.string
    }

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

    render() {
        return (
            <div>
                <button>back</button>
                Navbar-----{this.props.mytitle}
                {
                    this.props.isShow ?
                        <button>home</button> : null
                }
            </div>
        )
    }
}

export default class App extends Component {
    render() {
        var obj = {
            mytitle: "测试",
            isShow: false
        }
        return (
            <div>
                <Navbar mytitle="home" isShow={false}></Navbar>
                <Navbar mytitle="list"></Navbar>
                <Navbar mytitle="detail"></Navbar>
                <Navbar mytitle="detail"></Navbar>
                {/* 属性简写 */}
                <Navbar {...obj}></Navbar> 
            </div>
        )
    }
}

十二、React中的插槽

1、例子:

import React, { Component } from 'react'

class Child extends Component {
    render() {
        return (
            <div>
                Child
                {this.props.children[0]}
                {this.props.children[1]}
            </div>
        )
    }
}

export default class App extends Component {
    render() {
        return (
            <div>
                <Child>
                    <div>11111</div>
                    <div>111115444444</div>
                </Child>
            </div>
        )
    }
}

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:React学习笔记—基础语法(二)

文章字数:1.4k

本文作者:Spicy boy

发布时间:2020-04-05, 23:58:49

最后更新:2021-03-08, 17:37:52

原始链接:http://www.spicyboy.cn/2020/04/05/React%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95-%E4%BA%8C/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏