组件的props

组件是封闭的，要接受外部数据需要通过props来实现

props的作用 ：接收传递给组件的数据
props的用发 ：给组件标签加属性
如何接收props传递过来的值 ：函数组件 => 通过参数props 类组件 => 通过this.props
props的特点：

可以传递任何数据类型

props是只读的对象，只能读取属性的值，无法修改对象

在类组件中的构造函数constructor（）中，应将props值传递给super（），否则，无法在构造函数中获取到props

组件通讯的三种方式

父 => 子

父组件提供要传递的state数据
给子组件标签添加属性、值为state中的数据
子组件中通过props接收父组件中传递的数据

子 => 父

思路 : 利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数

父组件提供一个回调函数（用于接收数据）
将函数作为属性的值、传递给子组件
子组件通过props调用函数
将子组件的数据作为参数传递给回调函数

兄弟

思路 : 状态提升 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

公共父组件职责:

提供共享状态
提供操作共享状态方法

要通讯的子组件通过props接收状态和方法

Context

跨组件传递数据

调用React.createContext()创建 Provider（提供数据）和Consumer（消费数据）两个组件

const {Provider，Consumer} = React.createContext()
使用Provider组件作为父节点

<Provider> <子组件 /> </Provider>
设置value属性，表示传递数据

<Provider value="数据" >
调用Consumer组件接收数据

<Consumer>{data=><span>data参数表示接收到的数据--{data}</span>}</Consumer>

props深入

children属性

当组件有子节点时，props就会有该属性

children属性与普通的props一样，值可以是任意值

children的值是一个数组会将子节点的元素放入一个数组

props校验

对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据

如果传入的数据格式不会，可能会导致组件内部报错

允许在组件传值的时候，就指定props的类型、格式等等

作用：捕获使用组件时因为props导致的错误，给出明确的提示

使用：

下包 --props-types yarn add props-types 或者 npm i props-types
导入 --- import PropTypes from 'props-types'
使用组件名.propTypes={} 来给组件添加props校验规则

约束规则:

常见类型

array
bool
func
number
object
string

React元素类型 element

必填项 isRequired

约束对象中的属性 PropTypes.shape({})

props默认值 组件.defaultProps = { 属性：默认值 }

组件的生命周期

组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误的原因等

组件冲创建到挂载到页面中运行、再到组件不再使用时卸载的过程

钩子函数 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数，作用就是为开发人员在不同阶段操作组件提供了时机，只有类组件才有生命周期

生命周期的三个阶段：

创建时（挂载阶段）

执行时机：组件穿件时（页面加载时）

执行顺序：

	触发时机	作用
constructor()	创建组件时执行，最先执行	初始化state、为事件处理程序绑定this
render()	每次组件渲染都会触发	渲染UI（不能调用setState（））
componentDidMount()	组件挂载（完成DOM渲染）后	发送网络请求、DOM操作

更新时（更新阶段）

执行时机：接收到新的props、setState（）、forceUpdate（）（强制更新方法）

执行顺序：

	触发时机	作用
render()	同上	同上
componentDidUpdate()	组件更新（完成DOM渲染）后、参数为更新之前的props	见下方

发送请求、DOM操作、如果要setState（）必须放在一个if条件中，否则会导致递归更新

可以将更新之前的props和this.props做判断

卸载时（卸载阶段）

执行机制：组件从页面中消失

钩子：componentWillUnmount 可以进行清理工作（清理定时器）

组件复用

render Props模式

思路：

将要复用的state和操作state的方法封装到一个组件中

再使用组件时，添加一个值为函数的prop，通过函数的参数来获取（需要组件内部实现）

使用该函数的返回值作为要渲染的UI内容（需要组件内部实现）

使用：

在组件中提供复用的逻辑代码（状态，操作状态的方法）

将要复用的状态作为props.render(state)方法的参数暴露到组件外部

使用props.render()的返回值作为要渲染的内容

children替代render属性（推荐）

在组建标签内部使用函数

在方法中利用this.props.children

优化：设置校验、清除事件

高阶组件（HOC）

高阶组件是一个函数，接收要包装的组件，返回增强后的组件

高阶组件内部创建一个类组件，在这个组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装的组件

const 接收增强后的组件 = 高阶组件（需要增强的组件）

使用:

创建一个函数，以with开头
指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
在函数内部常见一个类组件，提供复用的状态逻辑代码，并返回
在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
调用改高阶组件，传入要增强的组件，通过返回值拿到增强后的组件并渲染

设置displayName 用于设置调试信息

使用高阶组件存在的问题 : 在调试工具中得到的两个组件名称相同，不方便区分

原因: 默认情况下、React使用组件名称为displayName

解决方式:为高阶组件设置displayName便于调试时区分不同的组件

组件名.displayName = '高阶函数名'+ 组件名

传递props:

在高阶组件使用时，增强前的组件传递的props是传给增强函数中的组件的，返回值中没有将传递的props继续传递下去，就会导致props丢失

解决方案 将this.props继续传递

** 感谢阅读！！！**

react组件通讯