浅谈React深度编程之受控组件与非受控组件


Posted in Javascript onDecember 26, 2017

受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意。这恰恰显示React的威力,满足不同规模大小的工程需求。譬如你只是做ListView这样简单的数据显示,将数据拍出来,那么for循坏与 {} 就足够了,但后台系统存在大量报表,不同的表单联动,缺了受控组件真的不行。

受控组件与非受控组件是React处理表单的入口。从React的思路来讲,作者肯定让数据控制一切,或者简单的理解为,页面的生成与更新得忠实地执行JSX的指令。

但是表单元素有其特殊之处,用户可以通过键盘输入与鼠标选择,改变界面的显示。界面的改变也意味着有一些数据被改动,比较明显的是input的 value ,textarea的 innerHTML ,radio/checkbox的 checked ,不太明显的是option的 selected 与 selectedIndex ,这两个是被动修改的。

<input value="{this.state.value}"/>

 当input.value是由组件的state.value拍出来的,当用户进行输入修改后,然后JSX再次重刷视图,这时input.value是采取用户的新值还是state的新值?基于这个分歧,React给出一个折衷的方案,两者都支持,于是就产生了今天的主题了。

React认为value/checked不能单独存在,需要与onInput/onChange/disabed/readOnly等控制value/checked的属性或事件一起使用。 它们共同构成 受控组件 ,受控是受JSX的控制。如果用户没有写这些额外的属性与事件,那么框架内部会给它添加一些事件,如onClick, onInput, onChange,阻止你进行输入或选择,让你无法修改它的值。在框架内部,有一个顽固的变量,我称之为 persistValue,它一直保持JSX上次赋给它的值,只能让内部事件修改它。

因此我们可以断言,受控组件是可通过 事件 完成的对value的控制。

在受控组件中,persistValue总能被刷新。

我们再看非受控组件,既然value/checked已经被占用了,React启用了HTML中另一组被忽略的属性defaultValue/defaultChecked。一般认为它们是与value/checked相通的,即,value不存在的情况下,defaultValue的值就当作是value。

上面我们已经说过,表单元素的显示情况是由内部的 persistValue 控制的,因此defaultXXX也会同步persistValue,然后再由persistValue同步DOM。但非受控组件的出发点是忠实于用户操作,如果用户在代码中

input.value = "xxxx"

以后

<input defaultvalue="{this.state.value}"/>

就再不生效,一直是xxxx。

它怎么做到这一点,怎么辨识这个修改是来自框架内部或外部呢?我翻看了一下React的源码,原来它有一个叫valueTracker的东西跟踪用户的输入

var tracker = {
  getValue: function () {
   return currentValue;
  },
  setValue: function (value) {
   currentValue = '' + value;
  },
  stopTracking: function () {
   detachTracker(node);
   delete node[valueField];
  }
 };
 return tracker;
}

这个东西又是通过Object.defineProperty打进元素的value/checked的内部,因此就知晓用户对它的取值赋值操作。

但value/checked还是两个很核心的属性,涉及到太多内部机制(比如说value与oninput, onchange, 输入法事件oncompositionstart,

compositionchange, oncompositionend, onpaste, oncut),为了平缓地修改value/checked,

还要用到 Object.getOwnPropertyDescriptor 。如果我要兼容IE8,没有这么高级的玩艺儿。我采取另一种更安全的方式,

只用Object.defineProperty修改 defaultValue/defaultChecked 。

首先我为元素添加一个 _uncontrolled 的属性,用来表示我已经劫持过defaultXXX。 然后描述对象 ( Object.defineProperty的第三个参数 )的set方法里面再添加一个开关, _observing 。在框架内部更新视图,此值为false,更新完,它置为true。

这样就知晓 input.defaultValue = “xxx”时,这是由用户还是框架修改的。

if (!dom._uncontrolled) {
  dom._uncontrolled = true;
  inputMonitor.observe(dom, name); //重写defaultXXX的setter/getter
}
dom._observing = false;//此时是框架在修改视图,因此需要关闭开关
dom[name] = val;
dom._observing = true;//打开开关,来监听用户的修改行为

inputMonitor的实现如下

export var inputMonitor = {};
var rcheck = /checked|radio/;
var describe = {
  set: function(value) {
    var controllProp = rcheck.test(this.type) ? "checked" : "value";
    if (this.type === "textarea") {
      this.innerHTML = value;
    }
    if (!this._observing) {
      if (!this._setValue) {
        //defaultXXX只会同步一次_persistValue
        var parsedValue = (this[controllProp] = value);
        this._persistValue = Array.isArray(value) ? value : parsedValue;
        this._setValue = true;
      }
    } else {
      //如果用户私下改变defaultValue,那么_setValue会被?{掉
      this._setValue = value == null ? false : true;
    }
    this._defaultValue = value;
  },
  get: function() {
    return this._defaultValue;
  },
  configurable: true
};
 
inputMonitor.observe = function(dom, name) {
  try {
    if ("_persistValue" in dom) {
      dom._setValue = true;
    }
    Object.defineProperty(dom, name, describe);
  } catch (e) {}
};

又不小心贴了这么烧脑的代码,这是码农的坏毛病。不过,到这步,大家都明白,无论是官方react还是anu/qreact都是通过Object.defineProperty来控制用户的输入的。

于是我们可以理解以下的代码的行为了

var a = ReactDOM.render(<textarea defaultValue="foo" />, container);
  ReactDOM.render(<textarea defaultValue="bar" />, container);
  ReactDOM.render(<textarea defaultValue="noise" />, container);
  expect(a.defaultValue).toBe("noise");
  expect(a.value).toBe("foo");
  expect(a.textContent).toBe("noise");
  expect(a.innerHTML).toBe("noise");

由于用户一直没有手动修改 defaultValue, dom._setValue 一直为 false/undefined ,因此 _persistValue 一直能修改。

另一个例子:

var renderTextarea = function(component, container) {
  if (!container) {
    container = document.createElement("div");
  }
  const node = ReactDOM.render(component, container);
  node.defaultValue = node.innerHTML.replace(/^\n/, "");
  return node;
};
 
const container = document.createElement("div");
//注意这个方法,用户在renderTextarea中手动改变了defaultValue,_setValue就变成true
const node = renderTextarea(<textarea defaultValue="giraffe" />, container);
 
expect(node.value).toBe("giraffe");
 
// _setValue后,gorilla就不能同步到_persistValue,因此还是giraffe
renderTextarea(<textarea defaultValue="gorilla" />, container);
// expect(node.value).toEqual("giraffe");
 
node.value = "cat";
// 这个又是什么回事了呢,因此非监控属性是在diffProps中批量处理的,在监控属性,则是在更后的方法中处理
// 检测到node.value !== _persistValue,于是重写 _persistValue = node.value,于是输出cat
renderTextarea(<textarea defaultValue="monkey" />, container);
expect(node.value).toEqual("cat");

纯文本类:text, textarea, JSX的值,总是往字符串转换

type=”number”的控制,值总是为数字,不填或为“”则转换为“0”

radio有联动效果,同一父节点下的相同name的radio控制只能选择一个。

select的value/defaultValue支持数组,不做转换,但用户对底下的option元素做增删操作,selected会跟着变动。

此外select还有模糊匹配与精确匹配之分。

//精确匹配
var dom = ReactDOM.render(
  <select value={222}>
    <option value={111}>aaa</option>
    <option value={"222"}>xxx</option>
    <option value={222}>bbb</option>
    <option value={333}>ccc</option>
  </select>,
  container
);
expect(dom.options[2].selected).toBe(true);//选中第三个
//模糊匹配
var dom = ReactDOM.render(
  <select value={222}>
    <option value={111}>aaa</option>
    <option value={"222"}>xxx</option>
    <option value={333}>ccc</option>
  </select>,
  container
);
expect(dom.options[2].selected).toBe(true);//选中第二个

凡此种种,React/anu都是做了大量工作,迷你如preact/react-lite之流则可能遇坑。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
js验证账户名是否重复
May 26 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 #Javascript
vue的一个分页组件的示例代码
Dec 25 #Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 #jQuery
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 #Javascript
推荐10款扩展Web表单的JS插件
Dec 25 #Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 #Javascript
You might like
收音机指标测试方法及仪器
2021/03/01 无线电
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python实现汇率转换操作
2020/05/03 Python
DNA测试:Orig3n
2019/03/01 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
科室工作个人总结的自我评价
2013/10/29 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
python中的sys模块和os模块
2022/03/20 Python
Python使用MapReduce进行简单的销售统计
2022/04/22 Python
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python