zoukankan      html  css  js  c++  java
  • react生命周期

    图是百度来的 图有一处错误componentWillReceiveProps图上是错的

     1 componentWillMount:在组件渲染之前执行
    2 componentDidMount:在组件渲染之后执行
    3 shouldComponentUpdate :返回true和false,true代表允许改变,false表示不允许
    4 componentWillUpdate:数据改变之前执行
    5 componentDidUpdate:数据修改完成

    componentWillReveiceProps props变化时
    componentWillUnmount :组件卸载前执行
    说道生命周期那就说个典型的父传子,子传父

    //
    <StateComponent title={this.state.aa}/> 
    
    //
    render() { 
            const {count}=this.state;
            return ( 
                <div>
                    <h3>生命周期函数</h3>
                    <p>{count}--{this.props.title}</p>
                </div>
            );
        }
    //子传父
    //
    render(){
        return(
          <div>
            <StateComponent title={this.state.aa} changeTitles={this.changeTitle}/> //父组件把方法传到子组件里面
          </div>
        )
      }
      changeTitle=(data)=>{
        this.setState({
          aa:data
        })
      }
    //
    render() { 
       const {count}=this.state;
       return ( 
                <div>
                    <h3>生命周期函数</h3>
                    <p>{count}--{this.props.title}</p>
                    <button onClick={this.changeTitle}>修改</button>
                </div>
       );
    }
    changeTitle=()=>{
       this.props.changeTitles("子组件传参");//子传父,子调用父级的方法
    }
  • 相关阅读:
    在Js或者cess后加版本号 防止浏览器缓存
    svn操作
    Hash表
    网站js埋点
    c#优秀文章
    CentOS修改默认yum源为国内yum镜像源
    mysql开启远程连接
    安装jdk环境
    Eclipse的一下设置
    好用的在线HTML、CSS工具
  • 原文地址:https://www.cnblogs.com/zhihou/p/12953508.html
Copyright © 2011-2022 走看看