疑问

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

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

this.handleClick = this.handleClick.bind(this)
 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="UTF-8" />

     <script src="../build/react.development.js"></script>

     <script src="../build/react-dom.development.js"></script>

     <script src="../build/babel.min.js"></script>

   </head>

   <body>

     <div id="example"></div>

     <script type="text/babel">

       class LikeButton extends React.Component {

         constructor(props) {

           super(props)

           this.state = {

             liked: false

           }

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

         }

         handleClick(event) {

           this.setState({ liked: !this.state.liked });

         }

         render() {

           var text = this.state.liked ? 'like' : 'haven\'t liked';

           return (

             <p onClick={this.handleClick}>

               You {text} this. Click to toggle.

             </p>

           );

         }

       }

       ReactDOM.render(

         <LikeButton />,

         document.getElementById('example')

       );

     </script>

   </body>

 </html>

实验

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

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="UTF-8" />

     <script src="../build/react.development.js"></script>

     <script src="../build/react-dom.development.js"></script>

     <script src="../build/babel.min.js"></script>

   </head>

   <body>

     <div id="example"></div>

     <script type="text/babel">

       class LikeButton extends React.Component {

         constructor(props) {

           super(props)

           this.state = {

             liked: false

           }

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

         }

         handleClick(event) {

           this.setState({ liked: !this.state.liked });

         }

         render() {

           var text = this.state.liked ? 'like' : 'haven\'t liked';

           return (

             <p onClick={this.handleClick}>

               You {text} this. Click to toggle.

             </p>

           );

         }

       }

       ReactDOM.render(

         <LikeButton />,

         document.getElementById('example')

       );

     </script>

   </body>

 </html>

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

思考

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

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

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

例如：

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

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

<html>

<body>

Field1: <input type="text" id="field1" value="Hello World!"  onclick="alert(this.value)">

<br />

Field2: <input type="text" id="field2">

<br /><br />

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

<br />

<button onclick="document.getElementById('field2').value=

document.getElementById('field1').value; alert(this.text)">Copy Text</button>

</body>

</html>

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

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

ReactJS虚拟DOM效应带来的一则副作用探索的更多相关文章

  1. 2.ReactJS基础(虚拟DOM,JSX语法)

    将脚手架(create-react-app)创建的todolist项目精简为hello world示例 即,删除自动生成的样式文件.logo.svt.App.test.js.serviceWorker ...

  2. React的虚拟DOM

    ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...

  3. 全面理解虚拟DOM（1）

    最近一两年前端最火的技术莫过于 reactjs,angularJS,vuejs,即便你没用过也可能听过,像ReactJS由业界顶尖的互联网公司facebook提出,其本身有很多先进的设计思路,比如页面 ...

  4. 全面理解虚拟DOM，实现虚拟DOM

    1.为什么需要虚拟DOM DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需 ...

  5. 什么是虚拟DOM？

    (摘抄自一篇文章,觉得这里写得非常不错,所以单独放出来,希望能对大家有帮助.)React为啥这么大?因为它实现了一个虚拟DOM(Virtual DOM).虚拟DOM是干什么的?这就要从浏览器本身讲起 ...

  6. [react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?

    壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...

  7. react通过自己的jsx语法将两者放在一起通过虚拟dom来渲染

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  8. 深入Vue2.x的虚拟DOM diff原理

    一.前言 Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom),关于双向绑定可以参阅木琴的文章<剖析Vue原理&实现双向绑定MVVM>,vdom是树状结构,其节点为vnod ...

  9. Virtual DOM 虚拟DOM的理解(转)

    作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM ...

随机推荐

  1. eclipse 更改默认主题，重写默认滚动条样式（安装DevStyle主题插件）

    1.点击Help->Eclipse Marktplace 2.弹出窗口输入: DevStyle 3.点击安装,重启eclipse 4.可以设置黑色和浅色主题,个人比较喜欢浅色,重点式滚动条样式变 ...

  2. 使用Let's Encrypt生成免费SSL证书操作记录

    最近要做微信小程序,要求接口必须备案且是https,个人小站就直接准备使用免费的SSL证书,网上搜了一圈,发现Let's Encrypt是浏览器支持比较好的. 流程: 1. 首先去服务器上安装了Let ...

  3. mysql表与表之间数据的转移

    1.相同表结构 INSERT INTO table1 SELECT * FROM table2; 2.不同表结构 INSERT INTO table1(filed1,...,filedn) SELEC ...

  4. 从零开始制作 Hexo 主题

    原文地址:从零开始制作 Hexo 主题 · Ahonn 写在前面 本文将会从零开始开发一个简单的博客主题.样式主要参考 Hexo theme 中的 Noise 主题. 开始之前你需要了解: 模板引擎  ...

  5. C++11のlambd表达式

    在其他语言中,我们常见lambda表达式,c++11中也引入了. 利用Lambda表达式,可以方便的定义和创建匿名函数.今天,我们就来简单介绍一下C++中Lambda表达式的简单使用. 一.lambd ...

  6. nginx正则匹配

    1.通用匹配规则 .     匹配除换行符以外的任意字符 \w  匹配字母.数字.下划线.汉字 \s   匹配任意的空白符 \d   匹配数字 ^    匹配字符串的开始 $    匹配字符串的结束 ...

  7. Selenium 4即将发布：每个QA都应该知道的

    阅读原文 Simon Stewart(Selenium的创始成员)在班加罗尔的Selenium大会议上正式确认了Selenium4.0的发布日期和一些主要更新.我们先来提前了解一下Selenium 4 ...

  8. Python并发式编程

    目录 进程 线程 GIL(Global Interpreter Lock) 线程的调用方式 直接调用 继承调用 join&Daemon方法 Daemon(True) 同步锁 死锁 递归锁 同步 ...

  9. Appium could not connect to server are you sure it's running appium desktop

    use remote host value : 127.0.0.1 switch to Custom server to Automatic server adb kill-server adb st ...

  10. array_map、array_walk、array_reduce

    不同情境下替换foreach,且效果更佳 array_map  遍历原数组,array_map()参数中有几个数组,自定义函数就接收几个参数, 在每个值上进行自定义函数处理,具有返回值,需要一个新数组 ...