“React中的DOM操作”筆記

wyk1184 發(fā)布于2019-08-19 18:41 / 1426人閱讀

摘要：中的每一個(gè)組件都是一個(gè)狀態(tài)機(jī)，通常情況下，我們通過設(shè)置組件的狀態(tài)就可以完成的更新，但是在某些情況下確實(shí)需要直接操作。只在組件中調(diào)用，組件就是已經(jīng)渲染在瀏覽器結(jié)構(gòu)中的組件。

React中的每一個(gè)組件都是一個(gè)狀態(tài)機(jī)，通常情況下，我們通過設(shè)置組件的狀態(tài)就可以完成UI的更新，但是在某些情況下確實(shí)需要直接操作DOM。

React中操作DOM的方法：

Refs

findDOMNode()

findDOMNode()

當(dāng)組件加載到頁(yè)面上之后（mounted），你就可以通過 getDOMNode() 方法拿到組件對(duì)應(yīng)的 DOM 元素。

React.findDOMNode()只在mounted組件中調(diào)用，mounted組件就是已經(jīng)渲染在瀏覽器DOM結(jié)構(gòu)中的組件。如果你在組件的render()方法中調(diào)用React.findDOMNode()就會(huì)拋出異常。

Refs

通過在要引用的 DOM 元素上面設(shè)置一個(gè) ref 屬性指定一個(gè)名稱，然后通過 this.refs.name 來訪問對(duì)應(yīng)的 DOM 元素。

比如有一種情況是必須直接操作 DOM 來實(shí)現(xiàn)的，你希望一個(gè) 元素在你清空它的值時(shí) focus，你沒法僅僅靠 state 來實(shí)現(xiàn)這個(gè)功能。

class App extends Component {
  constructor() {
    return { userInput: "" };
  }

  handleChange(e) {
    this.setState({ userInput: e.target.value });
  }

  clearAndFocusInput() {
    this.setState({ userInput: "" }, () => {
      this.refs.theInput.focus();
    });
  }

  render() {
    return (
      
        
          Click to Focus and Reset
        
        
      
    );
  }
}

如果ref 是設(shè)置在原生 HTML 元素上，它拿到的就是 DOM 元素，如果設(shè)置在自定義組件上，它拿到的就是組件實(shí)例，這時(shí)候就需要通過 findDOMNode來拿到組件的 DOM 元素。

因?yàn)闊o狀態(tài)組件沒有實(shí)例，所以 ref 不能設(shè)置在無狀態(tài)組件上，一般來說這沒什么問題，因?yàn)闊o狀態(tài)組件沒有實(shí)例方法，不需要 ref 去拿實(shí)例調(diào)用相關(guān)的方法，但是如果想要拿無狀態(tài)組件的 DOM 元素的時(shí)候，就需要用一個(gè)狀態(tài)組件封裝一層，然后通過 ref 和 findDOMNode 去獲取。