In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrived from the server, or from user input. You can also use a state container like Redux or Mobx to control your data flow. In that case you would use Redux or Mobx to modify your state rather than calling setState directly.
When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
diff --git a/docs/next/state/index.html b/docs/next/state/index.html index c96c394c2d3..81ebfd5e755 100644 --- a/docs/next/state/index.html +++ b/docs/next/state/index.html @@ -42,20 +42,23 @@ class Blink extends Component { constructor(props) { super(props); - this.state = {isShowingText: true}; + this.state = { isShowingText: true }; // Toggle the state every second - setInterval(() => { - this.setState(previousState => { - return { isShowingText: !previousState.isShowingText }; - }); - }, 1000); + setInterval(() => ( + this.setState(previousState => ( + { isShowingText: !previousState.isShowingText } + )) + ), 1000); } render() { - let display = this.state.isShowingText ? this.props.text : ' '; + if (!this.state.isShowingText) { + return null; + } + return ( - <Text>{display}</Text> + <Text>{this.props.text}</Text> ); } } @@ -75,7 +78,7 @@ // skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => BlinkApp); - +In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrived from the server, or from user input. You can also use a state container like Redux or Mobx to control your data flow. In that case you would use Redux or Mobx to modify your state rather than calling setState directly.
When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.