react中数据承载的两种方式(props和state)

props: 自己可以设置默认属性，也可以从外部传入属性，但是外部传入的属性，自己只能用，不能用来修改

state: 一般由自己控制，自己可以进行状态的更改。

state状态

类组件

一般书写：

• 状态一般放在constructor进行定义的

• react中推荐采用setState，就可以实现数据改变，视图更新操作了

• setState方法是异步的，如果想要获取更新后的最新状态，需要写在第二个参数中

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

let a = 1
class Counter extends React.Component{
	constructor(){
        super()
        this.state={
			count:1
        }
	}
    handleClick=()=>{
    
    //这种形式的 setState() 也是异步的，并且在同一周期内会对多个 setState 进行批处理
		thuis.setState({
			count:this.state.count+1
		})
    }
	render(){
		return(
			<div>
				<p>counter=============== {this.state.count}</p>    
                <button onClick={this.handleClick}>更改counter</button>
			</div>
		)
	}
}

这种形式的 setState() 也是异步的，并且在同一周期内会对多个 setState 进行批处理
                 Object.assign() 
                 this.setState({
                    count:this.state.count+1
                })
                this.setState({
                    count:this.state.count+1
                })
                this.setState({
                    count:this.state.count+1
                }) 

如果后续状态取决于当前状态，我们建议使用 updater 函数的形式代替（里面出入参数，每次执行当前的都是在执行完上一个的基础上执行的）

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

函数组件应用state

在类组件中，我们可以在构造函数中 this.state = {count:1}

在函数式组件中，如何定义组件状态呢？

可以采用React 16.8 useState 这个hooks来去解决

const App=props=>{
        //定义了一个状态 count=1
        //定义了一个更改状态的方法 setCount
        const [count,setCount] = React.useState(1)

        return(
            <div>
                App------{count}    
                <p onClick={()=>{setCount(count+1)}}>数字加一</p>
            </div>
        )
    }