组件进阶介绍

React组件进阶

1. 能够实用props结束数据
2. 能够实现父子组件之间的通讯
3. 能够实现兄弟组件之间的通讯
4. 能够给组件添加props校验
5. 能够说出生命周期常用的钩子函数
6. 能够知道高阶组件的作用

组件通讯介绍

组件是独立封闭的单元，在默认情况下，只能使用组件自己的数据，在组件化的过程当中，完整的功能被拆分成多个组件，以更好的完成整个应用的功能，在整个过程中，多个组件不可避免地要共享某些数据，为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这个过程就是组件通讯

组件的props

组件是封闭的，要接收外部数据应该通过props来实现
props的作用：接受传递给组件的数据
传递数据：给组件标签添加属性
接受数据：函数组件通过参数props接受数据，类组件通过this.props接收数据

组件的props特点

1. 可以给组件传递任意类型的数据
2. props是只读的对象，只能读取属性的值，无法修改对象
3. 注意：使用类组件时，如果写了构造函数，应该将props传递给super(),否则，无法在构造函数中获取到props！

class Hello extends React.Component{
    constructor(props) {
        super(props)
    }
    render() {
        return <div>接受到的数据：{this.props.age}</div>
    }
}

组件通讯的三种方式

1. 父组件->子组件
   父组件要提供传递的state数据
   给子组件标签添加属性，值为state中的数据
   子组件中通过props接受父组件中传递的数据

2. 子组件->父组件
   思路： 回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数

父组件提供一个回调函数（用于接受数据）
将该函数作为属性的值，传递给子组件
子组件通过props调用回调函数
将子组件的数据作为参数传递给回调函数
注意this的指向问题

3. 兄弟组件
   将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
   思想：状态提升
   公共父组件职责：

4. 提供共享状态

5. 提供操作共享状态的方法
   要通讯的子组件只需通过props接受状态或操作的方法

6. Context
   若有多层子组件，一层一层传递十分繁琐
   使用Context进行跨组件传递数据

7. 调用React.createContext创建Provider（提供组件）和Consumer（消费组件）两个组件。
   const { Provider,Consumer} = React.createContext()

8. 使用Provider组件作为父节点

<Provider>
<div className="App">
    <Child1/>
</div>
</Provider>

props深入

1. children属性
   表示组价标签的子节点，当组件标签有子节点时，props就会有该属性
   children属性与普通的props是一样的，值也可以是普通的任意值（文本，React元素，组件，甚至是函数）

2. props校验
   对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据
   若传入的数据格式不对，可能会导致组件内部报错
   关键问题：组件的使用者不知道明确的错误原因
   props校验允许在创建组件时，就指定props的类型，格式
   作用：捕捉使用组件时因为props导致的错误，给出明确的错误提示，增加组件的健壮性
   安装包props-types(yarn add prop-types/npm i prop-types)
   导入prop-types包
   使用组件包propTypes={}来给组件的props添加校验规则
   校验规则通过PropTypes对象来确定