React_混合小知识

ref+事件(event)+this

• ref
  。 canvas只能使用dom来获取
  。在React中获取Dom需要用ref 来获取真实的dom

ref分类

普通的元素上边

• ref以string的形式

 -string ref="box" 获取：this.refs.box;
 this.refs是一个对象,this.refs.对象里面的key，获取到的是这个key对于value

• ref以函数形式

 ref={(dom)=>{
 console.log(dom)
 }}  //render就会调用,函数里面的参数,就是要获取的dom节点
 *** 更改状态的时候,回调函数会触发两次,第一次的dom是null,第二次才是真实的dom
 **** 函数里面的形参就是要获取的真实的dom节点

• ref 获取dom操作以及判断
  

在组件上边

• this.refs.名字 :获取的是组件实例

 <Detail ref="detail"/>   let {detai,boxl}=this.refs

• findDOMNode(组件实例) //获取的是组件的整个dom

 findDOMNode(ComponentorElement) 获取的是组件的整个dom
 findDOMNode(detail) //可以获取到组件的dom节点

• unmountComponentAtNode:方法里面只能接收根节点 ( 操作的是根节点) //卸载组件

unmountComponentAtNode(document.getElementById("#root")) 里面是根节点

---

原生事件

• Dom0级 ：onclick 只能添加一次,没有兼容问题

• DOM2级:addEventListener 可以添加多次，有兼容问题 IE，
  。 第一个参数是事件名称，
  。第二个参数是回调函数，
  。true是捕获，(从外往里)false是冒泡(从里往外))
  。同时有捕获和冒泡，先执行捕获，再执行冒泡
  。捕获和冒泡只影响触发顺序，不影响谁被触发，触发的元素从当前点击的元素往外触发

• 如果同时有捕获和冒泡,会先执行捕获，在执行冒泡

• 事件三要素：事件源,事件类型,事件处理函数

• stopPropagation 阻止冒泡事件，阻止了冒泡就不往下执行了

• 捕获在componentDidMount中进行操作

• 看下例：
  
  拖拽
  原理：盒子的距离 = 最后手指到页面距离 - (开始手指到页面距离 - 盒子到页面距离)

react事件(合成事件)

• react 事件 ：必须是驼峰模式

• onClick :点击事件

• 合成事件的捕获 onClickCapture

• react 事件默认是冒泡，所有合成事件都是加在document上，没有兼容，
  。合成事件阻止事件冒泡 e.nativeEvent.stopImmediatePropagation()
  。合成事件销毁 自动销毁

• 原生事件和合成事件同时出现的时候先执行原生事件，(需要看点击的元素)

• 需要注意的是:原生事件里面阻止事件冒泡，有可能合成事件不会往下执行(慎用事件冒泡)
  。合成事件默认是冒泡(fasle)
  。事件对象永远在最后一个参数捕获
  。原生事件和合成事件同时出现先执行原生事件

• 原生事件里阻止事件冒泡，有可能合成事件就都不执行了

• 原生事件 removeEventListener() 销毁

• 组件卸载的时候，清空事件，定时器……

• 属于react事件系统的是 ：事件注册 事件存储 事件执行

 onClick={()=>{}}

• 第二种方法 es7的方法

 onClick={this.handClick}      调用 handClick=()=>{}  

• 第三种方法添加事件(推荐使用这种)

onClick={this.handClcik.bind(this,参数)}   在render外面调用  handClick(){}

• 第四种方法 在constructor里面

this.handClick=this.handleclick.bind(this);  在rende外面调用handClick(){}

• 判断题 错
  

设置默认样式

• 如果有传参就用传过来的,没传参就用默认的样式
• 这是之前的写法
  
• 这是es6的写法
  
• 以下是通过父组件传过来的,用this.props来获取，同时注意需要解构以下才能使用
  

---

this指向

• this指向:写事件的时候不能再后面调用函数,不能再后面传参数,这样直接就自己执行了(就变成了自执行函数,并且拿不到)

onClick={()=>{}}
handleClick=()=>{}  //可以拿到this,拿不到参数

改变this指向的3种不同的方法

• 调用this指向执行可以在constructor中执行,这样可以提高性能,看下例：推荐使用这种调用方法

react表单

 表单：react的表单和html表单不一样

非受控的

非受控组件是在内部存储其自身状态的组件，当需要时，可以使用 ref 查询 DOM 并查找其当前值

• 如果一个表单组件没有value prop就可以称为非受控组件
• 不受状态控制，相当于操作DOM
• defaultValue 默认值和value只能选择一个
• 可以结合第三方使用，swiper
• 函数式
  。在虚拟dom节点上使用ref
  。<input ref={dom => this.val = dom}
  。this 点 val 相当于在组件实例上挂载的，全局都能获取到
  。this.val.value

  在虚拟DOM节点使用ref,并使用函数,将函数的参数挂在到实例的属性上

• 通过构造函数声明式的方式
  。this.sec = React.createRef()

   <input ref={this.sec}/>
   1.实例的构造函数constructor这里创建一个引用
   2.在虚拟DOM节点上声明一个ref属性,并且将创建好的引用赋值给这个ref属性
   3.react会自动将输入框的值放在实例的second属性上
   4.this.sec.current.value

• 给默认值