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

晴川落雨發表於2018-04-08
React

前言

    有關一些資料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，根據自己的進度不定期更新，有理解不對的地方可以留言指出。複製程式碼

相關文章