React V6的ref操作

功能介绍

实现类似vue的ref，使用ref拿到dom，然后做一些事情。react的ref和vue3.x的ref使用方式十分相似，准确的说是vue3.x像react。。ref等号后面命名需要和const 定义的变量名一致。

代码实现

比如我有一个图表组件，想要通过一个按钮去重置他重置

// 封装图表bar组件
import * as echarts from 'echarts'
import { Button } from 'antd';
import { useEffect, useRef } from 'react'
function Bar ({ title, xData, yData, style }) {
  const domRef = useRef()   //重点是这里
  var myChart = {}
  const chartInit = () => {
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(domRef.current)   //赋值
    // 绘制图表
    myChart.setOption({
      title: {
        text: title
      },
      tooltip: {},
      xAxis: {
        data: xData
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: yData
        }
      ]
    })
  }
  useEffect(()=>{
    chartInit()
  })

  const resetChart = (bool)=>{
    console.log('发生的纠纷和觉得',bool)
    myChart.dispose()   //销毁
    setTimeout(()=>{
      chartInit()
    })
  }
  return (
    <div>
      {/* 准备一个挂载节点 */}
      <div ref={domRef} style={style}></div>

      <Button onClick={()=>resetChart(true)}>重置</Button>
    </div>
  )
}

export default Bar