React操作DOM之forwardRef详解

React操作DOM有几种方式，传入字符串，传入一个对象(react推荐的方式)，传入一个函数，今天就讲一下使用react封装过的高阶组件forwardRef来操作DOM

首先导入

import React, { PureComponent,createRef,forwardRef } from 'react'

然后const一个函数组件，将它作为App的子组件

const Profile = forwardRef(function (props,ref){
  return <h2 ref={ref}>Profile</h2>
})

定义App组件

export default class App extends PureComponent {
  constructor(props){
    super(props);
    this.profileRef = createRef()
  }
  render() {
    return (
      <div>
        <Profile ref={this.profileRef} name={'lsh'}/>
        <button onClick={e=>this.printRef()}>点击</button>
      </div>
    )
  }
  printRef(){
    console.log(this.profileRef.current)
  }
}

当我们点击按钮时候

用这个的好处是什么？因为我们之前操作dom，函数式组件是不行的，因为它没有实例，用这个高阶组件就能完美解决这个问题