React 奇技淫巧 - defaultValue 和虛擬 dom diff 算法實現表單重置

paulquei 發布于2019-08-20 16:42 / 2955人閱讀

摘要：根據虛擬的算法，只要改變節點的類型就能促使在的時候重新創建虛擬。不過這個效果依賴于虛擬算法。如果使用時候出現什么副作用，鄙人概不負責。此技巧在寫文章時正處于的版本

我們知道 React 的標準模式是單向數據流，而其表單項通常需要監聽 onChange 事件，然后通過改變外部的 value 來回寫表單項的 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 (
      
        
          
        
      
    )
  }
}

如果表單有很多表單項，那么這種標準的做法需要你寫很多個 state 的屬性和很多個 onChange 監聽函數，這是一個體力活兒。但是一般的表單應用其實不需要實時監控表單項的用戶輸入，用 defaultValue 足以，在表單項目 onBlur 或者最后提交的時候一次驗證獲取用戶輸入即可，譬如：

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

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

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

對于一個表單而言，通常還需要重置功能（reset），如果是第一種正模式的寫法，我們只要保存一份初始化的默認值，在用戶點擊到了重置后，通過 setState 設回去就行了。但是如果使用第二種 defaultValue 的寫法，那么就沒有辦法了，因為 defaultValue 只在第一次創建虛擬 dom 的時候有作用，如果 dom 不改變你改變 defaultValue 是沒有用的。這個時候該怎么辦呢？

嘿嘿！這個時候我們就可以用到這個奇技淫巧了。既然 defaultValue 是在創建虛擬 dom 的時候有用，那么我們在用戶點擊重置的時候讓 React 重新創建這些表單項的虛擬 dom 不就好了么。根據 React 虛擬 dom diff 的算法，只要改變 dom 節點的類型就能促使在 diff 的時候重新創建虛擬 dom。具體的寫法我們就用代碼來演示下：

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

思路就是在表單項外面包一層元素，每次點擊重置后改變一個變量，再強制刷新這個組件，組件根據這個變量不同的值把這個包裝元素的 type 改變，那么它下面的所有表單項的虛擬 dom 都會被重新創建，達到了重置的目的。不過這個效果依賴于 React 虛擬dom diff 算法。如果以后算法改變了，那么可能就失效了，而且這個寫法是反模式的，我初衷是想在處理巨型表單時候少寫點代碼偷懶用。如果使用時候出現什么副作用，鄙人概不負責。

此技巧在寫文章時 React 正處于 15.4.x 的版本

GPU云服務器云服務器 react dom cdn react-dom js 重置表單數據 react實現輪播圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83111.html

React入門看這篇就夠了

摘要：背景介紹入門實例教程起源于的內部項目，因為該公司對市場上所有框架，都不滿意，就決定自己寫一套，用來架設的網站。做出來以后，發現這套東西很好用，就在年月開源了。也就是說，通過鉤子函 react - JSX React 背景介紹 React 入門實例教程 React 起源于 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套...

luckyw 2019-08-22 13:55 評論0 收藏0
常見react面試題匯總（適合中級前端）

摘要：但在中會有些不同，包含表單元素的組件將會在中追蹤輸入的值，并且每次調用回調函數時，如會更新，重新渲染組件。在構造函數中調用的目的是什么在被調用之前，子類是不能使用的，在中，子類必須在中調用。將使用單個事件監聽器監聽頂層的所有事件。已經開源地址：https://github.com/nanhupatar...關注我們團隊：showImg(https://segmentfault.co...

leone 2019-08-23 12:40 評論0 收藏0
React

摘要：基礎創建虛擬參數元素名稱，例如參數屬性集合，例如，，，從參數開始，表示該元素的子元素，通常這些元素通過創建，文本文件可以直接插入嘻嘻哈哈這是渲染器，將元素渲染到頁面中。 React簡介 FeceBook開源的一套框架，專注于MVC的視圖V模塊。實質是對V視圖的一種實現。 React框架的設計沒有過分依賴于某個環境，它自建一套環境，就是virtual DOM（虛擬DOM）。提供基礎AP...

hlcc 2019-08-22 10:35 評論0 收藏0
react虛擬dom機制與diff算法

摘要：的一個突出特點是擁有極速地渲染性能。該功能依靠的就是研發團隊弄出的虛擬機制以及其獨特的算法。在的算法下，在同一位置對比前后節點只要發現不同，就會刪除操作前的節點包括其子節點，替換為操作后的節點。 React的一個突出特點是擁有極速地渲染性能。該功能依靠的就是facebook研發團隊弄出的虛擬dom機制以及其獨特的diff算法。下面簡單解釋一下react虛擬dom機制和diff算法的實現...

jzman 2019-08-21 11:53 評論0 收藏0
從Preact了解一個類React的框架是怎么實現的(二): 元素diff

摘要：本系列文章將重點分析類似于的這類框架是如何實現的，歡迎大家關注和討論。作為一個極度精簡的庫，函數是屬于本身的。前言　　首先歡迎大家關注我的掘金賬號和Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現，能堅持下去也是靠的是自己的熱情和大家的鼓勵。　　之前分享過幾篇關于React的文章: React技術內幕: key帶來了什么 React技術內幕: setState的秘密...

張巨偉 2019-08-21 16:42 評論0 收藏0