React Native 笔记之Props、State、Ref使用

Props

props是React组件的输入内容。 它们是从父组件传递给子组件的数据。props 是只读的。 不应该以任何方式修改它们.

代码示例：

import React, { Component ,PropTypes} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    WebView
} from 'react-native';


export  default class Shop extends Component {

    /// 设置默认的属性值
    static defaultProps = {
        name:"小明",
        age:13
    }

    /// 属性的类型检查
    static propTypes = {
       name:PropTypes.string.isRequired(),/// 必须传递的
       age:PropTypes.age
    }

    render() {
        return (
            <View style={styles.container}>
                /*
                * 父组件传值则为传过来的值 否则为默认值
                * */
             <Text>{this.props.name} {this.props.age}</Text>
            </View>
        );
    }
}

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

State

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

一般来说，你需要在 constructor 中初始化state（译注：这是 ES6 的写法，早期的很多 ES5 的例子使用的是 getInitialState 方法来初始化 state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法.

代码示例

import React, { Component ,PropTypes} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    WebView
} from 'react-native';


export  default class Shop extends Component {
  //  初始状态
  //  state ={
  //     size:80
  //   }

    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            size:80,
        };
      }

    render() {
        return (
            <View style={styles.container}>
             <Text>{this.state.size} </Text>
             <Text onPress={()=>{
                 this.setState = ({
                     size:this.state.size+10
                 })
             }}>增加</Text>
            </View>
        );
    }
}

Ref

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。

代码示例

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 创建 ref 存储 textInput DOM 元素
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // 直接使用原生 API 使 text 输入框获得焦点
    // 注意：通过 "current" 取得 DOM 节点
    this.textInput.current.focus();
  }

  render() {
    // 告诉 React 我们想把 <input> ref 关联到构造器里创建的 `textInput` 上
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />

          
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}