Please correct me if my thought process differs from the orthodoxy of React.js..
I have a parent < MainViewController /> that has a <View /> child.
If a scrolling event happens in my <View />, then I want to show/hide a button in my parent < MainViewController />.
Unfortunately right now, I'm doing setState to toggle, but it rerenders parent, and consequentially, all of its children. Basically, it resets my entire app. Is there a simpler way to toggle hide/show without rerendering?
My relevant code :
var MainViewController = React.createClass({
getInitialState () {
return {
showAskQuestion: false,
};
},
toggleFloatingButton () {
this.setState({
showAskQuestion: !this.state.showAskQuestion
});
},
render () {
return (
<Container>
<UI.NavigationBar name="main" />
<UI.Button type="info" className={ this.state.showAskQuestion ? '' : 'hidden' } >
Ask A Question
</UI.Button>
<ViewManager name="main" defaultView="tabs">
<View name="tabs" component={TabViewController} toggleFloatingButton={this.toggleFloatingButton} />
</ViewManager>
</Container>
);
}
});
The core idea of React is that when something changes in a component, it re-renders the entire component. To prevent this from being horribly slow, React only renders it as far as a virtual representation of the DOM, then checks the virtual DOM against the real one and makes the minimum number of changes to get them in sync.
When you update the state in your component, React will build up the virtual representation, but it'll be almost identical to the real DOM. The only difference being the following attribute:
className={ this.state.showAskQuestion ? '' : 'hidden'}
The only piece of "actual" re-rendering React will do, is updating this attribute.
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加