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，根据本身的进度不按期更新，有理解不对的地方能够留言指出。复制代码