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