react中的DOM操作實現

前面的話

  某些情況下需要在典型數據流外強制修改子代。要修改的子代可以是 React 組件實例,也可以是 DOM 元素。這時就要用到refs來操作DOM

使用場景

  下面是幾個適合使用 refs 的情況

  1、處理焦點、文本選擇或媒體控制

  2、觸發強制動畫

  3、集成第三方 DOM 庫

  如果可以通過聲明式實現,則盡量避免使用 refs

  [註意]不要在 Dialog 組件上直接暴露 open() 和 close() 方法,最好傳遞 isOpen 屬性

ref

  React 支持給任意組件添加特殊屬性。ref 屬性接受一個回調函數,它在組件被加載或卸載時會立即執行

  [註意]在組件mount之後再去獲取ref。componentWillMount和第一次render時都獲取不到,在componentDidMount才能獲取到

【HTML元素】

  當給 HTML 元素添加 ref 屬性時,ref 回調接收瞭底層的 DOM 元素作為參數

  React 組件在加載時將 DOM 元素傳入 ref 的回調函數,在卸載時則會傳入 null。ref 回調會在componentDidMount 或 componentDidUpdate 這些生命周期回調之前執行。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }
  focus() {
    this.textInput.focus();
  }
  render() {
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />
      </div>
    );
  }
}

  更簡短的寫法如下

ref={input => this.textInput = input}

【類組件】

  當 ref 屬性用於使用 class 聲明的自定義組件時,ref 的回調接收的是已經加載的 React 實例

class AutoFocusTextInput extends React.Component {
  componentDidMount() {
    this.textInput.focusTextInput();
  }

  render() {
    return (
      <CustomTextInput
        ref={(input) => { this.textInput = input; }} />
    );
  }
}

  [註意]這種方法僅對 class 聲明的 CustomTextInput 有效

【函數式組件】

  不能在函數式組件上使用 ref 屬性,因為它們沒有實例

【對父組件暴露DOM節點】

  在子節點上暴露一個特殊的屬性。子節點將會獲得一個函數屬性,並將其作為 ref 屬性附加到 DOM 節點。這允許父代通過中間件將 ref 回調給子代的 DOM 節點

  該方法適用於類組件和函數式組件

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

  在上面的例子中,Parent 將它的 ref 回調作為一個特殊的 inputRef 傳遞給 CustomTextInput,然後 CustomTextInput 通過 ref 屬性將其傳遞給 <input>。最終,Parent 中的 this.inputElement 將被設置為與 CustomTextInput 中的 <input> 元素相對應的 DOM 節點

非受控組件

  要編寫一個非受控組件,而非為每個狀態更新編寫事件處理程序,可以使用 ref 從 DOM 獲取表單值

  [註意]可能通過e.target.value取得DOM值,而不用綁定react

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

  由於非受控組件將真實數據保存在 DOM 中,因此在使用非受控組件時,更容易同時集成React和非React代碼

【默認值】

  在 React 的生命周期中,表單元素上的 value 屬性將會覆蓋 DOM 中的值。使用非受控組件時,通常希望 React 可以為其指定初始值,但不再控制後續更新。要解決這個問題,可以指定一個 defaultValue 屬性而不是 value

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={(input) => this.input = input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

  同樣,<input type=”checkbox”> 和 <input type=”radio”> 支持 defaultChecked,<select> 和 <textarea> 支持 defaultValue

ReactDOM

  react-dom這個軟件包提供瞭針對DOM的方法,可以在應用的頂級域中調用,也可以在有需要的情況下用作跳出React模型的出口。但大部分組件都不應該需要使用這個包

render()
unmountComponentAtNode()
findDOMNode()

【render()】

ReactDOM.render(
  element,
  container,
  [callback]
)

  渲染一個React元素,添加到位於提供的container裡的DOM元素中,並返回這個組件的一個 引用 (或者對於無狀態組件返回null)

  如果這個React元素之前已經被渲染到container裡去瞭,這段代碼就會進行一次更新,並且隻會改變那些反映元素最新狀態所必須的DOM元素

【unmountComponentAtNode()】

ReactDOM.unmountComponentAtNode(container)
  從DOM元素中移除已掛載的React組件,清除它的事件處理器和state。如果容器內沒有掛載任何組件,這個函數什麼都不會幹。 有組件被卸載的時候返回true,沒有組件可供卸載時返回 false

【findDOMNode()】

ReactDOM.findDOMNode(component)
  如果這個組件已經被掛載到DOM中,函數會返回對應的瀏覽器中生成的DOM元素 。需要從DOM中讀取值時,比如表單的值,或者計算DOM元素的尺寸,這個函數會非常有用。 大多數情況下,可以添加一個指向DOM節點的引用,從而完全避免使用findDOMNode 這個函數。當 render 返回 null 或者 false 時, findDOMNode 也返回 null

新ref

  版本16.3 之前,React 有兩種提供 ref 的方式:字符串和回調,因為字符串的方式有些問題,所以官方建議使用回調來使用 ref。而現在引入的 createRef API,據官方說是一種零缺點的使用 ref 的方式,回調方式也可以讓讓路瞭

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

  然後使用current屬性,即可獲得當前元素

this.myRef.current

  典型應用如下所示

  constructor(props){
    super(props)
    this.Mask = React.createRef()
    this.MenuList = React.createRef()
  }
  handleClick = () => {
    ReactDOM.findDOMNode(this.MenuList.current).classList.toggle('transform-zero')
    ReactDOM.findDOMNode(this.Mask.current).classList.toggle('mask-show')
  }

   [註意]使用styledComponents樣式化的元素暴露的接口是innerRef,而不是ref

<Wrap innerRef={this.itemRef}>

到此這篇關於react中的DOM操作實現的文章就介紹到這瞭,更多相關react DOM操作內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: