React组件进阶
- 能够实用props结束数据
- 能够实现父子组件之间的通讯
- 能够实现兄弟组件之间的通讯
- 能够给组件添加props校验
- 能够说出生命周期常用的钩子函数
- 能够知道高阶组件的作用
组件通讯介绍
组件是独立封闭的单元,在默认情况下,只能使用组件自己的数据,在组件化的过程当中,完整的功能被拆分成多个组件,以更好的完成整个应用的功能,在整个过程中,多个组件不可避免地要共享某些数据,为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通,这个过程就是组件通讯
组件的props
组件是封闭的,要接收外部数据应该通过props来实现
props的作用:接受传递给组件的数据
传递数据:给组件标签添加属性
接受数据:函数组件通过参数props接受数据,类组件通过this.props接收数据
组件的props特点
- 可以给组件传递任意类型的数据
- props是只读的对象,只能读取属性的值,无法修改对象
- 注意:使用类组件时,如果写了构造函数,应该将props传递给super(),否则,无法在构造函数中获取到props!
class Hello extends React.Component{
constructor(props) {
super(props)
}
render() {
return <div>接受到的数据:{this.props.age}</div>
}
}
组件通讯的三种方式
-
父组件->子组件
父组件要提供传递的state数据
给子组件标签添加属性,值为state中的数据
子组件中通过props接受父组件中传递的数据 -
子组件->父组件
思路: 回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数
父组件提供一个回调函数(用于接受数据)
将该函数作为属性的值,传递给子组件
子组件通过props调用回调函数
将子组件的数据作为参数传递给回调函数
注意this的指向问题
-
兄弟组件
将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态
思想:状态提升
公共父组件职责: -
提供共享状态
-
提供操作共享状态的方法
要通讯的子组件只需通过props接受状态或操作的方法 -
Context
若有多层子组件,一层一层传递十分繁琐
使用Context进行跨组件传递数据 -
调用React.createContext创建Provider(提供组件)和Consumer(消费组件)两个组件。
const { Provider,Consumer} = React.createContext() -
使用Provider组件作为父节点
<Provider>
<div className="App">
<Child1/>
</div>
</Provider>
props深入
-
children属性
表示组价标签的子节点,当组件标签有子节点时,props就会有该属性
children属性与普通的props是一样的,值也可以是普通的任意值(文本,React元素,组件,甚至是函数) -
props校验
对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据
若传入的数据格式不对,可能会导致组件内部报错
关键问题:组件的使用者不知道明确的错误原因
props校验允许在创建组件时,就指定props的类型,格式
作用:捕捉使用组件时因为props导致的错误,给出明确的错误提示,增加组件的健壮性
安装包props-types(yarn add prop-types/npm i prop-types)
导入prop-types包
使用组件包propTypes={}来给组件的props添加校验规则
校验规则通过PropTypes对象来确定