React-Native入门（3） this、props和state使用

前言

    有关一些资料rn中文网解释的很简略，想看详细一点的文档可以搜索React和ES6的相关文档，仔细看看没准儿
你就豁然开朗了！
复制代码

this

个人理解

    有过Android开发经验的童鞋，对this这个对象都不陌生。使用起来很简单，但是就是要注意一下它的作用域。
复制代码

举个例子

    //箭头函数
    renderText1 = () => {
        return (
            <Text>name: {this.props.name}</Text>
        );
    }
    
    
    //普通函数
    renderText2() {
        return (
            <Text>name: {this.props.name}</Text>
        );
    }
    
    
    render() {     
        return (
            <View >
                {this.renderText1}
                {this.renderText2().bind(this)}
            </View>
            )
    }
复制代码

    这里箭头函数和普通函数最后显示的结果是一样的，但是官方推荐使用箭头函数（貌似是bind之后this指针回收
问题吧，具体原来还没找到）。这里还要指出一点，如果你调用普通函数写成{this.renderText2()}这样，那么外
部的this作用域就失效了，你运行代码就会报错。（找不到name的值）
复制代码

props

个人理解

    讲真要深入的分析它，笔者目前还做不到。
    其实要想使用好它，就先从字面意思上来，它的字面意思就是“属性”。做过Android的同学，第一次接触的时候
容易理解成Intent，就是使用上来说这种理解也没什么大的问题，但是它的作用比Intent要多，在ES6使用的特殊性也
不能类比Intent。说这么多估计要绕晕了，那么我们姑且就理解成值传递的工具吧！
复制代码

举个例子

 class TestProps extends Component {

    //指定属性的类型
    static propTypes = {name: PropTypes.string, age: PropTypes.string}

    //给属性设置默认值
    static defaultProps = {
        name: 'Solide'
    }

    render() {
        return (
            <Text>name: {this.props.name}         age: {this.props.age}</Text>
        );
    }
}
复制代码

    TestProps这个组件就设置好了Props的各种属性，使用的时候直接传递就可以了！
复制代码

    <TestProps age='30'/> //默认值

    <TestProps name='DouBi' 
               age='31'/>  //不使用默认值
复制代码

再举个例子

//启动端代码
<Text onPress={() => navigate('World', {name: 'DouBi', age: 31})}>Hello Hello</Text>

//接收端代码
render() {
        const { params } = this.props.navigation.state;
        return <View>
            <Text>name : {params.name}     age : {params.age}</Text>
        </View>
    }
复制代码

state

个人理解

    这个state很有味道，它和另外一个方法render()是联系起来的。怎么说呢？打个比方，用过Android的童鞋都
知道有一个叫做Adapter的东西，当他的数据改变的时候，你调用他的一个notify方法就能告诉UI去刷新。这个
state相当于把数据绑定了notify方法，只要它里面的数据有变更它就会去调用render()方法去渲染界面。
复制代码

举个例子

class Blink extends Component {
    constructor(props) {
        super(props);
        this.state = {showText: true};

        // 每1000毫秒对showText状态做一次取反操作
        setInterval(() => {
            //需要state里面的值，最好用setState方法
            this.setState(previousState => {
                //previousState 修改之前的state值
                return {showText: !previousState.showText};
            });
        }, 1000);
    }

    //每隔1s就会渲染一次，就出现象文字闪烁的效果
    render() {
        // 根据当前showText的值决定是否显示text内容
        let display = this.state.showText ? this.props.text : ' ';
        return (
            <Text>{display}</Text>
        );
    }
}
复制代码

Demo地址： https://github.com/yzj0487/StackNavigator

总结

    今天说的都是很基础的一些东西，不过还是要深入咀嚼一下，越是基础的东西使用的频率越高。笔者也是最近才
开始接触RN，根据自己的进度不定期更新，有理解不对的地方可以留言指出。复制代码