Permalink
Browse files

Remove shouldComponentUpdate policy from NavigationCard and Navigatio…

…nCardStack

Summary:
The `shouldComponentUpdate` policies were meant to be a built-in optimization, but it prevents rendering at unexpected times, which has been causing confusion. Apps can use normal react optimization techniques to avoid extra rendering- Navigation will no longer attempt to optimize the render tree

Addresses #7720

Reviewed By: hedgerwang

Differential Revision: D3649735

fbshipit-source-id: 9461620445a6a57a1635113df7ec4026c0d6b9d2
  • Loading branch information...
1 parent 380830e commit 6c4d3c39c670e087930fcdae566e82db4b081113 @ericvicenti ericvicenti committed with Facebook Github Bot 7 Aug 10, 2016
@@ -40,7 +40,6 @@ const NavigationPagerStyleInterpolator = require('NavigationPagerStyleInterpolat
const NavigationPointerEventsContainer = require('NavigationPointerEventsContainer');
const NavigationPropTypes = require('NavigationPropTypes');
const React = require('React');
-const ReactComponentWithPureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');
const StyleSheet = require('StyleSheet');
const View = require('View');
@@ -50,11 +49,6 @@ import type {
NavigationSceneRendererProps,
} from 'NavigationTypeDefinition';
-type SceneViewProps = {
- sceneRenderer: NavigationSceneRenderer,
- sceneRendererProps: NavigationSceneRendererProps,
-};
-
type Props = NavigationSceneRendererProps & {
onComponentRef: (ref: any) => void,
onNavigateBack: ?Function,
@@ -66,25 +60,6 @@ type Props = NavigationSceneRendererProps & {
const {PropTypes} = React;
-class SceneView extends React.Component<any, SceneViewProps, any> {
-
- static propTypes = {
- sceneRenderer: PropTypes.func.isRequired,
- sceneRendererProps: NavigationPropTypes.SceneRenderer,
- };
-
- shouldComponentUpdate(nextProps: SceneViewProps, nextState: any): boolean {
- return (
- nextProps.sceneRendererProps.scene.route !==
- this.props.sceneRendererProps.scene.route
- );
- }
-
- render(): ?ReactElement<any> {
- return this.props.sceneRenderer(this.props.sceneRendererProps);
- }
-}
-
/**
* Component that renders the scene as card for the <NavigationCardStack />.
*/
@@ -101,14 +76,6 @@ class NavigationCard extends React.Component<any, Props, any> {
style: PropTypes.any,
};
- shouldComponentUpdate(nextProps: Props, nextState: any): boolean {
- return ReactComponentWithPureRenderMixin.shouldComponentUpdate.call(
- this,
- nextProps,
- nextState
- );
- }
-
render(): ReactElement<any> {
const {
panHandlers,
@@ -135,10 +102,7 @@ class NavigationCard extends React.Component<any, Props, any> {
pointerEvents={pointerEvents}
ref={this.props.onComponentRef}
style={[styles.main, viewStyle]}>
- <SceneView
- sceneRenderer={renderScene}
- sceneRendererProps={props}
- />
+ {renderScene(props)}
</Animated.View>
);
}
@@ -38,7 +38,6 @@ const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleIn
const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
const NavigationPropTypes = require('NavigationPropTypes');
const React = require('React');
-const ReactComponentWithPureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');
const StyleSheet = require('StyleSheet');
const View = require('View');
@@ -112,14 +111,6 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
this._renderScene = this._renderScene.bind(this);
}
- shouldComponentUpdate(nextProps: Object, nextState: void): boolean {
- return ReactComponentWithPureRenderMixin.shouldComponentUpdate.call(
- this,
- nextProps,
- nextState
- );
- }
-
render(): ReactElement<any> {
return (
<NavigationTransitioner

0 comments on commit 6c4d3c3

Please sign in to comment.