我正在使用React&以下代码对于具有React经验的人来说会更容易理解,但是,这是一个javascript问题。组件(对象)是使用新的es2015类语法创建的。
在下面的代码中,一旦呈现对象(在DOM中),我就绑定onmousemove
处理程序(React特定信息:在方法componentDidMount
中)。
classSVGParent extends Component{
...
componentDidMount(){
....
this.mainSVGEle.onmousemove = this.throttledMouseMoveHandler();
// one specific detail for non-react devs : the method above
// 'componentDidMount' is called only once the component renders.
}
// the purpose of below func is to localise & create closure for the
// actual handler function (which is returned by this method to the
// 'onmousemove' event listener we appended above).
throttledMouseMoveHandler(){
let { svgState,
... } = this.props;
return( function( e ){
// when this func actually runs, it always returns `false`
// even when the actual svgState.mousemoveState is `true`
console.log( svgState.mousemoveState );
});
...
}
按照上面的代码,在我的代码中,我立即在组件渲染时调用函数throttledMouseMoveHandler
。此函数的目的是创建一个闭包,其中包含每次后续mousemove
调用时所需的信息。
我的期望:我期望svgState(我在' throttledMouseMoveHandler'中进行本地化)将reference
保留在道具' svgState',&当调用mousemove时,将从保存值的原始obj中检索svgState.mousemoveState的prop值。
我遇到的情况:svgState.mousemoveState永远不会改变。即使我可以看到原始对象svgState.mousemoveState是true
,我仍然得到false
作为返回值。这对我来说非常令人惊讶。
我的问题是道歉,这是什么原因。当然,状态对象的副本没有存储在闭包中,连接是live
,对吗?
我在下面做了一个简单的例子来说明我的理解。
var aobj = { a : 1 }
var bobj = function(){
var aref = aobj;
return( function(){
console.log( "aref is...", aref.a);
});
}
var bfunc = bobj();
bfunc(); // returns `aref is... 1`, which is expected
aobj.a = 2
bfunc() // returns `aref is... 2`, which is also expected
// so clearly the reference to external obj is live
答案 0 :(得分:2)
我预计
svgState
会引用道具' svgState'
没有。 svgState
保留this.props.svgState
在调用throttledMouseMoveHandler
时所具有的值。 (当然,该值是引用其.mousemoveState
属性的对象)
...当调用
onmousemove
时,将从保存值的原始obj中检索svgState.mousemoveState
的道具值。
是的。它将获取对象的.mousemoveState
属性的当前值。
但是,如果您说在关闭生成this.props.svgState.mousemoveState
时,日志记录true
会产生false
,则有人确实更改了.props
或.svgState
属性与闭包记住的不同对象。