Skip to main content

Props

关于ES6中对象的规则设置

冻结
- 冻结对象: 0bject.freeze(obj)
- 检测是否被冻结: 0biect.isFrozen(obi) =>true/false
- 被冻结的对象:不能修改成员值、不能新增成员、不能删除现有成员、不能给成员做劫持 0biect,defineProperty
密封
- 密封对象: 0bject.seal(obj)
- 检测是否被密封: 0bject.isSealed(obj)
- 被密封的对象:可以修改成员的值，但也不能删、不能新增、不能劫持!!
扩展
- 把对象设置为不可扩展: 0bject.preventExtensions(obj)
- 检测是否可扩展: 0bject.isExtensible(obj)

属性props的处理

调用组件
```
- 传递进来的属性是“只读”的原理
  - props对象被冻结了JObject.isFrozen(props) -> true
- 获取:
  - props.xxx
- 修改:
  - props.xxx=xxx => 报错
```
tip
父组件(index.jsx)调用子组件(Demone.jsx)的时候，可以基于属性，把不同的信息传递给子组件，子组件接收响应的属性值，呈现出不同的效果，让组件的复用性更强!!

虽然对于传递进来的属性，我们不能直接修改，但是可以做一些规则校验
设置默认值
```
    MyFunctionalComponent.defaultProps = {
        x:0,
        // ...
    }
```

设置其它规则

例如:数据值格式、是否必传
- 依赖于官方的一个插件:prop-types
- https://github.com/facebook/prop-types

设置校验规则
    import PropTypes from'prop-types'

    myFunctionalComponent.propTypes = {
        // 类型是字符串、必传
        title: PropTypes.string.isRequired,
        //类型是数字
        x: PropTypes.number,
        //多种校验规则中的一个
        y: PropTypes.one0fType([
            PropTypes.number,
            PropTypes.bool
        ])
    }

tip

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

关于ES6中对象的规则设置
属性props的处理