疑问

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. javafx--tableView笔记-----tableView里已经填充了实体类数据但是很狗血地显示不出来

    private String cClass private String cUp private String cDown 刚开始实体类的字段 cClassCol.setCellValueFactor ...

  2. 应用wavesurfer.js绘制音频波形图小白极速上手总结

    一.简介 1.1  引   人生中第一份工作公司有语音识别业务,需要做一个web网页来整合语音引擎的标注结果和错误率等参数,并提供人工比对的语音标注功能(功能类似于TranscriberAG等),(博 ...

  3. 工作中遇到的一些linux常用命令总结

    零.查看历史命令,linux中可按“↑” “↓”查找之前输入的命令,亦可用 history 命令查看之前的输入,linux中的亦有“Tab”键可联想输入 一.root权限: 1.su 之后输入root ...

  4. 在vultr安装和使用golang

    1.vultr可以用微信或支付宝充值,方便.好像推荐别人用还能挣美分,懒得弄了,参加了一个充10刀送50刀的活动,感觉实惠(实际用时感觉有点小贵). 2.注册登录后,控制面板上billing可查看余额 ...

  5. 3Openwrt自定义CGI实现 前后端交互

    https://www.cnblogs.com/163yun/p/9834993.html 安装uhttpd. 在编译openwrt前,输入make memuconfig,查找Network -> ...

  6. video标签，在移动端获取第一帧作为展示

    写在前面 video标签,获取第一帧作为poster.网上能找着很多案例,很容易实现,在pc端 效果明显.但是在移动端,这些实现方式并不能起作用.原因是 移动端 对video标签的限制,许多video ...

  7. （七）jdk8学习心得之join方法

    七.join方法 1. 作用:将list或者数组按照连接符进行连接,返回一个字符串. 2. 使用方法 1) String.join(“连接符”,数组对象或者list对象) 2) 首先转换成stream ...

  8. jsonp原理详解

    1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准. 2.不过我们又发现,Web页面上调用js文件时则不 ...

  9. dva

    import React, { PureComponent } from "react"; import { Chart, Geom, Axis, Tooltip, Coord, ...

  10. Vue实现树形下拉框

    Vue自身并没有实现树形下拉框的组件,找了很多资料,最后在Github上找了个插件vue-treeselect,功能还是比较全的,模糊搜索.多选.延迟加载.异步搜索.排序,自定义.Vuex支持等等.这 ...