前端组件化（二）：优化 DOM 操作
2024-08-30 18:23:36
看看上一节我们的代码，仔细留意一下 changeLikeText 函数，这个函数包含了 DOM 操作，现在看起来比较简单，那是因为现在只有 isLiked 一个状态。由于数据状态改变会导致需要我们去更新页面的内容，所以假想一下，如果你的组件依赖了很多状态，那么你的组件基本全部都是 DOM 操作。
一个组件的显示形态由多个状态决定的情况非常常见。代码中混杂着对 DOM 的操作其实是一种不好的实践，手动管理数据和 DOM 之间的关系会导致代码可维护性变差、容易出错。所以我们的例子这里还有优化的空间：如何尽量减少这种手动 DOM 操作？
状态改变 -> 构建新的 DOM 元素更新页面
这里要提出的一种解决方案：一旦状态发生改变，就重新调用 render 方法，构建一个新的 DOM 元素。这样做的好处是什么呢？好处就是你可以在 render 方法里面使用最新的 this.state 来构造不同 HTML 结构的字符串，并且通过这个字符串构造不同的 DOM 元素。页面就更新了！听起来有点绕，看看代码怎么写，修改原来的代码为：
class LikeButton {
constructor () {
this.state = { isLiked: false }
}
setState (state) {
this.state = state
this.el = this.render()
}
changeLikeText () {
this.setState({
isLiked: !this.state.isLiked
})
}
render () {
this.el = createDOMFromString(`
<button class='like-btn'>
<span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span>
<span>
最新文章
- 地图中插入表格——ArcMap篇
- [sql查询] 重复数据只取一条
- Centos6---Fail2ban
- Python的第四天
- Counting-Sort
- python中for和if else的使用
- 修改编码格式MySQL
- [bootstrap] 栅格系统和布局
- 【转】Open XML SDK class structure
- MVC 5 - 查询Details和Delete方法
- [笔记]NumPy基础操作
- Python爬虫(十五)_案例：使用bs4的爬虫
- 漫谈Java IO之 NIO那些事儿
- HDU5293 : Tree chain problem
- js-ES6学习笔记-函数的扩展
- 最近见到一个用react native实现的标尺动画，不知道如何实现 帖两张图（新知食App）
- python 删除2天前后缀为.log的文件
- SpringMvc 获取ApplicationContext
- [Selenium]如何实现上传本地文件
- Revit二次开发示例：AutoStamp
热门文章