组件细节
组件是什么
组件参数--props
组件有且只有一个参数,props
函数组件只有一个参数--props
该参数是只读的,
底层实现是使用Object.freeze()进行冻结.
关于知识点扫盲,
1.判断对象是否被冻结,isFrozen()
2.密封,冻结,可扩展的区别
三者的严格程度
冻结>密封>扩展
冻结,就是不可新增或删除属性,不可修改现有属性值,不可劫持
密封,不可新增或删除属性,不可劫持,但可修改现有属性值,
扩展,不可新增属性,但可以删除现有属性,可修改现有属性值.
关于props对象
children属性,子节点数组.
关于组件元素节点属性,如何与props属性进行合并?
关于props的使用经验总结:
通过对象解构,获取必须的参数
包括事件都是通过props进行交互传递的.
组件属性默认值
使用参数默认值,在解构时赋予默认值.
或者通过if条件语句赋予默认值.
ts接口+默认值.
条件渲染
-
if条件判断
-
三元运算符
-
与运算符--&&
在使用与运算符时,不注意可能会掉进一个陷阱--就是与运算符左侧最好确定是布尔类型,当左侧是数值类型时,可能会出意外,就是当数值为0时,
选择性的将jsx复制给变量
插槽
react原生并不提供插槽机制,需要自行.
插槽是通过props的children属性来进行构建.这里分为三种情况
- null,单闭合标签,无子节点
- 对象,只有一个子节点
- 数组,多个子节点
props控制的是什么,
插槽是ui使用父组件传递过来的模板,使得ui布局更加灵活.
子组件通过预留占位符,可以使用父组件提供的模板片段.
组件基础
1. 渲染列表
组件数组?
2. 条件渲染
3. 动态样式
函数组件三大属性
props
只读的,单向的.
是被冻结的,只能读取属性的值,不能新增属性删除属性,也不能修改属性的值
状态
受控组件和非受控组件
受控组件类似vue中的数据双向绑定~ui和数据双向绑定.
关于受控组件和非受控组件的选择.
组件的分类
展示组件,类似模板
容器组件,处理业务逻辑
ui和逻辑分类,为设计默认,非reactAPI
组件封装
组件封装的原则
- 保持组件的纯粹
保持组件的纯粹
有些js函数是纯粹的,称之为纯函数,按照此逻辑,可以通过将组件按照纯函数严格编写,避免bug.
纯函数的特征:
-
只负责自己的任务.
-
输入相同,则输出相同.