zoukankan      html  css  js  c++  java
  • 关于react的一些疑问点

    参考转载:链接:http://www.jianshu.com/p/83bda9cd8c67

    1、refs

      <input type="text" ref="input">

      <div ref="div">222</div>

      <div ref={this.refHandle.bind(this)}>3333</div>

      则打印出来的 

      console.log(this.refs)    //object{input:input,div:div}

      ref是对元素添加的 一个属性,所有添加ref属性的元素,都将被放到一个对象中暂时储存起来,当想要访问这个DOM的时候,就可以通过this.refs.[name]来进行访问;

      ref的值不仅仅可以为一个名字,同时还可以为一个回调函数,

    2、this.props

      <div name1="Jack" name2="Mary">666+++</div>

      则打印出来的 

      console.log(this.props);          //object{name1:"Jack",name2:"Mary"}

      this.props将所有的元素中的属性都放到一个对象中储存起来,当利用的时候就可以通过this.props.[name]来调用这个属性;

    3.生命周期函数

      3.1 componentDidMount() 再生命周期中只会调用一次,当渲染完成之后,标识已经渲染成为真实DOM插入html中,这时候获取元素就需要ref来获取。

      每次渲染之后都可以调用这个函数里面的逻辑,比如我this.setState()之后,更改了数据的内容,会引发组件的重新渲染。

    4、父组件和子组件的互通

      父组件改变子组件,通过改变传入的props属性值即可。

      而子组件改变父组件的状态,则需要在父组件中创建钩子函数,然后让钩子函数通过props传递给子组件,并在子组件中执行。

      那么子组件与子组件之间的交互方式,也就是通过影响共同的父组件来进行交互的。一个子组件通过改变父组件中共同用的参数属性,就可以同时更改兄弟组件之间的变化。

      

     
  • 相关阅读:
    vue3 祖孙传递数据
    vue 导航栏不能收缩的问题
    vue 项目中的问题
    Python第一周Round1记录
    [转]80端口被系统占用pid=4: NT kernel & System
    表<表名称> 中的列与现有的主键或UNIQUE约束不匹配
    一些算法(2)
    卸载不了java(tm)se development kit 7 update 3
    如何解决 Eclipse中出现访问限制由于对必需的库XX具有一定限制,因此无法访问类型
    [COPY]Eclipse无法导入项目
  • 原文地址:https://www.cnblogs.com/liumcb/p/7519912.html
Copyright © 2011-2022 走看看