疑问

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. SpringBoot文档

    一.Spring Boot 入门 1.Hello World探究 1.POM文件 1.父项目 <parent>   <groupId>org.springframework.b ...

  2. Linux新手随手笔记1.3

    shell脚本的编写(划重点) #!/bin/bash                    脚本的声明信息 #sjsjdhsjdhh                  脚本的注释 ls -l    ...

  3. matlab函数int2str, num2str, str2num

    函数名:int2str 功能:将整数值转换为字符串 输入格式:str = int2str(N) 备注:就将该值四舍五入后转换为字符串,接受向量和矩阵输入. 如果是向量和矩阵输入,列数字之间会补加两个空 ...

  4. Python--day09（内存管理、垃圾回收机制）

    昨天内容回顾 1.  操作文件的三个步骤: 1.  打开文件:硬盘的空间被操作系统持有,文件对象被用用程序持续 2.  操作文件:读写操作 3.  释放文件:释放操作系统对硬盘空间的持有 2.  基础 ...

  5. Python----多元线性回归

    多元线性回归 1.多元线性回归方程和简单线性回归方程类似,不同的是由于因变量个数的增加,求取参数的个数也相应增加,推导和求取过程也不一样.. y=β0+β1x1+β2x2+ ... +βpxp+ε 对 ...

  6. 手动安装Package Control

    手动下载一个package control的包:https://github.com/wbond/package_control 然后Download ZIP后,解压,将解压后的文件夹重命名为 Pac ...

  7. MessageDigest类

    public abstract class MessageDigest extends MessageDigestSpi API中的中英文对照简介(未完) java.security.MessageD ...

  8. codeforces 792A-D

    先刷前四题,剩下的有空补. 792A New Bus Route 题意:给出x 轴上的n 个点,问两个点之间的最短距离是多少,有多少个最短距离. 思路:排序后遍历. 代码: #include<s ...

  9. Android 1.7 中不支持 lambda 表达式

    Error:(129, 32) 错误: -source 1.7 中不支持 lambda 表达式 (请使用 -source 8 或更高版本以启用 lambda 表达式) lambda expressio ...

  10. Linux学习之路3-HelloWorld

    1.window系统上创建helloworld.c文件,并编写程序 #include <stdio.h> main(){ printf("Hello World!"); ...