kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-22 19:48:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Only call onLayout when layout has actually changed

Browse Source 
Summary:
Developers are complaining about horrible lag (https://github.com/facebook/react-native/issues/11809) caused by PR https://github.com/facebook/react-native/pull/11222.

The issue was that hasNewLayout in yoga is actually a dirty bit and indicates that either you OR one of your children has a new layout. We still need to manually check whether the component's layout actually is different from before.

Reviewed By: sahrens

Differential Revision: D4597545

fbshipit-source-id: 27d4605afd00badfdcdacae740ee2e477adee929
This commit is contained in:
Andy Street
2017-02-22 09:56:52 -08:00
committed by Facebook Github Bot
parent 91b2dbb1de
commit 15429e333f
3 changed files with 80 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ReactAndroid/src/androidTest/java/com/facebook/react/tests/LayoutEventsTestCase.java
View File

@@ -28,8 +28,10 @@ public class LayoutEventsTestCase extends ReactAppInstrumentationTestCase {
* Creates a UI in JS and verifies the onLayout handler is called.
*/
public void testOnLayoutCalled() {
assertEquals(1, mStringRecordingModule.getCalls().size());
assertEquals(3, mStringRecordingModule.getCalls().size());
assertEquals("10,10-100x100", mStringRecordingModule.getCalls().get(0));
assertEquals("10,10-50x50", mStringRecordingModule.getCalls().get(1));
assertEquals("0,0-50x50", mStringRecordingModule.getCalls().get(2));
}
@Override

42
ReactAndroid/src/androidTest/js/LayoutEventsTestApp.js
View File

@@ -16,18 +16,58 @@ var View = require('View');
var RecordingModule = require('NativeModules').Recording;
const LAYOUT_SPECS = [
[10, 10, 100, 100],
[10, 10, 50, 50],
[0, 0, 50, 50],
[0, 0, 50, 50],
];
class LayoutEventsTestApp extends React.Component {
constructor() {
super();
this.state = {
specNumber: 0,
};
this.numParentLayouts = 0;
}
handleOnLayout = (e) => {
var layout = e.nativeEvent.layout;
RecordingModule.record(layout.x + ',' + layout.y + '-' + layout.width + 'x' + layout.height);
if (this.state.specNumber >= LAYOUT_SPECS.length) {
// This will cause the test to fail
RecordingModule.record('Got an extraneous layout call');
} else {
this.setState({
specNumber: this.state.specNumber + 1,
});
}
};
handleParentOnLayout = (e) => {
if (this.numParentLayouts > 0) {
// This will cause the test to fail - the parent's layout doesn't change
// so we should only get the event once.
RecordingModule.record('Got an extraneous layout call on the parent');
}
this.numParentLayouts++;
};
render() {
const layout = LAYOUT_SPECS[this.state.specNumber];
return (
<View
onLayout={this.handleParentOnLayout}
testID="parent"
style={{left: 0, top: 0, width: 500, height: 500}}>
<View
onLayout={this.handleOnLayout}
testID="container"
style={{left: 10, top: 10, width: 100, height: 100}}/>
style={{left: layout[0], top: layout[1], width: layout[2], height: layout[3]}}/>
</View>
);
}
}