微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

React 深度编程:受控组件与非受控组件

2017-12-24 17:30 前端大全

(点击上方公众号,可快速关注)


作者:司徒正美

https://segmentfault.com/a/1190000012458996


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

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

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

 
           
  1. <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。但非受控组件的出发点是忠实于用户操作,如果用户在代码中

 
           
  1. input.value = "xxxx"

以后

 
           
  1. <input defaultValue={this.state.value} />

就再不生效,一直是xxxx。

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

 
           
  1. var tracker = {

  2.    getValue: function () {

  3.      return currentValue;

  4.    },

  5.    setValue: function (value) {

  6.      currentValue = '' + value;

  7.    },

  8.    stopTracking: function () {

  9.      detachTracker(node);

  10.      delete node[valueField];

  11.    }

  12.  };

  13.  return tracker;

  14. }

这个东西又是通过 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"时,这是由用户还是框架修改的。

 
           
  1. f (!dom._uncontrolled) {

  2.    dom._uncontrolled = true;

  3.    inputMonitor.observe(dom, name); //重写defaultXXX的setter/getter

  4. }

  5. dom._observing = false;//此时是框架在修改视图,因此需要关闭开关

  6. dom[name] = val;

  7. dom._observing = true;//打开开关,来监听用户的修改行为

inputMonitor的实现如下

 
           
  1. export var inputMonitor = {};

  2. var rcheck = /checked|radio/;

  3. var describe = {

  4.    set: function(value) {

  5.        var controllProp = rcheck.test(this.type) ? "checked" : "value";

  6.        if (this.type === "textarea") {

  7.            this.innerHTML = value;

  8.        }

  9.        if (!this._observing) {

  10.            if (!this._setValue) {

  11.                //defaultXXX只会同步一次_persistValue

  12.                var parsedValue = (this[controllProp] = value);

  13.                this._persistValue = Array.isArray(value) ? value : parsedValue;

  14.                this._setValue = true;

  15.            }

  16.        } else {

  17.            //如果用户私下改变defaultValue,那么_setValue会被抺掉

  18.            this._setValue = value == null ? false : true;

  19.        }

  20.        this._defaultValue = value;

  21.    },

  22.    get: function() {

  23.        return this._defaultValue;

  24.    },

  25.    configurable: true

  26. };

  27. inputMonitor.observe = function(dom, name) {

  28.    try {

  29.        if ("_persistValue" in dom) {

  30.            dom._setValue = true;

  31.        }

  32.        Object.defineProperty(dom, name, describe);

  33.    } catch (e) {}

  34. };

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

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

 
           
  1.    var a =  ReactDOM.render(<textarea defaultValue="foo" />, container);

  2.    ReactDOM.render(<textarea defaultValue="bar" />, container);

  3.    ReactDOM.render(<textarea defaultValue="noise" />, container);

  4.    expect(a.defaultValue).toBe("noise");

  5.    expect(a.value).toBe("foo");

  6.    expect(a.textContent).toBe("noise");

  7.    expect(a.innerHTML).toBe("noise");

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

另一个例子:

 
           
  1. var renderTextarea = function(component, container) {

  2.    if (!container) {

  3.        container = document.createElement("div");

  4.    }

  5.    const node = ReactDOM.render(component, container);

  6.    node.defaultValue = node.innerHTML.replace(/^\n/, "");

  7.    return node;

  8. };

  9. const container = document.createElement("div");

  10. //注意这个方法,用户在renderTextarea中手动改变了defaultValue,_setValue就变成true

  11. const node = renderTextarea(<textarea defaultValue="giraffe" />, container);

  12. expect(node.value).toBe("giraffe");

  13. // _setValue后,gorilla就不能同步到_persistValue,因此还是giraffe

  14. renderTextarea(<textarea defaultValue="gorilla" />, container);

  15. //  expect(node.value).toEqual("giraffe");

  16. node.value = "cat";

  17. // 这个又是什么回事了呢,因此非监控属性是在diffProps中批量处理的,在监控属性,则是在更后的方法中处理

  18. // 检测到node.value !== _persistValue,于是重写 _persistValue = node.value,于是输出cat

  19. renderTextarea(<textarea defaultValue="monkey" />, container);

  20. expect(node.value).toEqual("cat");

当然表单元素也分许多种,每种表单元素也有其默认行为。

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

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

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

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

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

 
           
  1. //精确匹配

  2. var dom = ReactDOM.render(

  3.    <select value={222}>

  4.        <option value={111}>aaa</option>

  5.        <option value={"222"}>xxx</option>

  6.        <option value={222}>bbb</option>

  7.        <option value={333}>ccc</option>

  8.    </select>,

  9.    container

  10. );

  11. expect(dom.options[2].selected).toBe(true);//选中第三个

 
           
  1. //模糊匹配

  2. var dom = ReactDOM.render(

  3.    <select value={222}>

  4.        <option value={111}>aaa</option>

  5.        <option value={"222"}>xxx</option>

  6.        <option value={333}>ccc</option>

  7.    </select>,

  8.    container

  9. );

  10. expect(dom.options[2].selected).toBe(true);//选中第二个

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


觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 简单粗暴地理解 JS 原型链 我对Flexbox布局模式的理解 JavaScript 打怪升级 —— 把业务逻辑当练习题做 Ajax 跨域,这应该是最全的解决方案了 重磅下载!678页阿里内部技术干货
猜您喜欢 你应该知道的Android开发的好习惯 Python常见误区 书单:一个进阶的Android程序员 工业界 vs. 学术界:应该如何做选择? 80% 以上简历都是不合格的