zoukankan      html  css  js  c++  java
  • React Native中组件的props和state

    一、组件的属性(props)和状态(state)

      1.属性(props)

      它是组件的不可变属性(组件自己不可以自己修改props)。

      组件自身定义了一组props作为对外提供的接口,展示一个组件时只需要指定props作为节点的属性。

      一般组件很少需要对外公开方法(例外:工具类的静态方法等),唯一的交互途径就是props。所以说它也是父组件与子组件通信的桥梁。

      组件自己不可以自己修改props(即:props可认为是只读的),只可由其他组件调用它时在外部修改。

    1. 状态(state)

      它是组件的内部状态属性,主要用来存储组件自身需要的数据。

      除了初始化时可能由props来决定,之后就完全由组件自身去维护。

      组件中由系统定义了setState方法,每次调用setState时都会更新组件的状态,触发render方法重新渲染界面。

      需要注意的是render方法是被异步调用的,这可以保证同步的多个setState方法只会触发一次render,这样做是有利于提高性能的。

    二、props的基本使用

    在iOS开发中,可以使用代理、通知中心等多种方式进行值传递,但是在React Native中怎么实现值传递呢?那就需要用到props。

      1、在子组件中可以用this.props访问到父组件传递的值

    render(){
        return(
          <View style = {styles.container}>
            <Text style = {{fontSize:20,backgroundColor:'red'}}>姓名:{this.props.name}</Text>
          </View>
        );
      }

      在父组件中定义要传递的值

    render() {
        return (
          <PropsComponent
            name = "小张"
          />
        );
      }

      2、赋初值操作

      开发中,通常需要给一些属性值进行赋初值,下面看在RN中怎么实现?

      注意: 从 React v15.5 开始 ,React.PropTypes 助手函数已被弃用,我们建议使用 prop-types 库 来定义contextTypes。
    import React, {Component,PropTypes} from 'react’;//已经不能使用了

      更换为:

    import PropTypes from 'prop-types';
    static defaultProps={
        name:'小红',
        age:16,
      }

      通过上段代码就完成了对age进行赋初值操作。

    render(){
        return(
          <View style = {styles.container}>
            <Text style = {{fontSize:20,backgroundColor:'red'}}>姓名:{this.props.name}</Text>
            <Text style = {{fontSize:20,backgroundColor:'red'}}>年龄:{this.props.age}</Text>
          </View>
        );
      }

      3、类型检查

      开发中通常需要对某些特定属性进行特定限制,就需要用到类型检查操作了。

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number,
        sex: PropTypes.string.isRequired,
      }

      如果没有对sex进行赋值,则会提示一下警告信息。

      4、延展操作符

    render() {
        var params={name:'小张',age:18,sex:'男'};
        return (
          <PropsComponent
            name = {params.name}
            age = {params.age}
          />
        );
      }

      如上段代码所示,如果某对象有多个属性时,可以通过以上方式,进行定义要传递的值,但是如果有更多的属性时,该怎么操作,如果采用上面的方式,则会出现很多代码,于是乎ES6就出现了简单的方式。

    render() {
        var params={name:'小张',age:18,sex:'男'};
        return (
          <PropsComponent
             {...params}
          />
        );
      }    

    三、state的使用

      state: 是RN 专门用来标识是否重新渲染,通过属性的值来更新数据,React 内部会监听 state 的变化,一旦发生变化就会主动触发组件的 render() 方法来更新 Dom 结构,另外state是组件私有的,是没有办法通过其他组件传递过来的。  

      1、构造器外面

    export default class StateTest extends Component {
    
    //方式一
            state = {
                num: 0
            }
    
    
        // 构造
        constructor(props) {
            super(props);
            // 每1000毫秒对num+1
            setInterval(() => {
                this.setState(previousState => {
                    return {num: ++this.state.num};
                });
            }, 1000);
        }
    
        render() {
            var msg = this.state.num
            return (
                <Text size={32} color= {'red'}>{msg}</Text>
            );
        }
    }

      2、方式二构造器内(建议这样)

    // 构造
        constructor(props) {
            super(props);
    
    //方式二
            this.state = {
                num: 0
            }
    
            // 每1000毫秒对num+1
            setInterval(() => {
                this.setState(previousState => {
                    return {num: ++this.state.num};
                });
            }, 1000);
        }

    四、props和state区别

      上面讲完了生命周期,我们对props和state的不同点以及相同点作一个总结,加深大家理解。

      相同点

      1.不管是props还是state的改变,都会引发render的重新渲染。

      2.都能由自身组件的相应初始化函数设定初始值。

      不同点

      1.初始值来源:state的初始值来自于自身的getInitalState(constructor)函数;props来自于父组件或者自身getDefaultProps(若key相同前者可覆盖后者)。

      2.修改方式:state只能在自身组件中setState,不能由父组件修改;props只能由父组件修改,不能在自身组件修改。

      3.对子组件:props是一个父组件传递给子组件的数据流,这个数据流可以一直传递到子孙组件;state代表的是一个组件内部自身的状态,只能在自身组件中存在。

  • 相关阅读:
    Kinect 开发 —— 硬件设备解剖
    Kinect 开发 —— 引言
    (转)OpenCV 基本知识框架
    OpenCV —— 摄像机模型与标定
    OpenCV —— 跟踪与运动
    OpenCV —— 图像局部与分割(二)
    OpenCV —— 图像局部与部分分割(一)
    OpenCV —— 轮廓
    OpenCV —— 直方图与匹配
    OpenCV —— 图像变换
  • 原文地址:https://www.cnblogs.com/xjf125/p/10368865.html
Copyright © 2011-2022 走看看