定制shouldComponentUpdate

多组件优化

import React from 'react'

class App extends React.Component {
  constructor(props){
    super(props)
    this.state={
      num:1,
      title:'tyrmars',
      name:'zhang'
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(){
    this.setState({
      num:this.state.num+1
    })
  }
  render() {
    const
    return (
      <div>
       <h2>I am App</h2>
       <button onClick={this.handleClick}>b1</button>
       <Demo title={this.state.title}></Demo>
      </div>
    )
  }
}

class Demo extends React.Component {
  render() {
    return (<h2>I am Demo，{this.props.title}</h2>)
  }
}

export default App

React16性能检测

通过在浏览器中在链接上加入/?react_pref。

通过此方法可以在浏览器默认的性能监视器Performance中查看性能改变

• test

通过定制shouldComponentUpdate来减少组件的render从而优化性能

主要就是对比现有的props和state与改变后的不同，如果相同就不会再次渲染

class Demo extends React.Component {
  shouldComponentUpdate(nextProps, nextState){
  if(nextProps.title === this.props.title){
    return false
  }
  return true
}
  render() {
    return (<h2>I am Demo，{this.props.title}</h2>)
  }
}

export default App