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

超、凢脫俗 2022-05-24 11:58 50阅读 0赞

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>;
    }

![20180526210903172][]

如果要卸载组建如何做呢

在调用它的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>

![20180526220031109][]

[20180526210903172]: /images/20220524/09402bbd5d414760a417a569fe92277b.png
[20180526220031109]: /images/20220524/eaf95ecd3d354b54a24b36ea888948ca.png