摘要：一個(gè)組件的顯示形態(tài)和行為有可能是由某些數(shù)據(jù)決定的。一個(gè)簡(jiǎn)單的點(diǎn)贊功能我們會(huì)從一個(gè)簡(jiǎn)單的點(diǎn)贊功能講起。我們需要結(jié)構(gòu)，準(zhǔn)確地來(lái)說(shuō)我們需要這個(gè)點(diǎn)贊功能的字符串表示的結(jié)構(gòu)。下一節(jié)小書(shū)前端組件化二優(yōu)化操作中我們繼續(xù)優(yōu)化這個(gè)例子，讓它更加通用。

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

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

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

React.js 是一個(gè)幫助你構(gòu)建頁(yè)面 UI 的庫(kù)。如果你熟悉 MVC 概念的話，那么 React 的組件就相當(dāng)于 MVC 里面的 View。如果你不熟悉也沒(méi)關(guān)系，你可以簡(jiǎn)單地理解為，React.js 將幫助我們將界面分成了各個(gè)獨(dú)立的小塊，每一個(gè)塊就是組件，這些組件之間可以組合、嵌套，就成了我們的頁(yè)面。

一個(gè)組件的顯示形態(tài)和行為有可能是由某些數(shù)據(jù)決定的。而數(shù)據(jù)是可能發(fā)生改變的，這時(shí)候組件的顯示形態(tài)就會(huì)發(fā)生相應(yīng)的改變。而 React.js 也提供了一種非常高效的方式幫助我們做到了數(shù)據(jù)和組件顯示形態(tài)之間的同步。

React.js 不是一個(gè)框架，它只是一個(gè)庫(kù)。它只提供 UI （view）層面的解決方案。在實(shí)際的項(xiàng)目當(dāng)中，它并不能解決我們所有的問(wèn)題，需要結(jié)合其它的庫(kù)，例如 Redux、React-router 等來(lái)協(xié)助提供完整的解決方法。

很多課程一上來(lái)就給大家如何配置環(huán)境、怎么寫(xiě) React.js 組件。但是本課程還是希望大家對(duì)問(wèn)題的根源有一個(gè)更加深入的了解，其實(shí)很多的庫(kù)、框架都是解決類(lèi)似的問(wèn)題。只有我們對(duì)這些庫(kù)、框架解決的問(wèn)題有深入的了解和思考以后，我們才能得心應(yīng)手地使用它們，并且有新的框架出來(lái)也不會(huì)太過(guò)迷茫；因?yàn)槠鋵?shí)它們解決都是同一個(gè)問(wèn)題。

這兩節(jié)課我們來(lái)探討一下是什么樣的問(wèn)題導(dǎo)致了我們需要前端頁(yè)面進(jìn)行組件化，前端頁(yè)面的組件化需要解決什么樣的問(wèn)題。后續(xù)課程我們?cè)賮?lái)看看 React.js 是怎么解決這些問(wèn)題的。

所以這幾節(jié)所講的內(nèi)容將和 React.js 的內(nèi)容沒(méi)有太大的關(guān)系，但是如果你能順利了解這幾節(jié)的內(nèi)容，那么后面哪些對(duì)新手來(lái)說(shuō)很復(fù)雜的概念對(duì)你來(lái)說(shuō)就是非常自然的事。

我們會(huì)從一個(gè)簡(jiǎn)單的點(diǎn)贊功能講起。 假設(shè)現(xiàn)在我們需要實(shí)現(xiàn)一個(gè)點(diǎn)贊、取消點(diǎn)贊的功能。

如果你對(duì)前端稍微有一點(diǎn)了解，你就順手拈來(lái)：

HTML:

  
    

      
        點(diǎn)贊
        ?
      
    
  

為了模擬現(xiàn)實(shí)當(dāng)中的實(shí)際情況，所以這里特意把這個(gè) button 里面的 HTML 結(jié)構(gòu)搞得稍微復(fù)雜一些。有了這個(gè) HTML 結(jié)構(gòu)，現(xiàn)在就給它加入一些 JavaScript 的行為：

JavaScript：

  const button = document.querySelector(".like-btn")
  const buttonText = button.querySelector(".like-text")
  let isLiked = false
  button.addEventListener("click", () => {
    isLiked = !isLiked
    if (isLiked) {
      buttonText.innerHTML = "取消"
    } else {
      buttonText.innerHTML = "點(diǎn)贊"
    }
  }, false)

功能和實(shí)現(xiàn)都很簡(jiǎn)單，按鈕已經(jīng)可以提供點(diǎn)贊和取消點(diǎn)贊的功能。這時(shí)候你的同事跑過(guò)來(lái)了，說(shuō)他很喜歡你的按鈕，他也想用你寫(xiě)的這個(gè)點(diǎn)贊功能。這時(shí)候問(wèn)題就來(lái)了，你就會(huì)發(fā)現(xiàn)這種實(shí)現(xiàn)方式很致命：你的同事要把整個(gè) button 和里面的結(jié)構(gòu)復(fù)制過(guò)去，還有整段 JavaScript 代碼也要復(fù)制過(guò)去。這樣的實(shí)現(xiàn)方式?jīng)]有任何可復(fù)用性。

現(xiàn)在我們來(lái)重新編寫(xiě)這個(gè)點(diǎn)贊功能，讓它具備一定的可復(fù)用。這次我們先寫(xiě)一個(gè)類(lèi)，這個(gè)類(lèi)有 render 方法，這個(gè)方法里面直接返回一個(gè)表示 HTML 結(jié)構(gòu)的字符串：

  class LikeButton {
    render () {
      return `
        
          贊
          ?
        
      `
    }
  }

然后可以用這個(gè)類(lèi)來(lái)構(gòu)建不同的點(diǎn)贊功能的實(shí)例，然后把它們插到頁(yè)面中。

  const wrapper = document.querySelector(".wrapper")
  const likeButton1 = new LikeButton()
  wrapper.innerHTML = likeButton1.render()
  
  const likeButton2 = new LikeButton()
  wrapper.innerHTML += likeButton2.render()

這里非常暴力地使用了 innerHTML ，把兩個(gè)按鈕粗魯?shù)夭迦肓?wrapper 當(dāng)中。雖然你可能會(huì)對(duì)這種實(shí)現(xiàn)方式非常不滿意，但我們還是勉強(qiáng)了實(shí)現(xiàn)了結(jié)構(gòu)的復(fù)用。我們后面再來(lái)優(yōu)化它。

你一定會(huì)發(fā)現(xiàn)，現(xiàn)在的按鈕是死的，你點(diǎn)擊它它根本不會(huì)有什么反應(yīng)。因?yàn)楦緵](méi)有往上面添加事件。但是問(wèn)題來(lái)了，LikeButton 類(lèi)里面是雖然說(shuō)有一個(gè) button，但是這玩意根本就是在字符串里面的。你怎么能往一個(gè)字符串里面添加事件呢？DOM 事件的 API 只有 DOM 結(jié)構(gòu)才能用。

我們需要 DOM 結(jié)構(gòu)，準(zhǔn)確地來(lái)說(shuō)：我們需要這個(gè)點(diǎn)贊功能的 HTML 字符串表示的 DOM 結(jié)構(gòu)。假設(shè)我們現(xiàn)在有一個(gè)函數(shù) createDOMFromString ，你往這個(gè)函數(shù)傳入 HTML 字符串，但是它會(huì)把相應(yīng)的 DOM 元素返回給你。這個(gè)問(wèn)題就可以額解決了。

// ::String => ::Document
const createDOMFromString = (domString) => {
  // TODO 
}

先不用管這個(gè)函數(shù)應(yīng)該怎么實(shí)現(xiàn)，先知道它是干嘛的。拿來(lái)用就好，這時(shí)候用它來(lái)改寫(xiě)一下 LikeButton 類(lèi)：

  class LikeButton {
    render () {
      this.el = createDOMFromString(`
        
          點(diǎn)贊
          ?
        
      `)
      this.el.addEventListener("click", () => console.log("click"), false)
      return this.el
    }
  }

現(xiàn)在 render() 返回的不是一個(gè) html 字符串了，而是一個(gè)由這個(gè) html 字符串所生成的 DOM。在返回 DOM 元素之前會(huì)先給這個(gè) DOM 元素上添加事件再返回。

因?yàn)楝F(xiàn)在 render 返回的是 DOM 元素，所以不能用 innerHTML 暴力地插入 wrapper。而是要用 DOM API 插進(jìn)去。

  const wrapper = document.querySelector(".wrapper")

  const likeButton1 = new LikeButton()
  wrapper.appendChild(likeButton1.render())

  const likeButton2 = new LikeButton()
  wrapper.appendChild(likeButton2.render())

現(xiàn)在你點(diǎn)擊這兩個(gè)按鈕，每個(gè)按鈕都會(huì)在控制臺(tái)打印 click，說(shuō)明事件綁定成功了。但是按鈕上的文本還是沒(méi)有發(fā)生改變，只要稍微改動(dòng)一下 LikeButton 的代碼就可以完成完整的功能：

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

    changeLikeText () {
      const likeText = this.el.querySelector(".like-text")
      this.state.isLiked = !this.state.isLiked
      likeText.innerHTML = this.state.isLiked ? "取消" : "點(diǎn)贊"
    }

    render () {
      this.el = createDOMFromString(`
        
          點(diǎn)贊
          ?
        
      `)
      this.el.addEventListener("click", this.changeLikeText.bind(this), false)
      return this.el
    }
  }

這里的代碼稍微長(zhǎng)了一些，但是還是很好理解。只不過(guò)是在給 LikeButton 類(lèi)添加了構(gòu)造函數(shù)，這個(gè)構(gòu)造函數(shù)會(huì)給每一個(gè) LikeButton 的實(shí)例添加一個(gè)對(duì)象 state，state 里面保存了每個(gè)按鈕自己是否點(diǎn)贊的狀態(tài)。還改寫(xiě)了原來(lái)的事件綁定函數(shù)：原來(lái)只打印 click，現(xiàn)在點(diǎn)擊的按鈕的時(shí)候會(huì)調(diào)用 changeLikeText 方法，這個(gè)方法會(huì)根據(jù) this.state 的狀態(tài)改變點(diǎn)贊按鈕的文本。

現(xiàn)在這個(gè)組件的可復(fù)用性已經(jīng)很不錯(cuò)了，你的同事們只要實(shí)例化一下然后插入到 DOM 里面去就好了。

下一節(jié)《React.js 小書(shū) Lesson3 - 前端組件化（二）：優(yōu)化 DOM 操作》中我們繼續(xù)優(yōu)化這個(gè)例子，讓它更加通用。