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，根據本身的進度不按期更新，有理解不對的地方能夠留言指出。複製代碼