ReactNative（六）——利用RN状态机管理组件状态

状态机制的模式

1. this.state确定当前状态，this.setState改变当前状态。
2. 一般的通信有单向通信和双向通信：
   单向通信只管控制状态变化，双项通信则需要回调来确定之前通信的结果。

---

使用state的步骤

1. 首先在state中定义需要用到的状态变量

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

2. 在合适的地方使用该变量（这里以改变按钮的style为例，通过不同的状态控制按钮是否可用）

style={[styles.button, this.state.disabled && styles.disabledButton]}

3. 提供改变该变量的方法供外部使用

enable = () => {    this.setState({        disabled: false,    });};disable = () => {    this.setState({        disabled: true,    });};

完整代码

在单向控制的时候使用ref模式较合适。
在双项控制的时候（需要回调的时候）使用回调模式较合适。

Button.js

/** * Created by Jero on 2016/5/29. */import React, {Component} from 'react';import  {    StyleSheet,    TouchableOpacity,    Text,} from 'react-native';export default class Button extends Component {    // 构造    constructor(props) {        super(props);        // 初始状态        this.state = {disabled: false};    }    onPress = ()=> {        const {onPress} = this.props;        // Ref方案        /* 执行的onPress方法其实是父组件定义的fetchData方法，         这里的onPress的意思只是取出并执行传递过来的某个函数，而不是真正意义上的执行了onPress函数         比如传递过来的时候起名为onClick，那么这里取出来的时候也叫onClick，         记住只是一个普通的props传递。*/        // onPress();        // 回调方案        this.disable();        onPress(this.enable);    };    enable = () => {        this.setState({            disabled: false,        });    };    disable = () => {        this.setState({            disabled: true,        });    };    render() {        const {text} = this.props;        return (            <TouchableOpacity                disabled={this.state.disabled}                style={[styles.button, this.state.disabled && styles.disabledButton]}                onPress={this.onPress}>                <Text style={styles.buttonText}>{text}</Text>            </TouchableOpacity>        );    }}const styles = StyleSheet.create({    button: {        backgroundColor: 'green',        width: 100,        justifyContent: 'center',        padding: 10,        borderRadius: 15,    }, buttonText: {        textAlign: 'center',        fontSize: 16,    },    disabledButton: {        backgroundColor: 'gray',    },});

index.android.js

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    View,} from 'react-native';import Button from './src/components/Button';class StateRefsDemo extends Component {    // 1.Refs方案    // fetchData = ()=> {    //     // 禁用按钮点击事件    //     this.refs.button.disable();    //     // 获取数据    //     this.timer = setTimeout(()=> {    //         // 启用按钮    //         this.refs.button.enable();    //     }, 2000);    //    //    // };    // 2.回调方案    fetchData = (enableCallback)=> {            this.timer = setTimeout(()=> {                // 启用按钮                enableCallback();            }, 2000);    };    componentWillMount() {        this.timer && clearTimeout(this.timer);    }    render() {        return (            <View style={styles.container}>                <Button ref="button" onPress={this.fetchData} 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,    },});AppRegistry.registerComponent('StateRefsDemo', () => StateRefsDemo);