ReactNavtive框架教程（3）

原文：http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript

注意：全部图片放在了百度相冊空间，假设你看不到图片，请复制图片URL，然后粘贴到地址栏中进行查看。

接着，在styles中添加例如以下样式：

flowRight

}

由于我们将图片加入到了Images.xcasset资源包中，我们须要用require('image!house')语句获得图片在App包中的正确路径。在Xcode中，打开Images.xcassets 。你能够找到名为house的image set。

回到模拟器，按下Cmd+R 查看执行效果:

referer=21cb5f5092eef01f14032df5e483&x=.jpg" alt="" />

注意: 假设图片没有显示，却看到一个““image!house” cannot be found”的提示。则能够重新启动packager(在终端中输入npm start命令)。

组件的状态

每一个React组件都有一个state对象，它是一个键值存储对象。

在组件被渲染之前，我们能够设置组件的state对象。

打开SearchPage.js,在 SearchPage 类的 render()方法前。加入下面代码：

constructor(props) {

super(props);

this.state = {

searchString: 'london'

};

}

如今组件就有一个state对象了。同一时候state中存放了一个 searchString:london的键值对象。

然后在render方法中，改动TextInput元素为：

<TextInput

style={styles.searchInput}

value={this.state.searchString}

placeholder='Search via name or postcode'/>

这将改变 TextInput 的value 属性，即在TextInput中显示一个london的文本。

假设用户改动文本框中文本。则又怎么处理？

首先创建一个事件处理方法。在 SearchPage 类中添加一个方法：

onSearchTextChanged(event) {

console.log('onSearchTextChanged');

this.setState({ searchString: event.nativeEvent.text });

console.log(this.state.searchString);

}

首先从事件參数event中获得text属性，然后将它保存到组件的state中，并用控制台输出一些感兴趣的内容。

然后在TextInput的onChange事件属性中绑定这种方法：

<TextInput

style={styles.searchInput}

value={this.state.searchString}

onChange={this.onSearchTextChanged.bind(this)}

placeholder='Search via name or postcode'/>

一旦用户改变了文本框中的文本。这个函数马上就会被调用。

注意:  bind(this) 的使用有点特殊。JavaScript 中 this keyword的含义事实上和大部分语言都不相同，它就好比Swift语言中的self。

bind方法的调用使得onSearchTextChanged 方法中能够引用到this，并通过this引用到组件实例。

很多其它内容请參考 MDN pageon this。

然后，我们在render方法顶部、return语句之前加一条Log语句：

console.log('SearchPage.render');

通过这些log语句，你应该能明确大致发生了什么事情。

返回模拟器，按下Cmd+R。我们将看到文本框中一開始就有了一个london的字样，当你编辑这段文本后，控制台中的内容将显示：

log语句似乎有点不正确劲：

1.    组件初始化后调用 render() 方法

2.    当文本被改变， onSearchTextChanged() 被调用

3.    我们在代码中改变了组件的state 属性。因此render()方法会被调用

4.    onSearchTextChanged() 打印新的search string.

当React 组件的状态被改变时，都会导致整个UI被又一次渲染——全部组件的render方法都会被调用。

这样做的目的。是位了将渲染逻辑和组件状态的变化全然进行分离。

在其它全部的UI框架中。要么程序猿在状态改变时自己手动刷新UI，要么使用一种绑定机制在程序状态和UI之间进行联系。

就像我还有一篇文章 MVVMpattern with ReactiveCocoa所讲。

而在React中，我们不再操心状态的改变会导致那一部分UI须要刷新，由于当状态改变全部的UI都会刷新。

当然。你或许会操心性能问题。

难道每次状态改变时，整个UI都会被舍弃然后又一次创建吗？

这就是React真正智能的地方。每当UI要进行渲染时，它会遍历整个视图树并计算render方法。对照与当前UIKit视图是否一致，并将须要改变的地方列出一张列表，然后在此基础上刷新视图。也就是说，仅仅有真正发生变化的东西才会被又一次渲染。

ReactJS将一些新鲜的概念应用到了iOS App中，比方虚拟DOM和一致性。

删除上面加入的Log语句。