ref对象的创建，所谓创建，就是通过React.createRef或者React.useRef来创建一个Ref原始对象。
而react对ref的处理则是，主要指的是对于标签中的ref属性，react是如何处理以及react转发ref。
ref对象的创建
什么是ref对象，ref对象就是用createRef或者useRef创建出来的对象。
{ current: null // current指向的ref对象获取到的实际内容。可以是dom元素，组件实例，或者是其它 }
react提供两种方法创建ref对象。
- 类组件：React.createRef
第一种是通过React.createRef 创建一个ref对象。
class Index extends React.Component{ constructor(props){ super(props) this.currentDom = React.createRef(null) // 创建ref } componentDidMount() { console.log(this.currentDom) } render = () => <div ref={this.currentDom}> ref 对象创建获取元素组件</div> }
函数组件：useRef
第二种是通过函数组件创建Ref，可以用hooks中的useRef来达到同样的效果
export default function Index () { const currentDom = React.useRef(null) UseEffect(() => { console.log(currentDom.current) },[]) return <div ref={currentDom}></div> }
类组件获取ref的三种方式
ref属性是一个字符串
class Children extends Component{ render = () => <div>hello,world</div> } export default class Index extends React.Component{ componentDidMount(){ console.log(this.refs) } render = () => <div> <div ref="currentDom"></div> <Children ref="currentComInstance"></Children> </div> }
ref 属性是一个函数
class Children extends React.Component{ render = () => <div>hello,world</div> } export default class Index extends React.component{ currentDom = null currentComponentInstance = null componentDidMount () { console.log(this.currentDom) console.log(this.currentComponentInstance) } render=()=> <div> <div ref={(node)=> this.currentDom = node } >Ref模式获取元素或组件</div> <Children ref={(node) => this.currentComponentInstance = node } /> </div> }
ref属性是一个ref对象
