React：React中Ref的交叉用法。
首先，解释什么是Ref。
Ref 转发是一个将军 ref 通过组件自动传输到其子组件的技能。这通常不是大多数应用程序中的组件所必需的。但它对某些组件非常有用，特别是可重用的组件库
Ref官网说明:点击此处
二、ref在hooks中的用法
1、HTMLDom在hooks中使用ref，官网例子:【https://zh-hans.reactjs.org/docs/hooks-reference.html#useref】。
const Fn = ()=>{
const testRef = useRef(null);
console.log('testRef',testRef.current); // 会渲染两次，第一次打印null，第二次是<div>测试</div>
return (
<div ref={testRef}>测试</div>
)
}
2、在hooks中使用ref和函数组件，
只需将ref属性传输到函数组件中即可。
const Fn = ()=>{
const testRef = useRef(null);
// Test函数组件的定义
const Test = ({ refs }) => <div ref={refs}>我是ReactDOM test</div>;
console.log('testRef',testRef.current); // 会渲染两次，第一次打印null，第二次是<div>我是ReactDOM test</div>
return (
{/* 之所以使用refs而不是ref作为prop，是因为ref会被react特别处理，不会作为props传输到react组件，类似于key */}
<Test refs={testRef} />
)
}
3、在hooks中，ref与类组件一起使用
这里只需要在类组件的回调ref中手动赋值useref对象，更多的回调ref【https://zh-hans.reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node】
import ReactDom from 'react-dom';
const Fn = ()=>{
const testClassRef = useRef(null);
// Testclass组件的定义
class TestClass extends React.Component {
render() {
return (
<div >
我是Testclass组件 测试
</div>
)
}
}
console.log('testClassRef',testClassRef.current); // 会渲染两次，第一次打印null，第二次是<div>我是Testclass组件 测试</div>
return (
{/* 之所以使用refs而不是ref作为prop，是因为ref会被react特别处理，不会作为props传输到react组件，类似于key */}
<TestClass
ref={el => {
console.log('new render refs')
testClassRef.current = ReactDom.findDOMNode(el);
}}
/>
)
}
4、hooks中的classref、react-redux一起使用
当遇到connect包裹的类组件时，因为最外层已经被包裹成react-reduxProvider，因此，有必要将ref属性传播到真实的react组件中，此时需要关注conect的forwardref属性。
import ReactDom from 'react-dom';
import { connect } from 'react-redux';
const Fn = ()=>{
const testClassRef = useRef(null);
// Testclass组件的定义
class TestClass extends React.Component {
render() {
return (
<div >
我是Testclass组件 测试
</div>
)
}
}
///定义Testclassconect包裹后的组件
//forwardRef:true 设置redux允许将ref作为props传输到connect包装的组件中
const TestClassConnect = connect(null, null, null, { forwardRef: true })(TestClass);
console.log('testClassRef',testClassRef.current); // 会渲染两次，第一次打印null，第二次是<div>我是Testclass组件 测试</div>
return (
{/* 之所以使用refs而不是ref作为prop，是因为ref会被react特别处理，不会作为props传输到react组件，类似于key */}
<TestClassConnect
ref={el => {
console.log('new render refs')
testClassRef.current = ReactDom.findDOMNode(el);
}}
/>
)
}
