>当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道<
React 范例
在React中,所有UI的组件都被放置在render()方法中,并且被state状态控制。你的render()方法定义了UI在各种状态是如 何展现的。当调用setState()的时候,React会找到需要改变的部分并替你修改。想象一个简单的视图,拥有一个“Hello World”标签和按钮。每点击一下按钮,标签会在“Hello World”和“Goodbye World”之间切换。在Objective-C中,我在按钮的句柄中需要一些难堪的if声明,就像下面一样。
if([label.text isEqual:@”HelloWorld”]){
label.text =@”GoodbyeWorld”;
}else{
label.text =@”HelloWorld”;
}
这样很有用,但是这种UI代码和我第一次创建这个标签的地方(可能在代码中,也可能在界面构建器里)完全脱节。在React中,我们会在state状态中定义一个buttonClicked的bool变量,在render()函数中,标签看起来会是这样的:
<Text>
{this.state.buttonClicked ? ‘Hello World’ : ‘Goodbye World’}</Text>
并且我们的按钮句柄也会非常简单
this.setState({buttonClicked:!this.state.buttonClicked});
所有和可视化相关的代码都在同一地方,并且由状态控制一切。这使得理解和修复这段代码变的非常容易。
Flex box(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
这就是我一开始非常痛恨的UI布局工具,现在变成了RN中我最喜欢的事物之一。我承认一开始非常难以掌握,但一旦你开始使用, 它把 为多种不同尺寸屏幕构建UI这件事 变的机器快速和简单。我曾经对Xcode中的可视化界面编辑器十分热衷,相比于Flexbox,它的自动布局还是国语复杂。Flexbox使用的CSS式 样式使得样式重用变的和复制粘贴一样简单。其中最棒的事莫过于允许你在一瞬间将样式值改变到完美。
Live/Hot Reload(http://www.tuicool.com/articles/myYzmqB)
没错,想看看按钮右移5像素的样子就和command+s一样简单。React Native能够被设置为在iPhone模拟器中自动重绘当前画面而不重建Xcode工程。这非常厉害因为你不仅可以通过避免重新编译儿节省时间,你还能 够调整一个深度嵌套在应用中的界面,调整UI而不用回到最初的界面。