学习记录——react组件内部的状态state、setState

1. 类组件内部都会有相关的状态，通过改变状态就可以更新视图 类比vue中的data
2. 写法：state = {show: true}

//es7写法 类似vue中的data写法
    state = {
        show: true
    }

3. 通过组件实例就可以获取到组件状态 this.state.show
4. 改变状态让视图更新
   我们应该使用组件实例上的方法 setState去改变组件状态
   
   注意：state有多个状态的时候 改变其中一个状态别的状态不会受影响 会合并
5. 如果setState放在同步环境中执行 此时setState就是异步的
   如果setState放在异步环境中执行 此时setState就是同步的
   比如有两个按钮，
   点击Home，渲染的是[1, 2, 3, 4, 5, 6]
   点击Me，渲染的是 [1, 2, 3]

import React, { Component } from 'react'

export default class Index extends Component {
    state = {
        show: true,
        list: [1, 2, 3]
    }
    render() {
        return (
            <div>
                <button onClick={() => {
                    this.setState({
                        list: [1, 2, 3, 4, 5, 6]
                    })
                }}>Home</button>

                <button onClick={() => {
                    this.setState({
                        list: [1, 2, 3]
                    })
                }}>Me</button>


                <ul>
                    {this.state.list.map(item => <li key={item}>{item}</li>)}
                </ul>
            </div>
        )
    }
}

打开浏览器查看：可以成功切换


然后来看一下，当点击me或者home的时候，console.log输出一下list，观察list数组是改变前的还是改变后的


如果我们给home的点击事件里添加一个setTimeout的话

浏览器点击me，再点击home，得到了点击后改变的新数据

这就是上面说的，如果setState放在同步环境中执行 此时setState就是异步的，
如果setState放在异步环境中执行 此时setState就是同步的。
如果想拿到改变后的数组，要用到this.setState的第二个参数。

setState是有第二个参数的
作用是: 因为setState有时候是异步的 , 需要等到数据更新后获取更新的数据 此时setState就提供了第二个参数, 数据更新时候就会执行