vue2中有data来完成数据的操作，而react 使用的是state来完成state，来完成数据的操作。
直接来看state的代码

import React, { Component } from 'react'
export default class app extends Component {
    constructor(props){
        super(props)
        this.state={
            name:'小明'
        }
    }
    render() {
        return (
            <div>
                {this.state.name}
            </div>
        )
    }
}

在页面就可以看到小明了

图片.png

state数据怎么进行修改呢？它不是直接进行this.state.name='hello' ×××这不是正确的情况
this.setState({name:'hello'}) 这才是正确的修改值的方法 下面看完整的代码

import React, { Component } from 'react'

export default class app extends Component {
    constructor(props){
        super(props)
        this.state={
            name:'小明'
        }
    }
    componentDidMount(){
        this.setState({name:'hello'})
    }
    render() {
        return (
            <div>
                {this.state.name}
            </div>
        )
    }
}

图片.png

state很简单，但是也是有坑的，
setState()这个方法是异步的还是同步的吗？
可以异步，也可以同步。

先看异步的，不多说直接上代码

import React, { Component } from 'react'

export default class app extends Component {
    constructor(props){
        super(props)
        this.state={
            name:'小明',
            num:1
        }
    }
    componentDidMount(){
        this.setState({name:'hello'})
        this.setState({num:this.state.num+1})
        console.log(this.state.num)
    }
    render() {
        return (
            <div>
                {this.state.name}
            </div>
        )
    }
}

图片.png

从输出的结果直接就可以看出setState（）是异步的，输出的值是1，而不是2。

import React, { Component } from 'react'

export default class app extends Component {
    constructor(props){
        super(props)
        this.state={
            name:'小明',
            num:1
        }
    }
    componentDidMount(){
        this.setState({name:'hello'})
        this.setState({num:this.state.num+1})
        this.setState({num:this.state.num+1})
        console.log(this.state.num)
    }
    render() {
        return (
            <div>
                {this.state.name}
               <div>{this.state.num}</div> 
            </div>
        )
    }
}

图片.png

这个div中的结果也是2，不是3，也能看出来是异步的

那么怎么变成同步的呢

直接看代码

import React, { Component } from 'react'
export default class app extends Component {
    constructor(props){
        super(props)
        this.state={
            name:'小明',
            num:1
        }
    }
    componentDidMount(){
        this.setState({name:'hello'})
        this.setState({num:this.state.num+1},function(){console.log(this.state.num)})
        // this.setState({num:this.state.num+1})
        
    }
    render() {
        return (
            <div>
                {this.state.name}
               <div>{this.state.num}</div> 
            </div>
        )
    }
}

图片.png

在setState第二个参数调用方法，这样后面的方法就可以和前面的同步了

import React, { Component } from 'react'

export default class app extends Component {
    constructor(props){
        super(props)
        this.state={
            name:'小明',
            num:1
        }
    }
    componentDidMount(){
        this.setState({name:'hello'})
        this.setState((state)=>{state.num=state.num+1;})
        this.setState((state)=>{state.num=state.num+1})
        
        
    }
    render() {
        return (
            <div>
                {this.state.name}
               <div>{this.state.num}</div> 
            </div>
        )
    }
}

图片.png

使用的时候小心入坑