Download as PDF, PPTX
![createElement(View, {}, [ createElement(View), createElement(View) ]) <View> <View /> <View /> </View> { type: View, props: { children: [ { type: View }, { type: View }, ] } }](https://image.slidesharecdn.com/dive-into-react-perfjsdc-2016-161024150322/75/Dive-into-React-Performance-6-2048.jpg)
![Anti Pure Render render() { return ( <PureComponent inlineFunc={() => {}} funcBind={func.bind(this)} arrayLiteral={[]} newArray={map(…)} objectLiteral={{}} newObject={assign({}, …)} > <NestedChild /> </PureComponent> ) }](https://image.slidesharecdn.com/dive-into-react-perfjsdc-2016-161024150322/75/Dive-into-React-Performance-14-2048.jpg)
Uploaded byChing Ting Wu
Dive into React Performance
The document discusses performance optimization techniques in React, emphasizing the importance of using the production version and minimizing unnecessary renders. It covers strategies such as utilizing React's lifecycle methods, handling state updates efficiently, and leveraging the React performance tool for profiling. Additionally, it briefly introduces React Fiber and its capabilities for rendering elements more effectively.
Dive into React Performance
- 1. Dive into ReactPerf CT Wu, 2016 @ JSDC Twitter: wu_ct Github: wuct Email: wu.chingting@gmail.com
- 2. Better performance leadsto better user experience
- 3. Use the productionversion of React
- 4. Use a bundler <scriptsrc="path/to/react.min.js"></script> <script src="path/to/react-dom.min.js"></script> process.env.NODE_ENV = "production" Use pre-built files
- 5. How does Reactwork?
- 6. createElement(View, {}, [ createElement(View), createElement(View) ]) <View> <View/> <View /> </View> { type: View, props: { children: [ { type: View }, { type: View }, ] } }
- 7.
- 8.
- 9. • Reduce callto React.createElement() • Avoid reconciliation • Avoid re-mounting
- 10. render() { return ( <table> <thead> <tr> <th>Header1</th> <th>Header 2</th> </tr> </thead> <tfoot> <tr> <td>Footer 1</td> <td>Footer 2</td> </tr> </tfoot> <tbody> { // ... } </tbody> </table> ) } const headerAndFooter = <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tfoot> <tr> <td>Footer 1</td> <td>Footer 2</td> </tr> </tfoot> render() { return ( <table> {headerAndFooter} <tbody> { // ... } </tbody> </table> ) }
- 11.
- 12. shoudComponentUpdate(nextProps, nextState) { if(/* You want to update */) { return true } return false }
- 13. Pure Render Optimization shoudComponentUpdate(nextProps,nextState) { return ( !shallowEqual(nextProps, this.props) || !shallowEqual(nextState, this.state) ) } class extends React.PureComponent { // ... } or
- 14. Anti Pure Render render(){ return ( <PureComponent inlineFunc={() => {}} funcBind={func.bind(this)} arrayLiteral={[]} newArray={map(…)} objectLiteral={{}} newObject={assign({}, …)} > <NestedChild /> </PureComponent> ) }
- 15. Static View Optimization importStaticContainer from 'react-static-container' shoudComponentUpdate() { return false } or
- 16. React Internal Bailout •Bailout when prevElement === nextElement • Don’t bailout when prevContext !== nextContext • React always create a new context • Don’t use setState() and getChildContext() in one component
- 17. class extends React.Component{ getChildContext() { return this.state } componentDidMount() { setInterval(() => this.setState({ time: this.state.time + 1 }) , 1000) } // ... }
- 18. • Updating isfaster than re-mounting • Don’t change the key or the type if you want to update
- 19. render() { return isDarkTheme ?<DarkApp /> : <LightApp /> } render() { <App dark={isDarkTheme} /> }
- 20. render () { return( <List> { data.map(item => <Item key={item.uniqueId} /> ) } </List> ) } render () { return ( <List> { data.map(item => <Item key={Math.random()} /> ) } </List> ) }
- 21. React Perf Tool •Currently, only supports the development version of React • Perf.start() • Perf.stop() • Perf.printWasted() • Perf.printOperations()
- 22. class Child extendsReact.Component { render() { return <div /> } } class App extends React.Component { state = { title: 'Foo' } render() { return ( <div> {this.state.title} <Child /> </div> ) } }
- 23. Perf.start() app.setState({ title: ‘bar’}) Perf.stop() Perf.printWasted()
- 24. class Child extendsReact.PureComponent { render() { return <div /> } }
- 25. Perf.start() app.setState({ title: ‘bar’}) Perf.stop() Perf.printWasted()
- 26. class App extendsReact.Component { state = { theme: 'light' } render() { return ( <div> { this.state.theme === 'light' ? <Light /> : <Dark /> } </div> ) } }
- 27. Perf.start() app.setState({ theme: 'dark'}) Perf.stop() Perf.printOperations()
- 28. class App extendsReact.Component { state = { theme: 'light' } render() { return ( <div> <Content theme={this.state.theme} /> </div> ) } }
- 29. Perf.start() app.setState({ theme: 'dark'}) Perf.stop() Perf.printOperations()
- 30. React Fiber • Isstill experimental • Prioritization • Return multiple elements from render • Try it now: npm i react-dom@15.4.0-rc.4 import ReactDOMFiber from 'react-dom/fiber'
- 31. Thanks! • Github: wuct •Twitter: wu_ct • wu.chingting@gmail.com