React生命周期

发布时间：2020-12-15 06:25:41 所属栏目：百科来源：网络整理

导读：!DOCTYPE html html head meta charset="UTF-8" / titleReact生命周期/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="htt

<!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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!