Merge pull request temando#80 from brendo/pure-components

Migrate to pure components where possible

Author: quangkhoa

package.json

@@ -61,6 +61,7 @@
     "jest": "^20.0.4",
     "json-loader": "^0.5.4",
     "node-sass": "^4.5.1",
+    "react-addons-perf": "^15.4.2",
     "react-test-renderer": "^15.5.4",
     "sass-loader": "^6.0.3",
     "style-loader": "^0.16.0",

src/components/BodyContent/BodyContent.js

@@ -11,10 +11,6 @@ export default class BodyContent extends Component {
   constructor (props) {
     super(props)
 
-    this.renderTabs = this.renderTabs.bind(this)
-    this.renderSchema = this.renderSchema.bind(this)
-    this.renderExamples = this.renderExamples.bind(this)
-
     this.state = {
       tab: 'schema'
     }

src/components/BodySchema/BodySchema.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import createFragment from 'react-addons-create-fragment'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import isEqual from 'lodash/isEqual'
 
 import Property from '../Property/Property'
 
@@ -11,15 +12,17 @@ export default class BodySchema extends Component {
   constructor (props) {
     super(props)
 
-    this.renderPropertyRow = this.renderPropertyRow.bind(this)
-    this.renderSubsetProperties = this.renderSubsetProperties.bind(this)
     this.onClick = this.onClick.bind(this)
 
     this.state = {
       expandedProp: []
     }
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    return !isEqual(nextState.expandedProp, this.state.expandedProp)
+  }
+
   render () {
     const { properties, styleVariation } = this.props
 

src/components/CopyButton/CopyButton.js

@@ -27,19 +27,13 @@ export default class CopyButton extends Component {
   }
 
   onClick (e) {
-    this.setState({
-      ...this.state,
-      tooltip: 'Copied'
-    })
+    this.setState({ tooltip: 'Copied' })
 
     this.props.onCopyClick(e)
   }
 
   onMouseOver (e) {
-    this.setState({
-      ...this.state,
-      tooltip: this.props.tooltip
-    })
+    this.setState({ tooltip: this.props.tooltip })
   }
 }
 

src/components/Description/Description.js

@@ -1,12 +1,12 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import classNames from 'classnames'
 import markdown from 'markdown-it'
 import PropTypes from 'prop-types'
 import './Description.scss'
 
 const cm = markdown('commonmark')
 
-export default class Description extends Component {
+export default class Description extends PureComponent {
   render () {
     const { isInline, description } = this.props
     const text = {

src/components/Header/Header.js

@@ -1,12 +1,13 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 
 import Description from '../Description/Description'
 import './Header.scss'
 
-export default class Header extends Component {
+export default class Header extends PureComponent {
   render () {
     const { title, description, version } = this.props
+
     return (
       <header id='header'>
         <h1>{title}</h1>

src/components/Indicator/Indicator.js

@@ -1,12 +1,12 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 
 import './Indicator.scss'
 
 const arrow = require('./arrow.png')
 
-export default class Indicator extends Component {
+export default class Indicator extends PureComponent {
   render () {
     const { status, className } = this.props
 

src/components/Method/Method.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import ScrollableAnchor from 'react-scrollable-anchor'
 
@@ -9,26 +9,16 @@ import Response from '../Response/Response'
 
 import './Method.scss'
 
-export default class Method extends Component {
-  constructor (props) {
-    super(props)
-
-    this.renderParameters = this.renderParameters.bind(this)
-    this.renderRequest = this.renderRequest.bind(this)
-    this.renderResponses = this.renderResponses.bind(this)
-  }
-
+export default class Method extends PureComponent {
   render () {
     const { method } = this.props
-    const parameters = method.parameters
-    const request = method.request
-    const responses = method.responses
+    const { summary, description, parameters, request, responses } = method
 
     return (
       <ScrollableAnchor id={method.link}>
         <div className='method'>
-          <h3>{method.summary}</h3>
-          {method.description && <Description description={method.description} />}
+          <h3>{summary}</h3>
+          {description && <Description description={description} />}
           {parameters && this.renderParameters(parameters)}
           {request && this.renderRequest(request)}
           {responses && this.renderResponses(responses)}

src/components/Navigation/Navigation.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import isEqual from 'lodash/isEqual'
 
 import NavigationTag from '../NavigationTag/NavigationTag'
 
@@ -16,6 +17,13 @@ export default class Navigation extends Component {
     }
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    const isHashDiff = this.props.location.hash !== nextProps.location.hash
+    const isTagsDiff = !isEqual(nextState.expandedTags, this.state.expandedTags)
+
+    return isHashDiff || isTagsDiff
+  }
+
   render () {
     const { navigation, location } = this.props
     const { expandedTags } = this.state

src/components/NavigationMethod/NavigationMethod.js

@@ -1,10 +1,10 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import './NavigationMethod.scss'
 
-export default class NavigationMethod extends Component {
+export default class NavigationMethod extends PureComponent {
   render () {
     const { method, isActive } = this.props