看看上一節我們的**，仔細留意一下changeliketext函式，這個函式包含了 dom 操作，現在看起來比較簡單，那是因為現在只有isliked乙個狀態。由於資料狀態改變會導致需要我們去更新頁面的內容，所以假想一下，如果你的元件依賴了很多狀態，那麼你的元件基本全部都是 dom 操作。
乙個元件的顯示形態由多個狀態決定的情況非常常見。**中混雜著對 dom 的操作其實是一種不好的實踐，手動管理資料和 dom 之間的關係會導致**可維護性變差、容易出錯。所以我們的例子這裡還有優化的空間：如何儘量減少這種手動 dom 操作？
這裡要提出的一種解決方案：一旦狀態發生改變，就重新呼叫render方法，構建乙個新的 dom 元素。這樣做的好處是什麼呢？好處就是你可以在render方法裡面使用最新的this.state來構造不同 html 結構的字串，並且通過這個字串構造不同的 dom 元素。頁面就更新了！聽起來有點繞，看看**怎麼寫，修改原來的**為：
class likebutton}setstate (state)
changeliketext () )
}render ()
web前端 DOM操作
dom document object model 文件物件模型 乙個web頁面的展示，是由html標籤組合成的乙個頁面，dom物件實際就是將html標籤轉換成了乙個文件物件。可以通過dom物件中js提供的方法，找到html的各個標籤。通過找到標籤就可以操作標籤使頁面動起來，讓頁面動起來。dom操作...
從乙個簡單的元件化封裝寫優化DOM操作
缺點 1.還需要我們自己手工維護dom狀態，以資料的思想去思考 2.資料改變後，還需要我們自己手動改變dom 3.class likebutton createdomfromstring domstr 如果原來有，現在沒有，新增這個屬性 如果原來有，現在有，覆蓋這個屬性 setstate newst...
前端開發流程與元件化
1元件化開發 元件分開發是非常重要的工程優手段。也是react開發必備技能。前端光有js css的模組化還是不夠的。對於ui元件同樣迫切的需求 前端元件化開發理念 如上圖所示這就是前端元件開發理念，下面我們來總結一下 1 頁面上的每個獨立的可視。可互動區域視為作乙個元件 2 每個元件對應乙個工程目錄...