React 奇技淫巧 - defaultValue 和虚拟 dom diff 算法实现表单重置

paulquei 发布于2019-08-20 16:42 / 2947人阅读

摘要：根据虚拟的算法，只要改变节点的类型就能促使在的时候重新创建虚拟。不过这个效果依赖于虚拟算法。如果使用时候出现什么副作用，鄙人概不负责。此技巧在写文章时正处于的版本

我们知道 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 的版本

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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