疑问

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. 【shell基础】数学计算

    #!/bin/bash #4.4.sh s= #定义一个求和变量,初值为0. t=`**$` #用expr改变运算顺序,求x的y次方. t=$[t*] #t乘以3. s=$[s+t] #结果相加. t ...

  2. python学习笔记3_抽象

    这一步的学习四个知识点,如何将语句组织成函数,参数,作用域(scope),和递归 一.函数 1.抽象和结构 抽象可以节省很多的工作量,实际上它的作用更大,它是使得计算机程序让人读懂的关键(这也是最基本 ...

  3. UOJ 275. 【清华集训2016】组合数问题

    UOJ 275. [清华集训2016]组合数问题 组合数 $C_n^m $表示的是从 \(n\) 个物品中选出 \(m\) 个物品的方案数.举个例子,从$ (1,2,3)(1,2,3)$ 三个物品中选 ...

  4. SQL FIRST() 函数

    FIRST() 函数 FIRST() 函数返回指定的字段中第一个记录的值. 提示:可使用 ORDER BY 语句对记录进行排序. SQL FIRST() 语法 SELECT FIRST(column_ ...

  5. node js 异步运行流程控制模块Async介绍

    1.Async介绍 sync是一个流程控制工具包.提供了直接而强大的异步功能.基于Javascript为Node.js设计,同一时候也能够直接在浏览器中使用. Async提供了大约20个函数,包含经常 ...

  6. 一个 C# 文件权限的帮助类

    直接贴代码了: FilePermissionHelper.cs using System.Collections.Generic; using System.IO; using System.Secu ...

  7. linq中如何在join中指定多个条件

    public ActionResult Edit(int id) { using (DataContext db = new DataContext(ConfigurationManager.Conn ...

  8. 10 Django RESTful api 实现匿名访问

    # views_send_code.py from rest_framework.permissions import AllowAny class MsgCodeViewSet(CreateMode ...

  9. Robust Principal Component Analysis?（PCP）

    目录 引 一些微弱的假设: 问题的解决 理论 去随机 Dual Certificates(对偶保证?) Golfing Scheme 数值实验 代码 Candes E J, Li X, Ma Y, e ...

  10. SpringMVC 接受请求参数、作用域传值

    目录 原生servlet接收参数 Spring MVC最基础的参数获取 接收基本数据类型参数 方法参数列表和请求参数不一致的处理方式 接收对象引用数据类型 接收复选框这种多个同名的参数 接收obj.f ...