From fc4073060f44f4a5ccfda04f86e9604824cbbb49 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Fri, 2 Nov 2018 18:19:08 +0000 Subject: [PATCH] Deploy website Deploy website version based on 8c30b5a7402bd76149aa15d8757f1a053265cb5d --- docs/next/state.html | 21 ++++++++++++--------- docs/next/state/index.html | 21 ++++++++++++--------- 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/docs/next/state.html b/docs/next/state.html index c96c394c2d3..81ebfd5e755 100644 --- a/docs/next/state.html +++ b/docs/next/state.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.

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.