React Native中组件的props和state

青旅半醒 2021-12-14 16:57 293阅读 0赞

## 一、组件的属性(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][] [ 库][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进行赋值，则会提示一下警告信息。

![757139-20190213111905402-2016408769.png][]

### 　　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代表的是一个组件内部自身的状态，只能在自身组件中存在。

![757139-20190214114307344-955064207.png][]

转载于:https://www.cnblogs.com/xjf125/p/10368865.html

[prop-types]: https://www.npmjs.com/package/prop-types
[757139-20190213111905402-2016408769.png]: /images/20211214/6084363317d34781b71dc32c97519658.png
[757139-20190214114307344-955064207.png]: /images/20211214/2e0822293dfe4cfaa1d263d360853c02.png