ReactJS虚拟DOM效应带来的一则副作用探索

疑问

https://github.com/ruanyf/react-demos/blob/master/demo08/index.html

在如下代码中的 18 行， 需要将本类中的 方法，进行绑定到this，即当前组件，但是render函数就不需要，为什么呢？

this.handleClick = this.handleClick.bind(this)

 1 
 2 
 3   
 4     
 5     
 6     
 7     
 8   
 9   
10     

11     
38   
39 

 

实验

将上行例子中的18行注释后， 运行效果。

 1 
 2 
 3   
 4     
 5     
 6     
 7     
 8   
 9   
10     

11     
38   
39 

浏览器运行结果，控制台有报错：

 

思考

本来以为是 babel把es6翻译成es5特殊要求导致。

最后找到问题根因是，事件处理handler引入的特殊要求， 因为ReactJS使用了 virtual DOM， 生成的组件是虚拟的，并不是页面上真实显示的控件。

 

对于页面上真实存在的控件， 在事件处理的handler中， 使用this表示控件本身。

例如：

http://www.w3school.com.cn/tiy/t.asp?f=hdom_onclick

第一个输入框中添加click事件， 使用 this.value 获取控件的 当前值。

Field1: 


Field2: 



Click the button below to copy the content of Field1 to Field2.


document.getElementById('field2').value=
document.getElementById('field1').value; alert(this.text)">Copy Text

 

 但是 ReactJS设计上， 将UI DOM 和实际上的 virtual DOM进行分离， 实际逻辑在virtual DOM上， 对于本例子， 就是需要将 目标 事件 handler 绑定到 虚拟DOM上。

UI dom上视图组件，调用绑定过this的事件handler。

 

转载于:https://www.cnblogs.com/lightsong/p/10353181.html