iOS开发者对于React Native的看法（CLM）

>当我第一次尝试ReactNative的时候，我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道< React 范例 在React中，所有UI的组件都被放置在render（）方法中，并且被stat

>当我第一次尝试ReactNative的时候，我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道<

 

React 范例

在React中，所有UI的组件都被放置在render（）方法中，并且被state状态控制。你的render（）方法定义了UI在各种状态是如 何展现的。当调用setState()的时候，React会找到需要改变的部分并替你修改。想象一个简单的视图，拥有一个“Hello World”标签和按钮。每点击一下按钮，标签会在“Hello World”和“Goodbye World”之间切换。在Objective－C中，我在按钮的句柄中需要一些难堪的if声明，就像下面一样。 

1. if([label.text isEqual:@”HelloWorld”]){
2. label.text =@”GoodbyeWorld”;
3. }else{
4. label.text =@”HelloWorld”;
5. }

这样很有用，但是这种UI代码和我第一次创建这个标签的地方（可能在代码中，也可能在界面构建器里）完全脱节。在React中，我们会在state状态中定义一个buttonClicked的bool变量，在render()函数中，标签看起来会是这样的:

1. <Text>
2. {this.state.buttonClicked ? ‘Hello World’ : ‘Goodbye World’}</Text>

并且我们的按钮句柄也会非常简单

1. 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而不用回到最初的界面。