zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-06-05 19:24:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compute benchmark props before each iteration

Browse Source 
Fix a bug in the logic that was meant to perform component prop
computation in-between cycles.
This commit is contained in:
Nicolas Gallagher
2018-01-22 13:24:41 -08:00
parent 935970156c
commit ec8843fe90
3 changed files with 43 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/benchmarks/src/app/Benchmark/index.js
+14 -14
View File
@@ -74,7 +74,7 @@ type BenchmarkPropsType = {
}; };
type BenchmarkStateType = { type BenchmarkStateType = {
getComponentProps: Function, componentProps: Object,
cycle: number, cycle: number,
running: boolean running: boolean
}; };
@@ -100,9 +100,10 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
constructor(props: BenchmarkPropsType, context?: {}) { constructor(props: BenchmarkPropsType, context?: {}) {
super(props, context); super(props, context);
const cycle = 0;
this.state = { this.state = {
getComponentProps: props.getComponentProps, componentProps: props.getComponentProps({ cycle }),
cycle: 0, cycle,
running: false running: false
}; };
this._startTime = 0; this._startTime = 0;
@@ -110,7 +111,7 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
} }
componentWillReceiveProps(nextProps: BenchmarkPropsType) { componentWillReceiveProps(nextProps: BenchmarkPropsType) {
this.setState(state => ({ getComponentProps: nextProps.getComponentProps })); this.setState(state => ({ componentProps: nextProps.getComponentProps(state.cycle) }));
} }
componentWillUpdate(nextProps: BenchmarkPropsType, nextState: BenchmarkStateType) { componentWillUpdate(nextProps: BenchmarkPropsType, nextState: BenchmarkStateType) {
@@ -145,13 +146,11 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
render() { render() {
const { component: Component, type } = this.props; const { component: Component, type } = this.props;
const { getComponentProps, cycle, running } = this.state; const { componentProps, cycle, running } = this.state;
if (running && shouldRecord(cycle, type)) { if (running && shouldRecord(cycle, type)) {
this._samples[cycle] = { start: Timing.now() }; this._samples[cycle] = { start: Timing.now() };
} }
return running && shouldRender(cycle, type) ? ( return running && shouldRender(cycle, type) ? <Component {...componentProps} /> : null;
<Component {...getComponentProps({ cycle })} />
) : null;
} }
start() { start() {
@@ -165,15 +164,16 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
// Calculate the component props outside of the time recording (render) // Calculate the component props outside of the time recording (render)
// so that it doesn't skew results // so that it doesn't skew results
const getNextProps = const componentProps = getComponentProps({ cycle });
type === BenchmarkType.UPDATE // make sure props always change for update tests
? obj => ({ ...getComponentProps(obj), 'data-test': cycle }) if (type === BenchmarkType.UPDATE) {
: getComponentProps; componentProps['data-test'] = cycle;
}
this.raf = window.requestAnimationFrame(() => { this.raf = window.requestAnimationFrame(() => {
this.setState((state: BenchmarkStateType) => ({ this.setState((state: BenchmarkStateType) => ({
getComponentProps: getNextProps, cycle: state.cycle + 1,
cycle: state.cycle + 1 componentProps
})); }));
}); });
} }
packages/benchmarks/src/cases/SierpinskiTriangle.js
+28 -29
View File
@@ -53,35 +53,34 @@ class SierpinskiTriangle extends React.Component {
s /= 2; s /= 2;
return [ return (
<SierpinskiTriangle <React.Fragment>
components={components} <SierpinskiTriangle
depth={1} components={components}
key={1} depth={1}
renderCount={renderCount} renderCount={renderCount}
s={s} s={s}
x={x} x={x}
y={y - s / 2} y={y - s / 2}
/>, />
<SierpinskiTriangle <SierpinskiTriangle
components={components} components={components}
depth={2} depth={2}
key={2} renderCount={renderCount}
renderCount={renderCount} s={s}
s={s} x={x - s}
x={x - s} y={y + s / 2}
y={y + s / 2} />
/>, <SierpinskiTriangle
<SierpinskiTriangle components={components}
components={components} depth={3}
depth={3} renderCount={renderCount}
key={3} s={s}
renderCount={renderCount} x={x + s}
s={s} y={y + s / 2}
x={x + s} />
y={y + s / 2} </React.Fragment>
/> );
];
} else { } else {
return <span style={{ color: 'white' }}>No implementation available</span>; return <span style={{ color: 'white' }}>No implementation available</span>;
} }
yarn.lock
+1 -1
View File
@@ -7950,7 +7950,7 @@ styled-components@2.4.0:
stylis "^3.4.0" stylis "^3.4.0"
supports-color "^3.2.3" supports-color "^3.2.3"
styled-jsx@2.2.1, styled-jsx@^2.2.1: styled-jsx@2.2.1:
version "2.2.1" version "2.2.1"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.1.tgz#8b38b9e53e5d9767e392595ab1afdc8426b3ba5d" resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.1.tgz#8b38b9e53e5d9767e392595ab1afdc8426b3ba5d"
dependencies: dependencies: