1. 程式人生 > >Raect Native之六 state的使用

Raect Native之六 state的使用

  1. 什麼是state?
    props是不可改變,只讀的。為了實現互動,就需要用到元件的state。我. 們將元件看為狀態機,UI是各種各樣的狀態,並在各種各樣的狀態之間可以切換,只需要改變元件的state,就會重新渲染UI。 state是元件私有的,是沒有辦法通過其他元件傳遞過來的

  2. 如何使用state?
    state的兩種宣告方式

    1. state = {
       size: 70,
    }
    
    2. constructor(props) {
        super(props);
        this.state ={
            size:60,
        }
    }
    
    
  3. state如何打氣球?

    export default class StateTestView extends Component {
    
       state = {
           size: 70,
       }
       constructor(props) {
           super(props);
           // this.state ={
           //     size:60,
           // }
       }
       render() {
           return <View>
               <Text
                   style={{ fontSize: 26 }}
                   onPress={() => {
                       this.setState({
                           size: this.state.size + 10
                       })
                   }}
               >我打呀打呀 </Text>
               <Image style={{ width:this.state.size, height:this.state.size ,top:30}} source={require('../state/image/qiqiu.png')} />
           </View>
       }
    }
    

每次呼叫setState時,BlinkApp 都會重新執行 render 方法重新渲染。這裡我們使用定時器來不停呼叫setState,於是元件就會隨著時間變化不停地重新渲染。