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/>
        )
    }
}