关于props属性的细节知识

101 阅读2分钟

属性props的处理

  • 调用组件,传递进来的属性是“只读”的「原理:props对象被冻结了」

image.png

Object.isFrozen(props) -> true

获取:props.xxx

修改:props.xxx=xxx  =>报错

image.png

  • 作用:父组件(index.jsx)调用子组件(DemoOne.jsx)的时候,可以基于属性,把不同的信息传递给子组件;子组件接收相应的属性值,呈现出不同的效果,让组件的复用性更强!!

  • 虽然对于传递进来的属性,我们不能直接修改,但是可以做一些规则校验

    • 设置默认值
      函数组件.defaultProps = {

        x: 0,

        ......

      };

image.png

image.png

image.png
可以看到,调用了两次组件,一个传了X,一个没传,没传的默认X是0

+ 设置其它规则,例如:数据值格式、是否必传... 「依赖于官方的一个插件:prop-types」

  https://github.com/facebook/prop-types
      import PropTypes from 'prop-types';

      函数组件.propTypes = {

        // 类型是字符串、必传

        title: PropTypes.string.isRequired,

        // 类型是数字

        x: PropTypes.number,

        // 多种校验规则中的一个

        y: PropTypes.oneOfType([

            PropTypes.number,

            PropTypes.bool,

        ])

      };

    传递进来的属性,首先会经历规则的校验,不管校验成功还是失败,最后都会把属性给形参props,只不过如果不符合设定的规则,控制台会抛出警告错误{不影响属性值的获取}!!

  + 如果就想把传递的属性值进行修改,我们可以:

    + 把props中的某个属性赋值给其他内容「例如:变量、状态...」

    + 我们不直接操作props.xxx=xxx,但是我们可以修改变量/状态值!!







扫盲知识点:关于对象的规则设置

  + 冻结

    冻结对象:Object.freeze(obj)

    检测是否被冻结:Object.isFrozen(obj) =>true/false

    + 被冻结的对象:不能修改成员值、不能新增成员、不能删除现有成员、不能给成员做劫持「Object.defineProperty」

  + 密封

    密封对象:Object.seal(obj)

    检测是否被密封:Object.isSealed(obj)

    + 被密封的对象:可以修改成员的值,但也不能删、不能新增、不能劫持!!

  + 扩展

    把对象设置为不可扩展:Object.preventExtensions(obj)

    检测是否可扩展:Object.isExtensible(obj)

    + 被设置不可扩展的对象:除了不能新增成员、其余的操作都可以处理!!

  被冻结的对象,即是不可扩展的,也是密封的!!同理,被密封的对象,也是不可扩展的!!