React.js 小书 Lesson3 - 前端组件化(二):优化 DOM 操作

前端之家收集整理的这篇文章主要介绍了React.js 小书 Lesson3 - 前端组件化(二):优化 DOM 操作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React.js 小书 Lesson3 - 前端组件化(二):优化 DOM 操作

本文作者:胡子大哈
本文原文:http://huziketang.com/books/react/lesson3

转载请注明出处,保留原文链接以及作者信息

在线阅读:http://huziketang.com/books/react/


看看上一节前端组件化(一):从一个简单的例子讲起我们的代码,仔细留意一下 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> 原文链接:https://www.f2er.com/react/302384.html

猜你在找的React相关文章