Add a button to switch from Fiber with time-slicing to Fiber without it
Giamir Buoncristiani committed
Mar 26, 2017 at 17:24 UTC
b62f851e64066770e7e7929372ced460a1784364
1 file changed
+25
-9
examples/fiber/index.html
+25
-9
@@ -126,16 +126,29 @@
126
class ExampleApplication extends React.Component {
127
constructor() {
128
super();
129
- this.state = { seconds: 0 };
129
+ this.state = {
130
+ seconds: 0,
131
+ useTimeSlicing: true
132
+ };
133
this.tick = this.tick.bind(this);
134
+ this.toogleTimeSlicing = this.toogleTimeSlicing.bind(this);
135
}
136
componentDidMount() {
137
this.intervalID = setInterval(this.tick, 1000);
138
}
139
tick() {
136
- ReactDOMFiber.unstable_deferredUpdates(() =>
137
- this.setState(state => ({ seconds: (state.seconds % 10) + 1 }))
138
- );
140
+ if (this.state.useTimeSlicing) {
141
+ // Update is time-sliced.
142
+ ReactDOMFiber.unstable_deferredUpdates(() => {
143
+ this.setState(state => ({ ...state, seconds: (state.seconds % 10) + 1 }));
144
+ });
145
+ } else {
146
+ // Update is not time-sliced. Causes demo to stutter.
147
+ this.setState(state => ({ ...state, seconds: (state.seconds % 10) + 1 }));
148
+ }
149
+ }
150
+ toogleTimeSlicing() {
151
+ this.setState(state => ({ ...state, useTimeSlicing: !state.useTimeSlicing}));
152
}
153
componentWillUnmount() {
154
clearInterval(this.intervalID);
@@ -147,11 +160,14 @@
160
const scale = 1 + (t > 5 ? 10 - t : t) / 10;
161
const transform = 'scaleX(' + (scale / 2.1) + ') scaleY(0.7) translateZ(0.1px)';
162
return (
150
- <div style={{ ...containerStyle, transform }}>
151
- <div>
152
- <SierpinskiTriangle x={0} y={0} s={1000}>
153
- {this.state.seconds}
154
- </SierpinskiTriangle>
163
+ <div>
164
+ <button onClick={this.toogleTimeSlicing}>Turn { this.state.useTimeSlicing ? 'OFF' : 'ON' } Time Slicing</button>
165
+ <div style={{ ...containerStyle, transform }}>
166
+ <div>
167
+ <SierpinskiTriangle x={0} y={0} s={1000}>
168
+ {this.state.seconds}
169
+ </SierpinskiTriangle>
170
+ </div>
171
</div>
172
</div>
173
);