React Native State
React Native (State)
前回に続き、ReactNativeの説明を行います。 今回は、Stateに焦点を当てます。
Stateとは
component内で使用出来る値となります。 値が変更(setStateを用いる)されるとrenderが走り、該当のcomponentが 再描画されます。
コード
以下にコードを記述します。
class ChildrenState
で 親コンポーネント(ParentState)に
対して、propsを渡しています。
class ParentState
では、内部でカウンタを持ち、setStateで1秒ごとに
props(コンポーネント内部の変数)を変更しています。
propsが変更された際、renderメソッドが呼び出され、コンポーネントの再描画をしています。
class ParentState extends React.Component { constructor(props){ super(props); this.state = {isShowingText: true}; setInterval(() => { this.setState(previousState => { return { isShowingText: !previousState.isShowingText }; }); }, 1000); } render(){ let display = this.state.isShowingText ? this.props.text : ' '; return ( <Text>{display}</Text> ); } } export default class ChildrenState extends React.Component { render(){ return ( <View style={{alignItems: 'center', marginTop: 200}}> <ParentState text='state1' /> <ParentState text='state2' /> <ParentState text='state3' /> <ParentState text='state4' /> </View> ); } }