mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Remove IncrementalPresenter
Summary: This component no longer has any internal callsites and was never exposed in the public API! Changelog: [General][Removed] Removing experimental IncrementalPresenter component Reviewed By: rickhanlonii Differential Revision: D18828704 fbshipit-source-id: 931254c4328b93b946a7995e7d9d44cb5aeb6a7b
This commit is contained in:
Eli White
committed by
Facebook Github Bot
Facebook Github Bot
parent
2ee11711e0
commit
0ef0d3167e
@@ -1,202 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const ReactNative = require('react-native');
|
||||
const {
|
||||
InteractionManager,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} = ReactNative;
|
||||
|
||||
const Incremental = require('./Incremental');
|
||||
const IncrementalGroup = require('./IncrementalGroup');
|
||||
const IncrementalPresenter = require('./IncrementalPresenter');
|
||||
|
||||
const JSEventLoopWatchdog = require('../Interaction/JSEventLoopWatchdog');
|
||||
|
||||
const performanceNow = require('fbjs/lib/performanceNow');
|
||||
|
||||
InteractionManager.setDeadline(1000);
|
||||
JSEventLoopWatchdog.install({thresholdMS: 200});
|
||||
|
||||
let totalWidgets = 0;
|
||||
|
||||
class SlowWidget extends React.Component<
|
||||
$FlowFixMeProps,
|
||||
{
|
||||
ctorTimestamp: number,
|
||||
timeToMount: number,
|
||||
...
|
||||
},
|
||||
> {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
ctorTimestamp: performanceNow(),
|
||||
timeToMount: 0,
|
||||
};
|
||||
}
|
||||
render() {
|
||||
this.state.timeToMount === 0 && burnCPU(20);
|
||||
return (
|
||||
<View style={styles.widgetContainer}>
|
||||
<Text style={styles.widgetText}>
|
||||
{`${this.state.timeToMount || '?'} ms`}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
componentDidMount() {
|
||||
const timeToMount = performanceNow() - this.state.ctorTimestamp;
|
||||
this.setState({timeToMount});
|
||||
totalWidgets++;
|
||||
}
|
||||
}
|
||||
|
||||
let imHandle;
|
||||
function startInteraction() {
|
||||
imHandle = InteractionManager.createInteractionHandle();
|
||||
}
|
||||
function stopInteraction() {
|
||||
InteractionManager.clearInteractionHandle(imHandle);
|
||||
}
|
||||
|
||||
function Block(props: Object) {
|
||||
const IncrementalContainer = props.stream
|
||||
? IncrementalGroup
|
||||
: IncrementalPresenter;
|
||||
return (
|
||||
<IncrementalContainer name={'b_' + props.idx}>
|
||||
<TouchableOpacity
|
||||
onPressIn={startInteraction}
|
||||
onPressOut={stopInteraction}>
|
||||
<View style={styles.block}>
|
||||
<Text>
|
||||
{props.idx + ': ' + (props.stream ? 'Streaming' : 'Presented')}
|
||||
</Text>
|
||||
{props.children}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</IncrementalContainer>
|
||||
);
|
||||
}
|
||||
|
||||
const Row = (props: Object) => <View style={styles.row} {...props} />;
|
||||
|
||||
class IncrementalExample extends React.Component<mixed, {stats: ?Object, ...}> {
|
||||
static title: string = '<Incremental*>';
|
||||
static description: string =
|
||||
'Enables incremental rendering of complex components.';
|
||||
start: number;
|
||||
constructor(props: mixed, context: mixed) {
|
||||
super(props, context);
|
||||
this.start = performanceNow();
|
||||
this.state = {
|
||||
stats: null,
|
||||
};
|
||||
(this: any)._onDone = this._onDone.bind(this);
|
||||
}
|
||||
_onDone() {
|
||||
const onDoneElapsed = performanceNow() - this.start;
|
||||
setTimeout(() => {
|
||||
const stats = {
|
||||
onDoneElapsed,
|
||||
totalWidgets,
|
||||
...JSEventLoopWatchdog.getStats(),
|
||||
setTimeoutElapsed: performanceNow() - this.start,
|
||||
};
|
||||
stats.avgStall = stats.totalStallTime / stats.stallCount;
|
||||
this.setState({stats});
|
||||
console.log('onDone:', stats);
|
||||
}, 0);
|
||||
}
|
||||
render(): React.Node {
|
||||
return (
|
||||
<IncrementalGroup disabled={false} name="root" onDone={this._onDone}>
|
||||
<ScrollView style={styles.scrollView}>
|
||||
<Text style={styles.headerText}>
|
||||
Press and hold on a row to pause rendering.
|
||||
</Text>
|
||||
{this.state.stats && (
|
||||
<Text>Finished: {JSON.stringify(this.state.stats, null, 2)}</Text>
|
||||
)}
|
||||
{Array(8)
|
||||
.fill()
|
||||
.map((_, blockIdx) => {
|
||||
return (
|
||||
<Block key={blockIdx} idx={blockIdx} stream={blockIdx < 2}>
|
||||
{Array(4)
|
||||
.fill()
|
||||
.map((_b, rowIdx) => (
|
||||
<Row key={rowIdx}>
|
||||
{Array(14)
|
||||
.fill()
|
||||
.map((_c, widgetIdx) => (
|
||||
<Incremental
|
||||
key={widgetIdx}
|
||||
name={'w_' + widgetIdx}>
|
||||
<SlowWidget idx={widgetIdx} />
|
||||
</Incremental>
|
||||
))}
|
||||
</Row>
|
||||
))}
|
||||
</Block>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
</IncrementalGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function burnCPU(milliseconds) {
|
||||
const start = performanceNow();
|
||||
while (performanceNow() < start + milliseconds) {}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
scrollView: {
|
||||
margin: 10,
|
||||
backgroundColor: 'white',
|
||||
flex: 1,
|
||||
},
|
||||
headerText: {
|
||||
fontSize: 20,
|
||||
margin: 10,
|
||||
},
|
||||
block: {
|
||||
borderRadius: 6,
|
||||
borderWidth: 2,
|
||||
borderColor: '#a52a2a',
|
||||
padding: 14,
|
||||
margin: 5,
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
widgetContainer: {
|
||||
backgroundColor: '#dddddd',
|
||||
padding: 2,
|
||||
margin: 2,
|
||||
},
|
||||
widgetText: {
|
||||
color: 'black',
|
||||
fontSize: 4,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = IncrementalExample;
|
||||
@@ -1,80 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const Incremental = require('./Incremental');
|
||||
const React = require('react');
|
||||
|
||||
const PropTypes = require('prop-types');
|
||||
|
||||
const infoLog = require('../Utilities/infoLog');
|
||||
|
||||
let _groupCounter = -1;
|
||||
const DEBUG = false;
|
||||
|
||||
import type {Props, Context} from './Incremental';
|
||||
|
||||
/**
|
||||
* WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will
|
||||
* not be reliably announced. The whole thing might be deleted, who knows? Use
|
||||
* at your own risk.
|
||||
*
|
||||
* `<Incremental>` components must be wrapped in an `<IncrementalGroup>` (e.g.
|
||||
* via `<IncrementalPresenter>`) in order to provide the incremental group
|
||||
* context, otherwise they will do nothing.
|
||||
*
|
||||
* See Incremental.js for more info.
|
||||
*/
|
||||
class IncrementalGroup extends React.Component<
|
||||
Props & {disabled?: boolean, ...},
|
||||
> {
|
||||
context: Context;
|
||||
_groupInc: string;
|
||||
UNSAFE_componentWillMount() {
|
||||
this._groupInc = `g${++_groupCounter}-`;
|
||||
DEBUG && infoLog('create IncrementalGroup with id ' + this.getGroupId());
|
||||
}
|
||||
|
||||
getGroupId(): string {
|
||||
const ctx = this.context.incrementalGroup;
|
||||
const prefix = ctx ? ctx.groupId + ':' : '';
|
||||
return prefix + this._groupInc + this.props.name;
|
||||
}
|
||||
|
||||
getChildContext(): Context {
|
||||
if (this.props.disabled || this.context.incrementalGroupEnabled === false) {
|
||||
return {
|
||||
incrementalGroupEnabled: false,
|
||||
incrementalGroup: null,
|
||||
};
|
||||
}
|
||||
return {
|
||||
incrementalGroupEnabled: true,
|
||||
incrementalGroup: {
|
||||
groupId: this.getGroupId(),
|
||||
incrementalCount: -1,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
return (
|
||||
<Incremental onDone={this.props.onDone} children={this.props.children} />
|
||||
);
|
||||
}
|
||||
}
|
||||
IncrementalGroup.contextTypes = {
|
||||
incrementalGroup: PropTypes.object,
|
||||
incrementalGroupEnabled: PropTypes.bool,
|
||||
};
|
||||
IncrementalGroup.childContextTypes = IncrementalGroup.contextTypes;
|
||||
|
||||
module.exports = IncrementalGroup;
|
||||
@@ -1,102 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const IncrementalGroup = require('./IncrementalGroup');
|
||||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
const View = require('../Components/View/View');
|
||||
|
||||
import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
|
||||
import type {LayoutEvent} from '../Types/CoreEventTypes';
|
||||
import type {Context} from './Incremental';
|
||||
|
||||
/**
|
||||
* WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will
|
||||
* not be reliably announced. The whole thing might be deleted, who knows? Use
|
||||
* at your own risk.
|
||||
*
|
||||
* `<IncrementalPresenter>` can be used to group sets of `<Incremental>` renders
|
||||
* such that they are initially invisible and removed from layout until all
|
||||
* descendants have finished rendering, at which point they are drawn all at once
|
||||
* so the UI doesn't jump around during the incremental rendering process.
|
||||
*
|
||||
* See Incremental.js for more info.
|
||||
*/
|
||||
type Props = $ReadOnly<{|
|
||||
name: string,
|
||||
disabled?: boolean,
|
||||
onDone?: () => mixed,
|
||||
onLayout?: (event: LayoutEvent) => mixed,
|
||||
style?: ViewStyleProp,
|
||||
children?: React.Node,
|
||||
|}>;
|
||||
|
||||
class IncrementalPresenter extends React.Component<Props> {
|
||||
context: Context;
|
||||
_isDone: boolean;
|
||||
|
||||
static contextTypes:
|
||||
| any
|
||||
| {|
|
||||
incrementalGroup: React$PropType$Primitive<any>,
|
||||
incrementalGroupEnabled: React$PropType$Primitive<boolean>,
|
||||
|} = {
|
||||
incrementalGroup: PropTypes.object,
|
||||
incrementalGroupEnabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
constructor(props: Props, context: Context) {
|
||||
super(props, context);
|
||||
this._isDone = false;
|
||||
(this: any).onDone = this.onDone.bind(this);
|
||||
}
|
||||
onDone() {
|
||||
this._isDone = true;
|
||||
if (
|
||||
this.props.disabled !== true &&
|
||||
this.context.incrementalGroupEnabled !== false
|
||||
) {
|
||||
// Avoid expensive re-renders and use setNativeProps
|
||||
this.refs.view.setNativeProps({
|
||||
style: [this.props.style, {opacity: 1, position: 'relative'}],
|
||||
});
|
||||
}
|
||||
this.props.onDone && this.props.onDone();
|
||||
}
|
||||
render(): React.Node {
|
||||
let style: ViewStyleProp;
|
||||
if (
|
||||
this.props.disabled !== true &&
|
||||
this.context.incrementalGroupEnabled !== false &&
|
||||
!this._isDone
|
||||
) {
|
||||
style = [this.props.style, {opacity: 0, position: 'absolute'}];
|
||||
} else {
|
||||
style = this.props.style;
|
||||
}
|
||||
return (
|
||||
<IncrementalGroup
|
||||
onDone={this.onDone}
|
||||
name={this.props.name}
|
||||
disabled={this.props.disabled}>
|
||||
<View
|
||||
children={this.props.children}
|
||||
ref="view"
|
||||
style={style}
|
||||
onLayout={this.props.onLayout}
|
||||
/>
|
||||
</IncrementalGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = IncrementalPresenter;
|
||||
Reference in New Issue
Block a user