zoukankan      html  css  js  c++  java
  • 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>    





  • 相关阅读:
    debounce
    react-xiguan
    备忘录
    ie导出问题
    umi 动态路由配置
    tsconfig
    关于vue 和react 中的hash与锚点冲突问题
    lodash
    pyplot绘图
    Numpy实现图像变换
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924852.html
Copyright © 2011-2022 走看看