react - forwardRef

react - forwardRef

• 类组件（复杂组件，状态组件）拥有生命周期，state，需要继承React.component

• 函数组件（函数组件，简单组件，无状态组件）

• 函数组件可以通过hooks让函数组件拥有生命周期和状态，并不需要继承React.component

• ​ 让函数组件拥有ref

  1.在父级创建ref：my = createRef（）；

  2.在父级引入child之后使用时增加ref

  3.在子组件函数的第二个参数是ref

  4.使用React.forwarRef()高阶组件

  5.接收到的ref作为某个元素的属性值，属性名为ref

  App.js

  import  React, {createRef} from"react"
  import child from "./child"
  class App extends from Component{
          my  = createRef();
          render(){
                return (
                   <Child ref={this.my}></Child>  
                )
          }
  
  }
  export default App
  

  Child.jsx

  import React,{forwardRef} from "react"
  
  funciton Child(props,ref){
          return(
                 <div>
                           <div ref={ref}></div>
                 </div>
                )
  }
  
  export default  forwardRef(Child);