首页 > react的refs和event

react的refs和event

用react要取得文本框的值的时候,有的用ref有的用event.target.value来取这个值。我想问问这两个有什么区别?都推荐用event而不用ref,为什么这么做?


ref指的是dom对象吧,可能得使用getDOMNode之类的,event是事件,一般都是绑定的时候,事件回调使用到的

两个场景不太一样

event的好处,我的理解是能够做内部状态的更新,ref的话,只能是你自己主动去获取


我一般用ref,然后this.refs.*就能获取到dom


人工置顶下!


用event。 理由,event用不用都存在,ref 你还要写多点代码,react也要做处理。


我是新手,就我知道的ref取的是真实的dom节点,event.target可能获得值不走真实dom吧,看的一些demo都是使用后者


实际上两种方法都可以,但也都有自己的好处和坏处:

event.target 获取的是事件触发时的 DOM 对象,一般来说用它即可。但有的时候事件触发后你想要的对象未必是 event.target,这时候传统的方法(或者 jQuery)需要访问 DOM tree 去获得你想要的 DOM 对象,而 ref 在 render 之后就把对应节点的引用给你了,所以减少对访问 DOM 的依赖和消耗。

ref 在动态生成节点时派不上用处,比方说你的表单是通过一个集合的对象渲染而成,你在 render 方法中使用诸如 map 的技巧来编写视图,事件触发时需要动态的获取当前的 event.target,这种场景就不是 ref 的菜。

不过 React 的 event 不是真正的 DOM event,它有一个特点即在下一个 event loop 里就会被释放掉,换句话说如果你有这样的处理方法:

somethingOnEvent(event) {
  window.setTimeout(() => {           // or any async processing
    doSomethingWith(event.target);    // you can not rely on this `event.target`
  }, 0);
}

那么这里的 event.target 是获取不到的,同时 React 会提示你这个问题,解决的方法是持久化这个 event 对象,即先 event.persist()。这一点尤其要在对 event handler 进行二次包装时(比如 lodash.debounce 它)注意。


推荐event获取dom,用refs的时候获取到真实dom,操作真实dom的成本是非常高的。

【热门文章】
【热门文章】