react中ref和wrappedComponentRef的区别

wrappedComponentRef使用场景：

子组件：被高阶组件包裹，例：子组件表单被 Form.create() 包裹。
父组件：当子组件被高阶组件包裹后，父组件想拿到子组件的引用，直接用 ref={} 属性设置，将获取不到，需用 wrappedComponentRef={} 属性设置。

仅属性名 ref 和 wrappedComponentRef 不同，其他写法都一样

<HocComponent
	// 子组件没被高阶组件包裹 用ref
    ref={(ref) => {
        this.sonRef = ref;
    // 子组件被高阶组件包裹 用wrappedComponentRef
    wrappedComponentRef={(ref) => {
      this.sonRef = ref;
                                    在React中，想要在父组件引用子组件的属性或方法就需要使用ref将子组件的组件实例在父组件中引入。
但是如果子组件export的是使用react-redux库的connect函数封装的话
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent)
在父组件render函数中渲染子组件
<ChildComponent ref={this.childComponent = ref} />
                                    ref和wrappedComponentRef区别场景：原因：解决方法：将ref改为wrappedComponentRef
（1）在子组件为表单组件，在填入数据后请求接口，接口报错输入的内容不符合要求，此时需要显示回原来值。
（2）一开始是使用ref绑定子组件，利用setFieldsValue设置为原值。后面发现页面展示的数据没有发生变化
父组件使用的子组件是一个高阶组件，子组件带有Form.create()，真正作为表单处理的又是在子组件的子组件内部。导致子组件内部的表单数据无法更改
                                    在创建组件时，可以给组件添加一个 ref 属性，然后通过该属性来获取组件实例或者 DOM 元素。是在使用高阶组件 (Higher-Order Component) 包装组件时的一个 prop，它用于引用被包装的组件实例。是在使用高阶组件 (Higher-Order Component) 包装组件时的一个 prop，它用于引用被包装的组件实例。是在使用高阶组件 (Higher-Order Component) 包装组件时的一个 prop，它用于引用被包装的组件实例。
                                    父调子  有这句话的时候     继续封装了一层   const Contractdef  = Form.create({ name: 'def ’ })(def );
class abc extends Component {
	constructor(props) {
		super(props);
		this.state = {
		// state设置一个id
			id: ''
child1.js
import React, { PureComponent } from 'react';
export default class Child1 extends PureComponent {
  state = {
    name: 'child1111'
  render(){
    return (
	// 使用wrappedComponentRef
	<B wrappedComponentRef={this.cRef}/> 
	// 也有下面的这种使用方式(就可以不使用上面的 React.createRef())
                                    目录1. 高阶组件定义优点使用案例HOC 知名的应⽤案例：2. react hooks(v16.8新加的特性)增加hook的原因useStateuseEffectHook规则自定义hookuseRef[其他Hook API索引](https://react.docschina.org/docs/hooks-reference.html)3. 异步组件示例(异步组件+展位)实现一个异步组件lazy
1. 高阶组件
把组件作为参数，并返回（高阶）组件的函数，称为高阶组件
代码复⽤，状态/逻辑抽象
                                    &lt;MForm  {...gforms}   {wrappedComponentRef={ref=&gt;{this.gf=ref}}} /&gt;
this.gf.props.form.方法（）引用方式
                                    1 引言高阶组件（ higher-order component ，HOC ）是 React 中复用组件逻辑的一种进阶技巧。它本身并不是 React 的 API，而是一种...
                                    一、高阶函数
        接收函数作为输入，或者输出另一个函数的一类函数，被称作高阶函数。对于高阶组件，它描述的便是接受React组件作为输入，输出一个新的React组件的组件。更通俗地描述为，高阶组件通过包裹（wrapped）被传入的React组件，经过一系列处理，最终返回一个相对增强（enhanced）的React组件，供其他组件调用。
二、高阶组件
定义：高阶函数就是一个函数，且该...