{"body":"","commit":{"revision":"b62f851e64066770e7e7929372ced460a1784364","shortRevision":"b62f851e64","authorName":"Giamir Buoncristiani","authorEmail":"giamir@thoughtworks.com","subject":"Add a button to switch from Fiber with time-slicing to Fiber without it","authoredAt":"2017-03-26T17:24:26+01:00"},"parents":["c47f334ac9c77e930f4fbb2dee83a488132a2880"],"files":[{"status":"M","path":"examples\/fiber\/index.html"}],"patch":"diff --git a\/examples\/fiber\/index.html b\/examples\/fiber\/index.html\nindex 7a56ca0b9d..a62f2bfcaf 100644\n--- a\/examples\/fiber\/index.html\n+++ b\/examples\/fiber\/index.html\n@@ -126,16 +126,29 @@\n class ExampleApplication extends React.Component {\n constructor() {\n super();\n- this.state = { seconds: 0 };\n+ this.state = {\n+ seconds: 0,\n+ useTimeSlicing: true\n+ };\n this.tick = this.tick.bind(this);\n+ this.toogleTimeSlicing = this.toogleTimeSlicing.bind(this);\n }\n componentDidMount() {\n this.intervalID = setInterval(this.tick, 1000);\n }\n tick() {\n- ReactDOMFiber.unstable_deferredUpdates(() =>\n- this.setState(state => ({ seconds: (state.seconds % 10) + 1 }))\n- );\n+ if (this.state.useTimeSlicing) {\n+ \/\/ Update is time-sliced.\n+ ReactDOMFiber.unstable_deferredUpdates(() => {\n+ this.setState(state => ({ ...state, seconds: (state.seconds % 10) + 1 }));\n+ });\n+ } else {\n+ \/\/ Update is not time-sliced. Causes demo to stutter.\n+ this.setState(state => ({ ...state, seconds: (state.seconds % 10) + 1 }));\n+ }\n+ }\n+ toogleTimeSlicing() {\n+ this.setState(state => ({ ...state, useTimeSlicing: !state.useTimeSlicing}));\n }\n componentWillUnmount() {\n clearInterval(this.intervalID);\n@@ -147,11 +160,14 @@\n const scale = 1 + (t > 5 ? 10 - t : t) \/ 10;\n const transform = 'scaleX(' + (scale \/ 2.1) + ') scaleY(0.7) translateZ(0.1px)';\n return (\n-

\n-

\n- \n- {this.state.seconds}\n- <\/SierpinskiTriangle>\n+

\n+

dillon1000/react

Files changed