国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類

jsbintask / 1985人閱讀

摘要：最后抽離出來了一個類，可以幫助我們更好的做組件化。一個組件有自己的顯示形態上面的結構和內容行為，組件的顯示形態和行為可以由數據狀態和配置參數共同決定。接下來我們開始正式進入主題，開始正式介紹。下一節鏈接直達小書基本環境安裝

React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類 
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson4

轉載請注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

為了讓代碼更靈活，可以寫更多的組件，我們把這種模式抽象出來，放到一個 Component 類當中：

  class Component {
    setState (state) {
      const oldEl = this.el
      this.state = state
      this.el = this._renderDOM()
      if (this.onStateChange) this.onStateChange(oldEl, this.el)
    }

    _renderDOM () {
      this.el = createDOMFromString(this.render())
      if (this.onClick) {
        this.el.addEventListener("click", this.onClick.bind(this), false)
      }
      return this.el
    }
  }

這個是一個組件父類 Component，所有的組件都可以繼承這個父類來構建。它定義的兩個方法，一個是我們已經很熟悉的 setState；一個是私有方法 _renderDOM。_renderDOM 方法會調用 this.render 來構建 DOM 元素并且監聽 onClick 事件。所以，組件子類繼承的時候只需要實現一個返回 HTML 字符串的 render 方法就可以了。

還有一個額外的 mount 的方法，其實就是把組件的 DOM 元素插入頁面，并且在 setState 的時候更新頁面：

  const mount = (component, wrapper) => {
    wrapper.appendChild(component.renderDOM())
    component.onStateChange = (oldEl, newEl) => {
      wrapper.insertBefore(newEl, oldEl)
      wrapper.removeChild(oldEl)
    }
  }

這樣的話我們重新寫點贊組件就會變成：

  class LikeButton extends Component {
    constructor () {
      this.state = { isLiked: false }
    }

    onClick () {
      this.setState({
        isLiked: !this.state.isLiked
      })
    }

    render () {
      return `
        
      `
    }
  }

  mount(new LikeButton(), wrapper)

這樣還不夠好。在實際開發當中，你可能需要給組件傳入一些自定義的配置數據。例如說想配置一下點贊按鈕的背景顏色，如果我給它傳入一個參數，告訴它怎么設置自己的顏色。那么這個按鈕的定制性就更強了。所以我們可以給組件類和它的子類都傳入一個參數 props，作為組件的配置參數。修改 Component 的構造函數為：

...
    constructor (props = {}) {
      this.props = props
    }
...

繼承的時候通過 super(props) 把 props 傳給父類，這樣就可以通過 this.props 獲取到配置參數：

  class LikeButton extends Component {
    constructor (props) {
      super(props)
      this.state = { isLiked: false }
    }

    onClick () {
      this.setState({
        isLiked: !this.state.isLiked
      })
    }

    render () {
      return `
        
      `
    }
  }

  mount(new LikeButton({ bgColor: "red" }), wrapper)

這里我們稍微修改了一下原有的 LikeButton 的 render 方法，讓它可以根據傳入的參數 this.props.bgColor 來生成不同的 style 屬性。這樣就可以自由配置組件的顏色了。

只要有了上面那個 Component 類和 mount 方法加起來不足40行代碼就可以做到組件化。如果我們需要寫另外一個組件，只需要像上面那樣，簡單地繼承一下 Component 類就好了：

  class RedBlueButton extends Component {
    constructor (props) {
      super(props)
      this.state = {
        color: "red"
      }
    }

    onClick () {
      this.setState({
        color: "blue"
      })
    }

    render () {
      return `
        
${this.state.color}

      `
    }
  }

簡單好用，現在可以靈活地組件化頁面了。

噢，忘了，還有一個神秘的 createDOMFromString，其實它更簡單：

  const createDOMFromString = (domString) => {
    const div = document.createElement("div")
    div.innerHTML = domString
    return div
  }

Component 完整的代碼可以在這里找到 reactjs-in-40。

總結

我們用了很長的篇幅來講一個簡單的點贊的例子，并且在這個過程里面一直在優化編寫的方式。最后抽離出來了一個類，可以幫助我們更好的做組件化。在這個過程里面我們學到了什么？

組件化可以幫助我們解決前端結構的復用性問題，整個頁面可以由這樣的不同的組件組合、嵌套構成。

一個組件有自己的顯示形態（上面的 HTML 結構和內容）行為，組件的顯示形態和行為可以由數據狀態（state）和配置參數（props）共同決定。數據狀態和配置參數的改變都會影響到這個組件的顯示形態。

當數據變化的時候，組件的顯示需要更新。所以如果組件化的模式能提供一種高效的方式自動化地幫助我們更新頁面，那也就可以大大地降低我們代碼的復雜度，帶來更好的可維護性。

好了，課程結束了。你已經學會了怎么使用 React.js 了，因為我們已經寫了一個——當然我是在開玩笑，但是上面這個 Component 類其實和 React 的 Component 使用方式很類似。掌握了這幾節的課程，你基本就掌握了基礎的 React.js 的概念。

接下來我們開始正式進入主題，開始正式介紹 React.js。你會發現，有了前面的鋪墊，下面講的內容理解起來會簡單很多了。

下一節鏈接直達：《React.js 小書 - Lesson5 React.js 基本環境安裝》

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89653.html

相關文章

  • React.js 小書 Lesson3 - 前端組件化（二）：優化 DOM 操作

    摘要：一個組件的顯示形態由多個狀態決定的情況非常常見。我們順利地消除了手動的操作。非一般的暴力，因為每次都重新構造新增刪除元素，會導致瀏覽器進行大量的重排，嚴重影響性能。下一節小書前端組件化三抽象出公共組件類我們把這個通用模式抽離到一個類當中。 React.js 小書 Lesson3 - 前端組件化（二）：優化 DOM 操作 本文作者：胡子大哈本文原文：http://huziketang....

    Drinkey 評論0 收藏0

  • 寫一本關于 React.js 的小書

    摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業簡單的入門級別的小書，提供給社區。本書的后續可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書 本文作者：胡子大哈本文原文：React.js 小書 轉載請注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...

    Scorpion 評論0 收藏0

  • React.js 小書 Lesson17 - 前端應用狀態管理 —— 狀態提升

    摘要：在實際項目當中狀態提升并不是一個好的解決方案，所以我們后續會引入這樣的狀態管理工具來幫助我們來管理這種共享狀態，但是在講解到之前，我們暫時采取狀態提升的方式來進行管理。 React.js 小書 Lesson17 - 前端應用狀態管理 —— 狀態提升 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson17 轉載請注明出處，保留原...

    newtrek 評論0 收藏0

  • React.js 小書 Lesson16 - 實戰分析：評論功能（三）

    摘要：但是給傳遞的評論數據并沒有傳遞給，所以現在發表評論時沒有反應的。包括實現功能之前先理解分析需求，劃分組件。到此為止，小書的第一階段已經結束，你可以利用這些知識點來構建簡單的功能模塊了。 React.js 小書 Lesson16 - 實戰分析：評論功能（三） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson16 轉載請注明出處...

    Gilbertat 評論0 收藏0

  • React.js 小書 Lesson1-2 - 前端組件化（一）：從一個簡單的例子講起

    摘要：一個組件的顯示形態和行為有可能是由某些數據決定的。一個簡單的點贊功能我們會從一個簡單的點贊功能講起。我們需要結構，準確地來說我們需要這個點贊功能的字符串表示的結構。下一節小書前端組件化二優化操作中我們繼續優化這個例子，讓它更加通用。 React.js 小書 Lesson1-2 - 前端組件化（一）：從一個簡單的例子講起 本文作者：胡子大哈本文原文：http://huziketang....

    null1145 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<