React 奇技淫巧 - defaultValue 和虛擬 dom diff 算法實(shí)現(xiàn)表單重置

paulquei 發(fā)布于2019-08-20 16:42 / 2948人閱讀

摘要：根據(jù)虛擬的算法，只要改變節(jié)點(diǎn)的類型就能促使在的時(shí)候重新創(chuàng)建虛擬。不過(guò)這個(gè)效果依賴于虛擬算法。如果使用時(shí)候出現(xiàn)什么副作用，鄙人概不負(fù)責(zé)。此技巧在寫(xiě)文章時(shí)正處于的版本

我們知道 React 的標(biāo)準(zhǔn)模式是單向數(shù)據(jù)流，而其表單項(xiàng)通常需要監(jiān)聽(tīng) onChange 事件，然后通過(guò)改變外部的 value 來(lái)回寫(xiě)表單項(xiàng)的 value，譬如如下 input

class App extends React.Component {
  constructor( props ) {
    super( props );
    this.state = {
      inputValue: "default"
    }

    this.inputChangeHandler = ( e )=>{
      this.setState( {
        inputValue: e.target.value
      } );
    }
  }
  render() {
    return (
      
        
          
        
      
    )
  }
}

如果表單有很多表單項(xiàng)，那么這種標(biāo)準(zhǔn)的做法需要你寫(xiě)很多個(gè) state 的屬性和很多個(gè) onChange 監(jiān)聽(tīng)函數(shù)，這是一個(gè)體力活兒。但是一般的表單應(yīng)用其實(shí)不需要實(shí)時(shí)監(jiān)控表單項(xiàng)的用戶輸入，用 defaultValue 足以，在表單項(xiàng)目 onBlur 或者最后提交的時(shí)候一次驗(yàn)證獲取用戶輸入即可，譬如：

class App extends React.Component {
  constructor( props ) {
    super( props );

    this.submit = ( e )=>{
      let userInputValue = this.refs.userInput.value;
      // 1. 驗(yàn)證 userInputValue
      // 2. 提交表單
    }
  }
  render() {
    return (
      
        
          
          
        
      
    )
  }
}

這樣就可以少寫(xiě)不少代碼，當(dāng)然你可以寫(xiě)一些工具去批量添加所有的 onChange 事件監(jiān)聽(tīng)函數(shù)和對(duì)應(yīng)的 state 的屬性，譬如 redux-form。（回頭一想，這種寫(xiě)法在提交時(shí)候也需要寫(xiě)很多獲取用戶輸入的代碼，如果使用第一種正模式，那么提交時(shí)候只需要獲取 state 就可以了，不過(guò)這里先不討論這些）

對(duì)于一個(gè)表單而言，通常還需要重置功能（reset），如果是第一種正模式的寫(xiě)法，我們只要保存一份初始化的默認(rèn)值，在用戶點(diǎn)擊到了重置后，通過(guò) setState 設(shè)回去就行了。但是如果使用第二種 defaultValue 的寫(xiě)法，那么就沒(méi)有辦法了，因?yàn)?defaultValue 只在第一次創(chuàng)建虛擬 dom 的時(shí)候有作用，如果 dom 不改變你改變 defaultValue 是沒(méi)有用的。這個(gè)時(shí)候該怎么辦呢？

嘿嘿！這個(gè)時(shí)候我們就可以用到這個(gè)奇技淫巧了。既然 defaultValue 是在創(chuàng)建虛擬 dom 的時(shí)候有用，那么我們?cè)谟脩酎c(diǎn)擊重置的時(shí)候讓 React 重新創(chuàng)建這些表單項(xiàng)的虛擬 dom 不就好了么。根據(jù) React 虛擬 dom diff 的算法，只要改變 dom 節(jié)點(diǎn)的類型就能促使在 diff 的時(shí)候重新創(chuàng)建虛擬 dom。具體的寫(xiě)法我們就用代碼來(lái)演示下：

class App extends React.Component {
  constructor( props ) {
    super( props );
    // fieldSetWrapperType 是一個(gè)標(biāo)志位屬性，render 中會(huì)根據(jù)這個(gè)變量的值的不同，渲染不同的元素
    this.fieldSetWrapperType = "div";
    this.submit = ( e )=>{
      let userInputValue = this.refs.userInput.value;
      // 1. 驗(yàn)證 userInputValue
      // 2. 提交表單
    }
    this.reset = ()=>{
      // 點(diǎn)擊重置，改變標(biāo)志位
      this.fieldSetWrapperType = this.fieldSetWrapperType === "div" ? "section" : "div";
      // 強(qiáng)制刷新這個(gè)組件
      this.forceUpdate();
    }
  }
  // 把表單項(xiàng)的渲染抽象到一個(gè)方法中，避免重復(fù)編碼
  renderFieldSet() {
    return (
      
    );
  }
  render() {
    return (
      
        
          {
          /* 根據(jù) fieldSetWrapperType 值的不同，渲染不同的元素（表單項(xiàng)的 wrapper 元素） */
          this.fieldSetWrapperType === "div" ? 
          { this.renderFieldSet() }
          :
          { this.renderFieldSet() }
          }
          
          
        
      
    )
  }
}

思路就是在表單項(xiàng)外面包一層元素，每次點(diǎn)擊重置后改變一個(gè)變量，再?gòu)?qiáng)制刷新這個(gè)組件，組件根據(jù)這個(gè)變量不同的值把這個(gè)包裝元素的 type 改變，那么它下面的所有表單項(xiàng)的虛擬 dom 都會(huì)被重新創(chuàng)建，達(dá)到了重置的目的。不過(guò)這個(gè)效果依賴于 React 虛擬dom diff 算法。如果以后算法改變了，那么可能就失效了，而且這個(gè)寫(xiě)法是反模式的，我初衷是想在處理巨型表單時(shí)候少寫(xiě)點(diǎn)代碼偷懶用。如果使用時(shí)候出現(xiàn)什么副作用，鄙人概不負(fù)責(zé)。

此技巧在寫(xiě)文章時(shí) React 正處于 15.4.x 的版本