React学习 antd2升级到antd5； Class 中使用 React Hooks，并且能够互相传值

antd mobile2升级到antd mobile5

官网上有两种升级方法，使用 antd-mobile-v2安装和通过别名安装 v5。
第一种方法要把项目中所有对 antd-mobile 的引入都替换为 antd-mobile-v2，成本比较大，而且也没有足够时间去测试替换后的项目。因此这里采用第二种安装方式，别名安装。

antd官网的升级指南

一.antd2升级到antd5

$ npm install --save antd-mobile-v5@npm:antd-mobile@next
# or
$ yarn add antd-mobile-v5@npm:antd-mobile@next

对应的 package.json 为

{
  "antd-mobile": "^2.3.2",
  "antd-mobile-v5": "npm:antd-mobile@next"
}

实际的使用方式

项目中的 antd-mobile 还是 v2 版本，antd-mobile-v5 是 v5 版本

import { Button } from 'antd-mobile' // v2
import { Button } from 'antd-mobile-v5' // v5

但npm 别名并不是所有的包管理器都有很好的支持

二.升级的bug修复与注意事项

1.antd5使用了hooks编写方式，所以，一定要注意你的react版本，是要能够使用hooks的react版本

2.即使升级到了正确的react版本，依然可能会出现缺少依赖的情况，出现下面这样的报错提示

can not find ‘@babel/runtime/helpers/esm/createSuper’ 提示

运行下面的命令来安装对应的最新版本即可，其他的同类错误提示也一样

npm install @babel/runtime  // 默认安装最新版

Class 中使用 React Hooks，并且能够互相传值

一.互相传值的原因

现在hooks使用越来越多，最近11月发布的antd5更是都是用hooks来写的。
为了能使用antd5，便对项目进行了升级，但是antd2是用class写的，所以便遇到了class和hooks互相传值的问题。

二.使用场景

class组件里想要包含使用antd5的及联组件（Cascader）

三.方法——使用Ref 转发

Ref 转发是一项将 Ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的，但其对某些组件，尤其是可重用的组件库是很有用的。

它可以将子组件的方法暴露给父组件使用

react官网的ref的说明和使用方式

四.实际使用的代码

被引用的及联组件

import React, { useState, useImperativeHandle, forwardRef } from 'react';
import { Cascader } from 'antd-mobile-v5';

function DeptCascader(props, ref) {
  const [visible, setVisible] = useState(false); //控制及联组件展开
  const [value, setValue] = useState([]); //控制及联组件的值
  const getFunc = props.getFunc; // 父亲传过来的方法
  const confirmCascader = (v, extend) => {
    setValue(v);
    const deptList = extend.items || [];
    if (deptList.length === 0) {
      return getFunc('');
    }
    return getFunc(deptList.value);
  };
 // 暴露的子组件方法，给父组件调用
  useImperativeHandle(ref, () => {
    return {
      setVisible, confirmCascader // 返给父亲的方法
    };
  });
  const jsx = (
    <span className="dept-cascader">
      <Cascader
        options={props.superStarQueryTree} //父亲传来的树
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        value={value}
        onConfirm={confirmCascader}
      />
    </span>
  );
  return (jsx);
}

export default forwardRef(DeptCascader);

class组件

import React from 'react';
import DeptCascader from './DeptCascader';

export default class Father extends React.Component {

  // 将子组件暴露出来的对象挂载到 child
  onRef = (ref) => {
    this.child = ref;
  }

  getFunc = async (value) => { // 获取hooks传来的选中的id数组
  	console.log(value);
  };

  showChild = () => { // 展示出Cascader的弹窗
    this.child.setVisible(true);
  }

  render() {
    return (
      <div>
          <span>
            <React.Fragment>
              <span onClick={this.showChild}>
                <DeptCascader 
                 ref={this.onRef} //转发
                 superStarQueryTree={superStarQueryTree} // 树
                 getFunc={this.getFunc} /> // 回调的方法
              </span>
            </React.Fragment>
          </span>
      </div>
    );
  }
}

五.hooks和class传值的其他方式

hoc（高阶组件）和把hooks包装成函数组件（Render props）的两种方式。推荐阅读以下这两篇文章来阅读学习
第二篇文章写的更全一些，如果时间紧张可以只读第二篇。
第一篇
第二篇