react-props属性

react属性-props属性

一 props 的基本使用

需要理解的概念有：

• React中属性的传递方式，与class类的属性设置的差异区别
• React中属性的接收方式
• 解构赋值的处理操作

属性定义传递，属性使用，属性设置（组件标签），属性接收（prop）

二 批量传递 props

需要理解的概念有：

• 属性是否可以修改
• 解构赋值的内容与props的差异
• 批量属性传递
• 展开式语法与React中展开式参数传递

1.props是只读的，不能进行修改

2.批量传递属性值

3.展开式(spread)语法的回顾

	<script type="text/javascript">
		let obj = { a: 1, b: 2, c: 3 }
		let arr = [1, 3, 5, 7, 9]

		console.log(arr) // [1,3,5,7,9]
		console.log(...arr) // 1 3 5 7 9 --- ...可以展开一个数组的
		//console.log(...obj) //改行代码报错
    	// 1.对象是不可以用...展开
    	// 2.对象是不可以用for...of遍历

		const obj2 = { ...obj } //浅拷贝一个obj赋值给obj2  
		console.log(obj2 === obj)  //false

		const obj3 = { ...obj, b: 200 } //复制(浅)一个obj，且修改b为200，再赋值给obj3
		console.log(obj3)

	script>

三 对 props 进行限制

需要理解的概念有：

• 属性传递会有数据类型的问题
• 如何给类添加自身对象属性
• 利用propTypes进行属性约束
• 默认属性的设置

1.数据类型的差异导致结果有误

​

2.如何给类添加自身对象属性

3.利用propTypes进行属性约束

字符串类型，isRequird ：是否是必须，默认设置

4.默认属性的设置

四 props 的简写方式在类中的理解

需要理解的概念有：

• 类中的构造方法、一般方法、赋值语句、静态属性
• 构造方法、一般方法、赋值语句、静态属性的位置

	<script type="text/javascript">
        class Person {
            // 1.构造方法
            constructor(name, age) {
                this.name = name
                this.age = age
            }

            // 2.一般方法
            // 实例对象的原型对象上，隐式原型链上的方法属性
            speak() {
                console.log(`我是叫：${this.name},我今年${this.age}岁了`)
            }

            // 3.赋值语句
            // 类实例所有的属性
            classProp = '实例属性'

            // 4.静态属性
            // 类自身拥有的属性
            static staticProp = '静态属性'
        }

        const p1 = new Person('张三', 19)
        console.log(p1);
        console.log(Person.staticProp);
    script>

五 静态属性配置 props 限制

需要理解的概念有：

• 利用静态属性简化属性约束的操作

六 函数式组件使用 props

需要理解的概念有：

• 函数式组件属性传递的方式是什么
• 函数式组件属性的约束如何实现

1.函数式组件属性接收与属性约束

七 总结 props

需要理解的概念有：

概念的理解：

• 每个组件对象都会有props(properties的简写)属性
• 组件标签的所有属性都保存在props中

属性的作用：

• 通过标签属性从组件外向组件内传递变化的数据
• 注意：组件内部不要修改props数据

编码的操作：

• 不管是类组件还是函数式组件，都可以对props中的属性值进行类型限制和必要性限制
• 不管是类组件还是函数式组件，也都可以进行props的默认值的设置
• 可以利用扩展属性将对象的所有属性通过props传递