項(xiàng)目連接： 93Laer/MyDemo

前言：在安卓中我們可以通過自定義一個(gè)屬性例如一個(gè)Boolean來標(biāo)識(shí)是否刷新數(shù)據(jù)更新視圖，但是在RN中props一經(jīng)指定在生命周期類是不會(huì)再發(fā)生變化的，所以我們要達(dá)到和安卓一樣的效果是不能通過props來做的，RN專門為我們提供了state這個(gè)字段

state： 是RN 專門用來標(biāo)識(shí)是否重新渲染，通過屬性的值來更新數(shù)據(jù)，React 內(nèi)部會(huì)監(jiān)聽 state 的變化，一旦發(fā)生變化就會(huì)主動(dòng)觸發(fā)組件的 render() 方法來更新 Dom 結(jié)構(gòu)，另外state是組件私有的，是沒有辦法通過其他組件傳遞過來的。

state的使用：

• 1、構(gòu)造器外面

export default class StateTest extends Component {

//方式一
        state = {
            num: 0
        }


    // 構(gòu)造
    constructor(props) {
        super(props);
        // 每1000毫秒對(duì)num+1
        setInterval(() => {
            this.setState(previousState => {
                return {num: ++this.state.num};
            });
        }, 1000);
    }

    render() {
        var msg = this.state.num
        return (
            <Text size={32} color= {'red'}>{msg}</Text>
        );
    }
}

• 2、方式二構(gòu)造器內(nèi)（建議這樣）

    // 構(gòu)造
    constructor(props) {
        super(props);

//方式二
        this.state = {
            num: 0
        }

        // 每1000毫秒對(duì)num+1
        setInterval(() => {
            this.setState(previousState => {
                return {num: ++this.state.num};
            });
        }, 1000);
    }

 // 每1000毫秒對(duì)num+1
        setInterval(() => {
            //這種方式修改state是無效的，必須調(diào)用setState（）才能起作用
            //this.state= ++this.state.num;

            //this.setState(previousState => {
            //    return {num: ++this.state.num};
            //});
            //也可以這樣寫，這樣寫也就可以直接拿到props，有可能我們的業(yè)務(wù)需要用到props
            this.setState((prevState, props) =>{
                return {num: ++this.state.num};
            } );
        }, 1000);

prevState 是一個(gè)對(duì)之前狀態(tài)（previous state）的引用，我們是不能直接修改這個(gè)參數(shù)的值，要想修改 state 的值，我們應(yīng)該根據(jù) prevState 和 props 參數(shù)來創(chuàng)建一個(gè)新的 JavaScript 對(duì)象,例如：return {num: ++this.state.num};。

既然 我們要?jiǎng)?chuàng)建一個(gè)JavaScript對(duì)象，上面我們是通過一個(gè)函數(shù)來創(chuàng)建的，當(dāng)然我們可以直接傳入一個(gè)對(duì)象，而不是一個(gè)函數(shù)，例如：

this.setState({num: 18});

但是我們一般應(yīng)該不會(huì)這樣寫，畢竟我們在改變視圖的時(shí)候肯定會(huì)有一些邏輯需要處理

特別提示：作為一個(gè)安卓開發(fā)，我們第一反應(yīng)要改變state，可能是以以下方式來處理的

  // 每1000毫秒對(duì)num+1
        setInterval(() => {
            //這種方式修改state是無效的，必須調(diào)用setState（）才能起作用
            this.state= ++this.state.num;

            //this.setState(previousState => {
            //    return {num: ++this.state.num};
            //});
        }, 1000);

說明：setState() 方法會(huì)把對(duì)組件 state 的改變加入到隊(duì)列中，并且告訴 React 這個(gè)組件及其子組件需要重新渲染,React 并不能保證 setState() 一被調(diào)用 state 就能更新。所以，如果在調(diào)用 setState() 之后，馬上就讀取 this.state 的值的話，可能會(huì)出現(xiàn)誤差,所以setState(updater, callback) 方法的第二個(gè)參數(shù) callback 是一個(gè)可選參數(shù)，暫時(shí)未找到使用實(shí)例。