组件变量和方法的调用 （生命周期

http://www.devio.org/

贾鹏辉的博园

装载

更新

卸载发现deBUg无法调试的时候，吧8081前的地址改为localhost即可

react。js的生命周期函数

componentWillMount(){

    console.log('componentWillMount')
}
componentDidMount(){
    console.log('componentDidMount')

}
componentWillReceiveProps(nextProps){
//组件在更新的时候嗲用的方法
    console.log('componentWillReceiveProps')
}
shouldComponentUpdate(nextProps){
     console.log('shouldComponentUpdate')
     return true
 }
 componentWillUpdate(nextProps,nextState){
    console.log('componentWillUpdate')
 }
 componentDidUpdate(prevProps,prevState){
    console.log('componentDidUpdate')
 }
 componentWillUnmount(){
    console.log('componentWillUnmount')
 }

在被调用的组件里定义变量

LiftcircleComponent .js

constructor(props) {
// constructor方法，这就是构造方法,完场组件的初始化
super(props);
    this.state={
    count:0,
}
// 用在子类的构造方法里，主要是调用父类的默认构造方法
}

在方法render方法里定义点击事件

render () {
    console.log('render')
    return <View>
    <Text
    style={{fontSize:20,backgroundColor:'red'}}
    onPress={()=>{
    this.setState({
        count:this.state.count+1,
        })
    }}
    >有本事你打我啊</Text>
    <Text style={{fontsize:20}}>被打了{this.state.count}次</Text>
    </View>;
}

如果要卸载组建如何做呢

在调用它的APP.js文件里

也要先定义变量，

 render() {
    var view=this.state.remove?null:<LiftcircleComponent/>;
    var text=this.state.remove?"让他复活":'干掉他'
    return (
      <View style={styles.container}>
          <Text
          style={{fontsize:20}}
          onPress={()=>{
          this.setState({
          remove:!this.state.remove
          })
          }}>{text}</Text>
          {view}

          {/*<LiftcircleComponent />*/}
        {/*<Text style={styles.welcome}>*/}
         {/*大傻逼*/}
        {/*</Text>*/}
        {/*<Text style={styles.instructions}>*/}
          {/*To get started, edit App.js*/}
        {/*</Text>*/}
        {/*<Text style={styles.instructions}>*/}
          {/*{instructions}*/}
        {/*</Text>*/}
      </View>
    );
  }
}

变量的导入与到处

在

ExportImport.js里定义

var name='熊爱明'
var age='22'
export {name,age}
//变量的导入

在APP.js里导出

import ExportImport,{name,age} from './ExportImport';

然后早render函数里导出

render() {


    return (
        <View style={styles.container}>
            <Text
                style={{fontsize:20}}
                >名字：{name}</Text>
            <Text
                style={{fontsize:20}}
            >年龄：{age}</Text>
        </View>
    );
}

在

ExportImport.js导出一个方法

// 方法的导出
export function sum(a,b) {
    return a+b;
}

在APP.js里导入

import ExportImport,{name,age,sum} from './ExportImport';

<Text style={{fontsize:20}}
 onPress={()=>{
  var result=sum(2,3);
  this.setState({
    result1:result
  })
}}
>2+3={this.state.result1}</Text>