淺談React 一 操作DOM(舊版)

hello ,大家中午好,無聊的週末過去了,寫代碼讓我們不在孤單,抽中午吃飯時間給大家分享一下React操作DOM的方法。

一:setSate(第一種方法)
使用setState來進行DOM的刷新,這個方法和小程序的用法是一樣的
在這裏插入圖片描述
使用this.setState改變寫法是Key,value來寫。

二:ReactDOM(第二種方法)
這裏咱們需要用到ReactDOM先引入react-dom
在這裏插入圖片描述
改變DOM的方法偏向原生,給DOM綁定class,Id等等!!!
在這裏插入圖片描述
這裏咱們綁定了一個Onclik事件
在這裏插入圖片描述
來改變按鈕字體的顏色,按鈕默認字體顏色是黑色,點擊以後會變成red或者是yellow。
在這裏插入圖片描述
字體顏色變換了證明咱們操作DOM實現了!!!

三:ref(第三種方法)
說到ref用過vue的同學應該有所瞭解ref在vue中也是來獲取DOM來操作DOM的,獲取this.$refs.key來獲取。

React:
在這裏插入圖片描述
獲取的時候就有一點不同之處了Vue是this.$refs.key,然後React是this.refs.key就可以
在這裏插入圖片描述

在這裏插入圖片描述

注意:
1:refs是獲取組件內部DOM唯一可靠的方法
2:refs會自動銷燬對子組件的引用
3:不要在render裏面調用因爲DOM結構還沒生成好也不要在生命中調用
4:不要濫用refs 因爲可能會影響性能問題

源碼地址: https://github.com/Liingot/react-demo

今天就到這裏謝謝大家 溜了溜了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章