React生命周期

前端之家收集整理的这篇文章主要介绍了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>
原文链接:https://www.f2er.com/react/301447.html

猜你在找的React相关文章