zoukankan      html  css  js  c++  java
  • 约束性组件和非约束性组件

    在上一篇写到模拟实现数据双向绑定的时候,使用到input的value属性,并通过onChange事件来监听这个属性值的变化,但是当我们使用了value属性却没有监听改变事件的时候,就会报错。

    在警告信息中提醒我们使用defaultValue,因此,当把value换成defaultValue时,就不会报错了。

    那么这个value和defaultValue有什么区别呢,这就是今天要总结的约束性组件和非约束性组件。

    所谓的非约束性组件,就是在<input type="text" defaultValue="a" /> 中,这个 defaultValue 其实就是原生DOM中的 value 属性。这样写出的来的组件,其value值就是用户输入的内容,React完全不管理输入的过程。

    而约束性组件是指在<input value={this.state.username} type="text" onChange={this.handleUsername} />中,value属性不再是一个写死的值,他是 this.state.username, this.state.username 是由 this.handleChange 负责管理的。这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后,由于 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程。看上去有点类似双向数据绑定。

    因此,我们可以根据自己的需要来决定是用defaultValue还是value了。

  • 相关阅读:
    php configure –help说明
    HTML5(目前)无法帮你实现的五件事多媒体
    Centos搭建PHP5.3.8+Nginx1.0.9+Mysql5.5.17
    lighttpdmod_secdownload 防盗链
    中文环境下PostgreSQL的使用
    一步一步教你安装Nginx+PHP+Mysql
    20+ 个免费和高级的 Web 视频播放器
    二十个你必须知道的SEO概念
    IO流
    sofaBoot
  • 原文地址:https://www.cnblogs.com/yuyujuan/p/10116901.html
Copyright © 2011-2022 走看看