在 React 中,每一份 UI 正在或者将一直存活于 render() 方法中,并且通过“状态”控制。render() 方法定义了 UI 对应于每个状态的样子,并且通过调用 setState(),React 决定哪些需要改变并切实为你改变它。想象一个简单的视图,只有一个“Hello World”标签和一个按钮。每次点击按钮需要将标签在“Hello World”与“Goodbye World”之间切换。在 Objective-C 中,我需要在按钮的处理方法中写一些丑陋的if语句,像
if ([label.text isEqual:@”Hello World”]) {
label.text = @”Goodbye World”;
} else {
label.text = @”Hello World”;
}
它运行的挺好,但是那些UI代码完全与我之前创建标签的地方脱节了(可以在代码中或者在界面构建器中)。在 React 中,我们可以在我们的状态中定义一个 buttonClicked 的 bool 变量,那么 render() 方法中的标签就看起来是这样:
{this.state.buttonClicked ? ‘Hello World’ : ‘Goodbye World’}
然后我们的按钮处理方法就变成这么简洁:
this.setState({buttonClicked: !this.state.buttonClicked});