bt365体育投注.主頁欢迎您!!

    <acronym id="zvmrr"></acronym>
    <td id="zvmrr"></td>
  • <tr id="zvmrr"><label id="zvmrr"></label></tr>
  • <acronym id="zvmrr"></acronym>
  • 关于受控非受控组件的一些疑问,客官进来看看

    吃山鬼的神仙
    • 1.2k

    React文档里面对受控和非受控组件做了说明,但是貌似只拿表单做类比,所谓受控就是这类表单数据的变化的过程都能被react控制,如果只给初始值defaultValue,那么它是一个非受控组件。
    个人的简单理解就是

    你能控制这个组件的输入,和变化,就是可控组件
    相反
    你只能控制初始值,后面的变化由组件内部控制,那么就是非受控组件
    

    这些例子在input, textarea等组件上是比较好理解的,那么我们在自定义组件上是否也可以划分受控, 非受控呢?
    比如props会影响子组件的初始值,但是组件内部也会去控制这个值,这时候是受控还是不受控,如果影响初始值的这个逻辑,在子组件中进行捕获,然后再做处理,这个时候是受控还是非受控?还是间歇受控?

    评论
    阅读 277
    3 个回答

    最早接触这个词语是因为要做带自动校验和纠正(非数字的字符自动忽略)的号码输入框。
    由于此前都是 jQuery 一把梭,所以理所当然地认为监听—校验—替换三部曲就可以完事。但是一写就感觉和设想的不是一回事,因为替换也会触发监听导致死循环……然后才补上了受控组件这一课,但没有像题主这样深入探讨,因为我一直很循规蹈矩:状态只在应用级组件才有,子组件全是函数组件。
    我一直以为自己把受控/非受控的界限拎得很清,但遇到这个问题才发现并非如此。再复习一下文档,才发现官方给的例子全都是浏览器提供的、天生就能够进行状态自治的元素,并没有提到自定义组件的情形。元素的状态自治与React单向数据流理念是有所冲突的;但是对于经验丰富的开发者而言,有时候他们大可继续享受这种自治带来的便利性,把交互事件交给浏览器,只在必要的时候才去取值——这里的冲突决定了受控组件的诞生,而这里的便利则给非受控组件留下了一席之地。
    仔细想想,React的这种说法有点给自己贴金的意思。因为“不受控”的其实是元素,一旦元素“受控”,那它就不再是一个纯粹的元素了,而是一个被代理事件、控制状态的React组件。那么,以我之见,不受控组件就是原生的、状态自治的元素,受控组件则是React组件,只不过其中包装了前述元素。假如按照我的这种分类,题主的疑虑就可以打消了:带状态的子组件也是受控组件
    但是,绝大多数组件开发者的水平是不及浏览器开发者的(各位不要打我),这就导致:原生元素再难对付,它也是有固定范式的,我们可以通过劫持事件来接管其状态;但如果组件没有提供良好的接口的话,我们很难充分介入其状态管理,这就造成了“说好的非受控组件,我却没法控制它”的尴尬境地。但这只是作者虑事不周所致,它还是受控的(有点绕啊天)。
    个人见解。

    你最后说的那中情况是非受控组件,受控的意思是子组件的渲染时机完全由父组件控制。换个通俗的讲法,受控组件就是个“听话的工具人”,父组件给啥用啥,让你干啥你就干啥,不给你,不指挥你,你就啥也不干,至于怎么用,就看开发者把它定义为实现何种功能。

    个人理解,以 react 常规写法实现就好,最好不要有骚操作,就好比明明可以通过 setState 及onChage 就可改变值,可非要使用 ref 或者 原生 js 或者 jquery,一旦项目复杂之后,会出现奇奇怪怪的问题。

    至于你提到的自定义组件上受控组件和非受控组件的划分,看你组件的数据是否通过 state 或者 props 管理的,如果还是用的骚操作,那就要注意了,坑从此刻就挖下了。

    宣传栏
    bt365体育投注