react在hook组件里边调用class子组件

前言

优化代码的过程不是一蹴而就的，庞大的代码量不可能几天就能完成从class到hook的更替，那么在这个过程中，我们就很可能遇到在hooks组件里边调用class子组件这种情况；

问题

当我使用hook父组件调用中间件嵌套的class子组件时，点击过一次后再次点击，定义的ChildRef 发生了丢失，且报错了

import React , { Component , useState} from "react"
import { withRouter } from "react-router-dom"

// 使用装饰器给裹上一层高阶函数（装饰器需要安装对应的babel包，此处作为演示使用）
@withRouter 
class Child extends Component {
	componentDidMount(){
		this.props.onRef && this.props.onRef(this);
	}
	func(){
		console.log("执行我")
	}
	render(){
		return (<div>子组件</div>);
	}
}

const Parent = (props)=>{
	const [count, setCount] = useState(0);
	const ChildRef = null;
	
	function handleOnClick(){
		ChildRef.func();
		setCount(count++);
	}

	return (<div>
		<button onClick={this.handleOnClick}>click</button>
		<Child onRef={ node => ChildRef = node }></Child>	
	</div>);
	
}

分析原因

hooks函数组件中，每次触发state变化时，除了useState会保存值，其他的变量和函数都会发生重置；

hooks父组件更新了，但是子组件class却仅仅只会让render函数发生变化，不会重新挂载， 然后我们的ChildRef重回赋值了null；

那么这就是我们再次点击失效的原因了，那怎么解决呢？

解决办法

在class子组件的componentWillReceiveProps中重新调用一次onRef，如下所示

  componentWillReceiveProps(nextProps) {
    nextProps.onRef && nextProps.onRef(this);
  }