React Native学习总结第三天

1.0 组件的生命周期

9FC9FFAF-4FA5-40AA-A02E-8D69C450E9FB.png

• render中只做与渲染有关的操作，只读取、不修改任何数据（临时变量除外）

  • 因为界面的更改是经常的，所以render是经常触发的

  • 所以如果你有修改数据等操作，就会多次触发，使结果难以预料

  • 比如你执行setState，那么setState又触发render，就会导致死循环

• 随组件加载只执行一次的操作，放在WillMount或者DidMount中

  • 比如远程取首页数据（fetch），比如弹出提示框

• 记得在WillUnmount中销毁定时器和一些订阅事件

• props发生变化，使用WillReceiveProps来处理（比如将变动同步给state）

  componentWillReceiveProps(nextProps){
          this.setState({
  
            count:nextProps.time,
          })
        }
  

  
  import React, { Component } from 'react'
      import {
       AppRegistry,
       StyleSheet,
       Text,
       View,
      } from 'react-native'
  
      //这里写一个定时器组件 在ES5中需要导入第三方的定时器类
          class CountDown extends Component {
          state ={
          count : 5,
      };
          render(){
              const { count } = this.state;
               return  {count > 0 && {count}} 
  }
      //组件已经加载成功
       componentDidMount(){
           this.timer = setInterval(() => {
            const { count } = this.state;
              if (count === 0) {
                  return clearInterval(this.timer);
           }
               this.setState({
               count: count - 1,
           });
          }, 1000);
       }
          ////组件即将销毁 释放内存
          componentWillUnmount() {
              clearInterval(this.timer);
      }   
  }
  
      class App extends Component {
              render() {
               return (
                   
                   
                       
              
              
              )
          }
      }
  
      const styles = StyleSheet.create({
           container: {
           flex: 1,
           backgroundColor: '#F5FCFF',
          },
  
      })
  
  AppRegistry.registerComponent('App', () => App)
  
  

2018-01-19 10_00_49.gif

2.0 组件间通信(重点,难点)

• 父组件向子组件通信、子组件之间通信 (子控件调用父控件的函数或者属性 都是需要带入this.props.属性名或者函数名)

  • 1.父组件以自身的state作为子组件的props；父组件调用setState，于是子组件的props相应变化 (说明:Component中若使用state而不是props渲染，则需使用componentWillReceiveProps生命周期)

  • 通过ref调用子组件的方法

    • 写法1:推荐

    class App extends Component {
        render() {
            return (
                 this.countDown = instance
             } />
         )  
    }
          componentDidMount() {
       this.countDown.add(10086);
     }
    }
    
    

    • 写法2:老式写法

    class App extends Component {
    render() {
        return (
         
        )  
    }
    componentDidMount() {
        this.refs.countDown.add(10086);
    }
    }   
    

    下面是demo代码

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native'

//编写定时器组件
class CountDown extends Component {
  state ={
    count : 30,
  }
   render(){
     const {count}=this.state;
     return (
        {count}
     )
   }
  add = (time) =>{
    this.setState({
      count:this.state.count+time,
    })
  }

  componentDidMount(){
    this.timer=setInterval(()=>{
      const { count } =this.state;
      if (count == 0){
        return clearInterval(this.timer);
      }
      this.setState({
        count :count - 1,
      })
    },1000)
  }
  componentWillUnmount(){
    clearInterval(this.timer);
  }
}
class App extends Component {
  //es6的函数写法 addTime是方法名 ()参数名   =>{}执行的方法体
  addTime = () =>{
    this.a.add(10);

  }
  render() {
    return (
      
        
          延迟10秒
        
        
          {/*
             this.countDown = q}
            如何理解这句代码:CountDown是当前的组件类 q表示CountDown组件类的实例 q是实例的名字a 可以理解oc的 Person *p =[Person new];
            => 表示作用于的意思 我们都知道要想界面能够进行刷新 只能对当前的属性进行setState操作 所以刷新界面 只能对当前的属性进行操作,属性的变化
            变化就会引起界面的变化 所以用this.a 对q的植进行接收
          */}
          this.a = q}/>
        
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
})

AppRegistry.registerComponent('App', () => App)

2018-01-19 13_20_00.gif

• 子组件向父组件通信
  • 父组件将函数作为props传递给子组件，子组件在需要时调用，将数据作为函数参数传回(此谓之“回调”（callback). 下面的例子是带参数传递

    import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native'

//编写定时器组件
class CountDown extends Component {
  state ={
    count : 5,
  }
   render(){
     const {count}=this.state;
     return (
        {count}
     )
   }
timeup =() => {
  alert('时间到！');
  this.props.timeupParent && this.props.timeupParent(123);
}

  componentDidMount(){
    this.timer=setInterval(()=>{
      const { count } =this.state;
      if (count == 0){
        this.timeup();
        return clearInterval(this.timer);
      }
      this.setState({
        count :count - 1,
      })
    },1000)
  }
  componentWillUnmount(){
    clearInterval(this.timer);
  }
}
class App extends Component {

  timeupParent = (params) => {
    alert('我知道了'+params);
  }

  render() {
    return (
      
        
            {/*this.timeupParent与this.timeupParent()的区别
            this.timeupParent()表示函数的直接调用
            this.timeupParent 表示传的参数
            */}
          
        
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
})

AppRegistry.registerComponent('App', () => App)

2018-01-19 13_52_54.gif

• 动态列表的回调函数参数(重点:难以理解的是语法)

  D103C7B1-9E4A-4945-9827-721E45C07C38.png

    import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native'

//编写定时器组件
class CountDown extends Component {
  state ={
    count : 2,
  }
   render(){
     const {count}=this.state;
     return (
        {count}
     )
   }
timeup =() => {
  //alert('时间到！');
  //子控件调用父控件的函数或者属性 都是需要带入this.props.属性名或者函数名
  this.props.a && this.props.a('子组件的参数' +12312312);
}

  componentDidMount(){
    this.timer=setInterval(()=>{
      const { count } =this.state;
      if (count == 0){
        this.timeup();
        return clearInterval(this.timer);
      }
      this.setState({
        count :count - 1,
      })
    },1000)
  }
  componentWillUnmount(){
    clearInterval(this.timer);
  }
}
class App extends Component {

  timeupParent = (param1,param2) => {
   alert('我知道了' +param1);
   alert('我知道了' +param2);
  }

  state = {
    arr:['张三'],
  }

  render() {
    return (
      
        
          {
            this.state.arr.map(i =>{
              {/*如何理解: this.timeupParent('父组件的参数' +i,child)}/>
                this.timeupParent('父组件的参数' +i,child)表示调用函数
              */}
              return  this.timeupParent('父组件的参数' +i,child)}/>
            })
          }
        
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
})

AppRegistry.registerComponent('App', () => App)