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
今天就到這裏謝謝大家 溜了溜了