读react.js小书 02

...setState (state) {const oldEl = this.elthis.state = statethis.el = this.render()if (this.onStateChange) this.onStateChange(oldEl, this.el)}
...

读react.js小书 01_前端小臻的博客-CSDN博客

接上文的代码，将setstate的函数进行修改一下，将当前的dom元素赋值给oldel

赋值后进行state的操作，将state的这个状态进行更改，再里面调用this.render（）来返回新的dom元素，在判断更改状态后调用切换state的状态（将新老的dom节点进行赋值操作）

const likeButton = new LikeButton()
wrapper.appendChild(likeButton.render()) // 第一次插入 DOM 元素
likeButton.onStateChange = (oldEl, newEl) => {wrapper.insertBefore(newEl, oldEl) // 插入新的元素wrapper.removeChild(oldEl) // 删除旧的元素
}

在将dom节点插入后将老的节点删除。

当然假如用户频繁的点击点赞和取消，都重新构造、新增、删除 DOM 元素，会导致浏览器进行大量的重排，严重影响性能。这种暴力行为可以被一种叫 Virtual-DOM 的策略规避掉（等我学到那个地方及时更新）

读react.js小书 02相关推荐

React.js 小书 Lesson12 - state vs props
React.js 小书 Lesson12 - state vs props 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson12 转载请注 ...
React.js 小书 Lesson14 - 实战分析：评论功能（一）
React.js 小书 Lesson14 - 实战分析:评论功能(一) 本文作者:胡子大哈本文原文:http://react.huziketang.com/blog/lesson14 转载请注明出处 ...
React.js 小书 Lesson27 - 实战分析：评论功能（六）
React.js 小书 Lesson27 - 实战分析:评论功能(六) 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson27 转载请注明出 ...
React.js 小书 Lesson5 - React.js 基本环境安装
React.js 小书 Lesson5 - React.js 基本环境安装本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson5 转载请注明 ...
React.js 小书 Lesson15 - 实战分析：评论功能（二）
作者:胡子大哈原文链接: http://huziketang.com/books/react/lesson15 转载请注明出处,保留原文链接和作者信息. 上一节我们构建了基本的代码框架,现在开始完善 ...
React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈原文链接: http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋 ...
React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）
React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一) 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson18 转载请注 ...
React.js 小书 Lesson1-2 - 前端组件化（一）：从一个简单的例子讲起
React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson2 ...
React.js小书总结
(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...
一起读JavaScript红宝书 —— 02语法基础（上）
JavaScript高级程序设计读书笔记,前端神作不容错过.原书近100万字,内容太多,故作笔记尽量在不缩减内容的情况下缩减字数,方便复习和回顾. 语法基础(上) 1. 语法 2. 关键字和保留字 3 ...

读react.js小书 02

读react.js小书 02相关推荐

最新文章

热门文章