React-setState进阶（react 进阶）

进阶说明：setState()是异步更新数据的

推荐语法：setState((state, props) => {}[, callback])

• 参数state： 表示最新的state。
• 参数props：表示最新的props。
• [callbak]：表示在状态更新（页面完成重新渲染）后，立即执行回调。

示例：

handleClick = () => {
    this.setState({
        count: this.state.count + 1 // 这里是 1 + 1
    })
   // 这种方式使用setState，并不依赖前面的setState，并且多次调用，也只会触发一次重新渲染
    this.setState({
        count: this.state.count + 1 // 这里是 1 + 1
    })

    // 推荐语法
    // 这个语法的好处就是第一个执行完成后，第二个开始执行
    this.setState(
    // 第一个参数
    (state, props) => {
        return {
            count: state.count + 1    // 这里是 1 + 1
        }
    },
    // 第二个参数
    () => {
        // 状态更新后并且DOM更新完成后，立即执行。
        console.log('状态更新完成：', this.state.count) // 等于2
        console.log(document.getElementById('title').innerText) // 等于2
    }
    )

    // 推荐语法
    // 基于第一个之后执行，这里的state是上一次执行完成后的结果
    this.setState((state, props) => {
        return {
            count: state.count + 1  // 这里是 2 + 1
        }
    })

    console.log('count: ', this.state.count) // 这里一直是 1
}

render(){
    return (
        <div>
            <h1 id="title">计数器：{this.state.count}</h1>
            <button onClick={this.handleClick}>+1</button>
        </div>
    )
}

#前端##每日一诗#

————————————————

噫吁嚱（yī xū xī），危乎高哉！蜀道之难，难于上青天！
蚕丛及鱼凫(fú)，开国何茫然！
尔来四万八千岁，不与秦塞通人烟。
西当太白有鸟道，可以横绝峨眉巅。
地崩山摧壮士死，然后天梯石栈相钩连。
上有六龙回日之高标，下有冲波逆折之回川。
黄鹤之飞尚不得过，猿猱欲度愁攀援。
青泥何盘盘，百步九折萦岩峦。
扪参历井仰胁息，以手抚膺坐长叹。

问君西游何时还？畏途巉（chán）岩不可攀。
但见悲鸟号古木，雄飞雌从绕林间。
又闻子规啼夜月，愁空山。
蜀道之难,难于上青天，使人听此凋朱颜！
连峰去天不盈尺，枯松倒挂倚绝壁。
飞湍瀑流争喧豗（huī），砯（pīng）崖转石万壑雷。
其险也如此，嗟尔远道之人胡为乎来哉！

剑阁峥嵘而崔嵬（weí），一夫当关，万夫莫开。
所守或匪亲，化为狼与豺。
朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。
锦城虽云乐，不如早还家。
蜀道之难,难于上青天，侧身西望长咨嗟！

- 蜀道难 [作者] 李白 [朝代] 唐