用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的成本是非常高的。