React--props细节知识

React–props细节知识

1.属性Props的处理

+调用组件、传递进来的属性是‘只读’的【原理：props对象被冻结了】
获取：props.xxx
修改：不允许
+作用：父组件调用子组件的时候，可以基于属性，把不同的信息传递给子组件，子组件接口响应的属性值，呈现不同的效果，让组件的复用性更强
+虽然对传递进来的属性不能直接修改，但是可以做规则校验
+设置默认值

import React from "react";

const DemoOne=(props)=>{
    const {x}=props
    return(
        <div>
            DomeOne
        </div>
    )
}
/*通过把函数当做对象，设置静态的私有方法，来给其设置属性的校验规则 */
DemoOne.DefalutProps={
    x:0
}
export default DemoOne
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

+设置其他规则，例如：数据格式、是否必传【依赖插件-prop-type】

DemoOne.defalutProps={
    x:0
}
DemoOne.propsTypes={
	//检验类型为数字，必传
    DemoOne.propsTypes={
    x:PropTypes.number.isRequired,
    //多种类型校验
    y:PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.bool
    ])
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

相关知识点：
+冻结
冻结对象：Object.freeze(object)
检测是否被冻结：Object.isFrozen(obj) => true/false
+被冻结的对象不能修改、新增、删除成员，不能给成员做劫持【Object.defineProperty】
+密封
密封对象：Object.seal(obj)
检测是否被密封：Object.isSealed(obj)
+被密封的对象：可以修改成员值，但是不能新增、删除和劫持成员值
+扩展
把对象设置为不可扩展：Object.preventExtensions(obj)
检测是否可扩展：Object.isExtensible(obj)
+被设置为不可扩展对象：除了不能新增成员，其余的操作都可以处理
被冻结的对象，既是密封也是不可扩展的