React魔法堂：echarts-for-react源码略读 _生活百科

前言在当前工业4.0和智能制造的产业升级浪潮当中，智慧大屏无疑是展示企业IT成果的最有效方式之一。然而其背后怎么能缺少ECharts的身影呢？对于React应用而言，直接使用ECharts并不是最高效且优雅的方式，而echarts-for-react则是针对React应用对ECharts进行轻量封装和增强的工具库。
echarts-for-react的源码非常精简，本文将针对主要逻辑分析介绍。
从与原生初始化对比开始原生ECharts中我们会通过如下代码初始化图表实例
<div id="container" style="width: 100px; height: 100px"></div><script>const chart = echarts.init(document.getElementById('container'))</script>那么生成的HTML Element结构为
<div id="container" style="width: 100px; height: 100px" _echarts_instance="....."><div style="width: 100px; height: 100px;position: relative;"><canvas width="100" height="100"></canvas></div></div>其中第二层的div和canvas的宽高默认为容器div#container的宽高，我们可以通过init入参指定两者宽度。
const chart = echarts.init(document.getElementById('container'),null,{width: 300, // 可显式指定实例宽度，单位为像素。如果传入值为null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度height: 300 // 可显式指定实例高度，单位为像素。如果传入值为null/undefined/'auto'，则表示自动取 dom（实例容器）的高度})注意：若此时容器div#container尺寸发生变化，第二层div和canvas尺寸并不会自适应，需要我们手工调用chart.resize()触发。
而通过echarts-for-react上述步骤将被简化为如下，并且生成相同的HTML Element结构：
import ReactECharts from 'echarts-for-react'function Demo() {return (<ReactEChartsstyle={{width: 100, height: 100}} // 设置容器的宽高autoResize={true} // 默认为true，自动监测容器尺寸的变化，并调用`chart.resize()`/>)}陷阱-默认值height为300px由于ReactECharts的style默认内置height: 300，源码如下：
// src/core.tsxrender(): JSX.Element {const { style, className = '' } = this.propsconst newStyle = { height: 300, ...style }return (<divref={(e: HTMLElement) => {this.ele = e}}style={newStyle}className={`echarts-for-react ${className}`}/>)}因此通过className的方式设置容器高度时必须使用!important
<ReactEChartsclassName={styles.container}/>// index.module.css.container {height: 500px !important;}获取ECharts实例const ref = useRef()useEffect(() => {const instance = ref.current.getEchartsInstance()}, [])<EchartsReactref={ref}/>主逻辑源码剖析核心逻辑均在EChartsReactCore组件上(位于文件src/core.tsx)，特点如下：