1.3props与state

先看看props：http://reactnative.cn/docs/0.44/props.html#content

官网的说法是：大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。

。。。看不懂。

不管他，看看代码。

代码也好像看不出啥，我们还是要先运行一下看看效果。果断复制Greeting类跟LotsOfGreetings里的内容到我们的工程里面去。

 

这里说明一下，类的名字class BGCommunity跟registerComponent里面的BGCommunity以及你的工程的名称要一样，不然会提示该类没有在应用中注册。

然后run一下:

。。。布局还有点问题，待会再调整。

但是可以看到他分别显示了三个name，那么结合可以看出，this.props拿到的应该是该控件的属性，然后拿出其中的name，然后通过Text控件显示出来。如果里面不止有name，还有个tip属性，那也就是通过this.props.tip拿出来然后使用。

搞定了再看下一个State: http://reactnative.cn/docs/0.44/state.html#content

官网对state的解释：我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state

再大概看一下他下面的例子，我理解为这个是个状态值（好像没说一样），就是说假如你把界面元素跟这个state绑定，那你state里面的值变的时候，界面显示的状态也会变。相当于安卓里面的RxAndroid。

先看第一部分

就是几个Blink类，里面有text属性。

再看看Blink类里面的实现：

constructor(props) {
    super(props);
    this.state= {showText:true};

    // 每1000毫秒对showText状态做一次取反操作
    setInterval(()=> {
        this.setState(previousState => {
            return { showText: !previousState.showText};
        });
    }, 1000);
}

这个是他的构造器，应该是这个类创建的时候会自动执行这个方法，

super(props);//执行父类的方法

this.state= {showText:true};//这里是在state放了一个showText元素，并将该元素赋值为true

下面一段就是取反啦，看看他的setState方法:

        this.setState(previousState => {
            return { showText: !previousState.showText};
        });

这里写得有点奇怪啊，按这样的写法，应该是先将previousState的showText取反（!previousState.showText），然后再将值赋给showText，然后再将这个键值对返回。但是返回的话是把值给previousState，还是返回给state？

按照一般的写法，应该是this.setState({showText:!this.state.showText});这样来说比较好理解，就是先把state里面showText的值取反（!this.state.showText），再将这个值赋给showText（this.setState({showText:xxx})）。

那么我们就一个版本一个版本地进化，来试试效果吧

 

this.setState({showText: !this.state.showText
});//能实现原效果，有效,感觉这样更直观易懂啊

this.setState(() => {showText:!this.state.showText
});//无效

this.setState(() => {
    return { showText: !this.state.showText};
});//有效

this.setState(previousState=> {
    return { showText: !this.state.showText};
});//有效

this.setState(previousState=> {
    return { showText: !previousState.showText};
});//有效

可以看出这里其实就是将 this.state的值作为一个参数previousState传了进去，previousState.showText跟this.state.showText是等价的；

然后要显示出效果来，还必须要通过return方法把值返回给state，不然这个showText只是作为形参，不对外面的state产生影响，而且这个跟java得Lambda写法很像啊，莫非就是？

不过感觉我等新手还是用最上面那种写法好，简单易懂。

 

然后就是渲染界面了

  render() {

    // 根据当前showText的值决定是否显示text内容

    let display = this.state.showText ? this.props.text : ' ';

    return (

      <Text>{display}</Text>

    );

 

这里let是声明一个变量，百度了一下跟java里面声明变量大体相同，但是有一点：

存在一个暂时性死区的概念，这点在后面使用中要注意。

再看代码，这里无非就是判断showText是否为true，是的话显示父类中声明的text里面的值，否的话显示空。

代码分析完之后，敲一遍到工程里面运行一下（熟悉下语法结构），大功告成！