React有状态和无状态组件,State和SetState基本使用

有状态和无状态组件,State和SetState

1.有状态和无状态组件

1.函数组件又叫做无状态组件,类组件又叫有状态组件;

2.状态(state)就是数据;

3.函数组件没有自己的状态,只负责数据展示;

4.类组件有自己的状态,负责更新UI让页面动起来;

2.State和SetState

2.1 State的基本使用

1.状态(state)即数据,是组件内部的私有数据,只能在组件内部使用;

2.state的值是对象,表示一个组件中可以有多个组件;

3.通过this.state来获取状态;

calss App extends React.Component{
    constructor() {
        super()
        //第一种初始化方式
        this.state={
            count:0
        }
    }
    //第二种初始化方式
    state ={
        count:1
    }
    render() {
        return(
        	<div>计数器:{this.state.count}</div>
        )
    }
}

2.2 setState()修改状态

1.状态是可变的;

2.语法:this.setState(要修改的数据)

3.不要直接修改state中的值,这是错误的,需要通过 this.setState() 来进行修改;

4.setState()作用: 1.修改state,2.更新UI;

5.思想:数据驱动视图;

6.React底层会有监听,一旦调用了setState导致了数据的变化,就会重新调用一次render方法,重新渲染当前组件

class App extends React.Component{
    state={
        count:1
    }
	render() {
        return(
        	<div>
            	<div>计数器:{this.state.count} </div>
				<button onClick={()=>{
                    this.setState({
                        count:this.state.count+1
                    })
                }}> 点我计数<button/>
        )
    }
}