ReactshouldComponentUpdate生命周期详解

<div id="root">div>
<script type="text/babel">
class Person extends React.Component{         //定义一个子组件Person
  constructor(props){
    super(props);
    this.state = {no:props.no+100}
  }
  shouldComponentUpdate(newProps,newState){
    console.log(newProps.no,newState.no)
    return (newProps.no%2==0 && newState.no%2==0) ? true: false;
  }
  componentWillUpdate(newProps,newState){        
    console.log('trigger:componentDidMount')
  }

  render (){
    return <div>
              <button onClick={e=>this.setState({no:this.state.no+1})}>子组件按钮(用于修改state)</button>
              <p>props.no:{this.props.no}</p>
              <p>state.no:{this.state.no}</p>
           </div>
  }
}

class App extends React.Component{      //定义一个父组件App,它会引用子组件，并且修改子组件的props
  constructor(props){
    super(props)
  }
  state = {no:1}
  render(){
    return  <div>
              <button onClick={e=>this.setState({no:this.state.no+1})}>父组件按钮(用于修改props)</button>
              <Person no={this.state.no} />
            </div>
  }
}
ReactDOM.render(<App/>,root)
script>