React Native關鍵字詳解

state

通過getInitialState() 方法初始化state，在組件的生命週期中僅執行一次，用於設置組件的初始化 state 。
更新 state
通過this.setState()方法來更新state，調用該方法後，React會重新渲染相關的UI。
上面代碼是一個 FavoriteButton 組件，它的 getInitialState 方法用於定義初始狀態，也就是一個對象，這個對象可以通過 this.state 屬性讀取。當用戶點擊組件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以後，自動調用 this.render 方法，再次渲染組件。
初始化方式有2種

方式一:
  constructor(props){
    super(props);
    this.state={
      age:10,
    }
  }
方式二:
  state={
    age:10,
  }

心得：由於 this.props 和 this.state 都用於描述組件的特性，this.props 表示是隻讀,不改變的特性，而 this.state 是組件私有的,不能通過其他頁來修改,會隨着用戶互動而產生變化的特性。

Ref

ref是組件的一個屬性,通過ref來獲取該組件, 也就是說帶有red組件被渲染後指向該組件的引用
使用方式有兩種:

方式一:
    return ( 
      <View stlye ={styles.container}>
         <RefTest ref = "reftest"/>
         <Text style={{fontSize:20,backgroundColor:'blue'}}
               onPress={()=>{
                  var size = this.refs.reftest.getMount();
                   // var size = this.refs['reftest'].getMount();
                  console.log('niuniu','size: '+size);
                  this.setState({mount:size});
               }}
         >數量是.{this.state.mount}
         </Text> 
       </View>
    );
    或者

方式二:
    return ( 
      <View stlye ={styles.container}>
         <RefTest ref = {reftest=>{
           this.reftest=reftest
         }
         }/>
         <Text style={{fontSize:20,backgroundColor:'blue'}}
               onPress={()=>{
                  var size = this.reftest.getMount();
                  console.log('niuniu','size: '+size);
                  this.setState({mount:size});
               }}
         >數量是.{this.state.mount}
         </Text> 
       </View>
    );

Props

獲取組件的默認屬性

 static PropsTypes={
    name:String,
    mount:Number,
  };

 static defaultProps={
    name:'小米',
    mount:50,
    age:8
  };
  render (){
      return (
          <View>
          <Text style={{fontSize:20,backgroundColor:'red'}}>PropsTest {this.props.name+' 你的年紀是:'+this.props.age+'  成績排名是:'+this.props.mount}</Text>
          </View>
      )
  }
-------------------
render(){
return <PropsTest />
}
輸出: PropsTest 小米 你的年紀是8 成績排名是50

延展操作符

var prames = {mount:1,name:'小米2',age:12};
render(){
<HelloComponent {...prames} />
}

結構賦值

方式一
var prames = {mount:1,name:'小米2',age:12};
var {name,age}=parmes;
render(){
<HelloComponent name ={name}
                age ={age} />
}

方式二:
var prames = {mount:1,name:'小米2',age:12};
render(){
<HelloComponent name ={parmes.name}
                age ={parmes.age} />
}

導入與導出

1 組件的導入與導出
導出: export default class PropsTest extends Component {…}
導入:import PropsTest from ‘./PropsTest’;
注意:
ES5的方式導出:

var HelloComponent= React.createClass(
  {
    render (){
        return <Text style={{fontSize:50,backgroundColor:'red',marginTop:200}}>Hello:{this.props.name}</Text>
    }
  }
);
module.exports = HelloComponent;

2 常量的導出與導入
方式一:
導出:export var variable = ‘2’;
export default class HelloComponent extends Component {}
導入:import HelloComponent, {variable} from ‘./HelloComponent’; 表示導入HelloComponent組件以及HelloComponent組件中的variable

方式二:
導出:
var variable1 = ‘2’;
var variable2 = ‘1’;
export {variable1,variable2};
導入:import HelloComponent, {variable1,variable2} from ‘./HelloComponent’; 表示導入HelloComponent組件以及HelloComponent組件中的variable1,variable2
3 方法的導出與導入
導出:

export  var variable = '1';
export default class HelloComponent extends Component {
  render (){
      return (
         ...
      )
  }
}
export function sum(a,b){
  return a+b
}

導入: import HelloComponent, {variable,sum} from ‘./HelloComponent’; 表示導入HelloComponent組件以及HelloComponent組件中的變量variable 和函數sum

Class 類

導出類

export default class RefTest  {
  constructor(name,age,mount){
     this.name = name;
     this.age = age;
     this.mount = mount;
  }
   getMount(){
      return this.mount;
  }
   getInfo(){
       return '名字'+this.name+ '   年齡 '+ this.age +'  排名: '+ this.mount
   }
}

導入: import ClassTest from ‘./ClassTest’;
使用: this.stu = new ClassTest(‘小王,’,’3 ‘,’ 10’);

子類:

導出:
import ClassTest from './ClassTest';
export default class Children extends ClassTest  {

  constructor(name,age,mount){
      super(name,age,mount);
     this.name = name;
     this.age = age;
     this.mount = 20;
  }
  }

導入:import Children from './Children'
使用: this.chi = new Childen('xiaoxiao','34', '543');
輸出是:xiaoxiao 34 20