React生命周期

<!DOCTYPE html>    
<html>    
<head>    
<Meta charset="UTF-8" />    
<title>React生命周期</title>    
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>    
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>    
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>    
</head>    
<body>    
<div id="root"></div>    
<script type="text/babel">    
class Components extends React.Component {
 
  constructor(props){
    super(props);
    this.state = {}
  }
  componentWillMount(){
    console.log("实例化：componentWillMount")
  }
  componentDidMount(){
    console.log("实例化：componentDidMount")
  }
  componentWillReceiveProps(){
    console.log("存在期：componentWillReceiveProps")
  }
  shouldComponentUpdate(nextProps,nextState){
    console.log("存在期：shouldComponentUpdate",nextProps,nextState)
    return true;
  }
  componentWillUpdate(){
    console.log("存在期：componentWillUpdate")
  }
  componentDidUpdate(){
    console.log("存在期：componentDidUpdate")
  }
  render() {
    if(!this.props.reRender){
      console.log("实例化：render")
    }else{
      console.log("存在期：render")
    }
    return (
      <div>
        <br />
        请查看下面的console
        <br />
      </div>
    )
 
  }
}
Components.defaultProps = {
    text: "hello word",}
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {}
  }
  refresh(){
    return (e)=>{
      this.setState({
        reRender: true,})
    }
  }
  render(){
    return (
      <div>
        <Components reRender={this.state.reRender}/>  
        <button onClick={this.refresh()}>
            更新Component
        </button>
      </div>
    )
  }
}
ReactDOM.render(<App />,document.getElementById('root'));
</script>    
</body>    
</html>
React生命周期

猜你在找的React相关文章
