{"commit":{"authoredAt":"2017-03-27T12:48:39-07:00","revision":"090efbdb175b1818b1864e33db5c0c36d583e329","authorName":"Andrew Clark","authorEmail":"acdlite@fb.com","shortRevision":"090efbdb17","subject":"Merge branch 'giamir-add_toggle_to_fiber_triangle_demo'"},"parents":["29d9710892f773b4d5081f1b77820d40d79f69d3","f6a64cad5dee29b50a2284e52aed353e7e7a5ee4"],"files":[{"status":"M","path":"examples\/fiber\/index.html"}],"patch":"diff --git a\/examples\/fiber\/index.html b\/examples\/fiber\/index.html\nindex 7a56ca0b9d..0d8ac00029 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.onTimeSlicingChange = this.onTimeSlicingChange.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 => ({ seconds: (state.seconds % 10) + 1 }));\n+ });\n+ } else {\n+ \/\/ Update is not time-sliced. Causes demo to stutter.\n+ this.setState(state => ({ seconds: (state.seconds % 10) + 1 }));\n+ }\n+ }\n+ onTimeSlicingChange(value) {\n+ this.setState(() => ({ useTimeSlicing: value }));\n }\n componentWillUnmount() {\n clearInterval(this.intervalID);\n@@ -147,17 +160,54 @@\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+

Time-slicing<\/h3>\n+
Toggle this and observe the effect<\/p>\n+ \n+ <\/div>\n+
\n+
\n+ \n+ {this.state.seconds}\n+ <\/SierpinskiTriangle>\n+ <\/div>\n <\/div>\n <\/div>\n );\n }\n }\n \n+ class Toggle extends React.Component {\n+ constructor(props) {\n+ super();\n+ this.onChange = this.onChange.bind(this);\n+ }\n+ onChange(event) {\n+ this.props.onChange(event.target.value === 'on');\n+ }\n+ render() {\n+ const value = this.props.value;\n+ return (\n+ \n+ \n+ {this.props.onLabel}\n+ \n+ <\/label>\n+ \n+ {this.props.offLabel}\n+ \n+ <\/label>\n+ <\/label>\n+ );\n+ }\n+ }\n+\n var start = new Date().getTime();\n function update() {\n ReactDOMFiber.render(\n","body":""}

dillon1000/react

Files changed