ECharts 与 React Hooks
原创
React 16.6 的时候抛出了 React Hooks 的概念，在 React 16.8 正式发布。它完全颠覆了原有的 Class Component 的写法。React 团队也官方声明了后续可以使用的 Function Component + React Hooks 的场景就不要使用 Class Component 。 本文只通过代码简述 React 使用 ECharts 的场景如何改造成 React Hooks 的写法。
首先我们先写一个简单的基于 React 的 ECharts Demo.
// Chart.js
import React from 'react'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/title'
import getConfig from './config'
export default class Chart extends React.Component {
// 定义一个状态 count 触发更新
state = {
count: Math.random()
}
chartRef = React.createRef();
chartInstance = null;
/**
* mount 时绘制图表
*/
componentDidMount () {
this.renderChart()
}
/**
* 组件卸载时，调用 ECharts 的销毁函数
*/
componentWillUnmount () {
this.chartInstance && this.chartInstance.dispose()
this.chartInstance = null
}
/**
* 状态发生变化时，图表重新绘制
*/
componentDidUpdate (prevProps, prevState) {
if (prevState.count !== this.state.count) {
this.renderChart()
}
}
/**
* ECharts 渲染，先判断是否已渲染到 DOM 节点
*/
renderChart() {
const renderedInstance = echarts.getInstanceByDom(this.chartRef.current)
if (!renderedInstance) {
this.chartInstance = echarts.init(this.chartRef.current)
}
this.chartInstance.setOption(getConfig(this.state.count))
}
render () {
// 点击按钮修改状态
return (
<div>
<div style={{width: "500px", height: "500px"}} ref={this.chartRef} />
<button
onClick={() => this.setState({ count: Math.random() })}
>
Button
</button>
</div>
)
}
}我们每次在 React 里面写 ECharts 时一般都会做这几件事情：
- 声明一个 ref ，指向挂载 ECharts 的 DOM 节点
- componentDidMount 里面初始化 ECharts 实例，渲染图表
- componentWillUnmount 里面销毁 ECharts 实例
- componentDidUpdate 判断数据或图表配置是否有变化，有则渲染图表，通常数据变化来源于后台请求或者用户操作
那问题来了，如何利用 React Hooks 改造上面这一段代码呢？
对于首次写 React Hooks 的我，只能基于上面罗列的几个点，一步步完成改造。
首先把架子搭好。
import React from 'react'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/title'
import getConfig from './config'
function Chart () {
return (
<div>
<div style={{width: "500px", height: "500px"}} />
<button onClick={() => setCount(Math.random())}>Button</button>
</div>
)
}
export default Chart使用 useState 和 useRef 先把 state 和 ref 解决了。
import React, { useState, useRef } from 'react'
// ...
function Chart () {
const [count, setCount] = useState(Math.random())
const chartRef = useRef(null)
return (
<div>
<div style={{width: "500px", height: "500px"}} ref={chartRef} />
<button onClick={() => setCount(Math.random())}>Button</button>
</div>
)
}接着编写渲染图表的代码。
在原来的写法里，我们在不同的生命周期里分别对 ECharts 实例做了初始化、更新、销毁。那在 Hooks 的世界里该怎么做呢？
首先 React 文档里写到，涉及生命周期的，使用 useEffect 来改造。官方文档是这样写的：
If you’re familiar with React class lifecycle methods, you can think of
useEffectHook ascomponentDidMount,componentDidUpdate, andcomponentWillUnmountcombined.
那么我们不妨先尝试一下：
import React, { useState, useEffect, useRef } from 'react'
// ...
function Chart () {
const [count, setCount] = useState(Math.random())
const chartRef = useRef(null)
let chartInstance = null
function renderChart() {
const renderedInstance = echarts.getInstanceByDom(chartRef.current)
if (renderedInstance) {
chartInstance = renderedInstance
} else {
chartInstance = echarts.init(chartRef.current)
}
chartInstance.setOption(getConfig(count))
}
useEffect(() => {
renderChart()
console.log('render')
})
return (
<div>
<div style={{width: "500px", height: "500px"}} ref={chartRef} />
<button onClick={() => setCount(Math.random())}>Button</button>
</div>
)
}写完这段代码，运行起来的效果跟改造前已经是一模一样的了。每次点击按钮时，就会渲染图表，控制台打印出 render 。这就是 useEffect 的魔力，每次组件重新渲染时，都会去执行 useEffect。所以我们在 useEffect 里面调用 ECharts 渲染函数，也就达到了我们想要的效果。
到这一步，跟原有的写法比起来还有一些工作没做：
componentDidUpdate时会比较原来的状态和当前状态是否相等，状态有变化才会执行渲染。componentWillUnmount时会销毁 ECharts 实例。
解决方案：
第一个问题，如何在每次更新时对状态做对比？ useEffect 提供了第二个参数就是用来做这件事的。如下代码所示，更新时会比较 count 是否有变化，有变化才执行 renderChart。
useEffect(() => {
renderChart()
}, [count])第二个问题，如何执行 ECharts 实例销毁？ useEffect 的返回值则是来做这件事的，useEffect 的返回值必须是一个函数，在下一次渲染的时候，会执行这个函数。官方文档里把这个动作称为 cleanup。
代码如下：
useEffect(() => {
renderChart()
// 返回一个函数，下一次更新或者组件被卸载，都会执行该函数
return () => {
chartInstance && chartInstance.dispose()
}
}, [count])但是这里存在一个问题，在每一次re-render时，useEffect 都会去执行上一次渲染留下来的 cleanup。也就是说，每一次，我们都会释放 ECharts 实例，并在 useEffect 里面重新创建实例。
至于为什么每次 useEffect 都会去执行 cleanup ,可以去看官方文档的示例，你可能会有更深的体会。
如何避免这个问题，让我们的 ECharts 销毁像之前那样只在 componentWillUnmount 时执行，这里我利用 useEffect 的特性，实现了这一效果：
useEffect(() => {
return () => {
chartInstance && chartInstance.dispose()
}
}, [])重新声明一个 useEffect，专门来执行图表销毁。基于它的更新机制，给它传递了一个空数组，让这个 useEffect 在 re-render 时永远不执行。因为它接收的状态为 undefined，re-render 时对比状态永远想等。进而它的 cleanup 也不会执行，而只是等到 unmount 的时候才会调用。
那做完这一步，整体的代码如下
import React, { useState, useEffect, useRef } from 'react'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/title'
import getConfig from './config'
function Chart () {
const [count, setCount] = useState(Math.random())
const chartRef = useRef(null)
let chartInstance = null
function renderChart() {
const renderedInstance = echarts.getInstanceByDom(chartRef.current)
if (renderedInstance) {
chartInstance = renderedInstance
} else {
chartInstance = echarts.init(chartRef.current)
}
chartInstance.setOption(getConfig(count))
}
useEffect(() => {
renderChart()
}, [count])
useEffect(() => {
return () => {
chartInstance && chartInstance.dispose()
}
}, [])
return (
<div>
<div style={{width: "500px", height: "500px"}} ref={chartRef} />
<button onClick={() => setCount(Math.random())}>Button</button>
</div>
)
}
export default Chart现在我们回头对比改造前后的代码，已经做到了从 Class Component 到 Function Component + Hooks 的迁移了~
当然我们也可以把这部分代码抽离成一个自定义的 Hooks，就像原来把通用逻辑抽离成 HOC 或者 Render Props 那样。
A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks.
官方文档声明了自定义的 Hooks 需要以 use 开头，于是我们可以定义这样一个 Hook - useECharts
// useECharts.js
import React, { useEffect } from 'react'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/title'
function useECharts(chartRef, config) {
let chartInstance = null
function renderChart() {
const renderedInstance = echarts.getInstanceByDom(chartRef.current)
if (renderedInstance) {
chartInstance = renderedInstance
} else {
chartInstance = echarts.init(chartRef.current)
}
chartInstance.setOption(config)
}
useEffect(() => {
renderChart()
}, [config])
useEffect(() => {
return () => {
chartInstance && chartInstance.dispose()
}
}, [])
return
}
export default useECharts在 Chart.js 里面直接引入这个 Hook
// Chart.js
import React, { useState, useEffect, useRef } from 'react'
import getConfig from './config'
import useECharts from './useECharts'
function Chart () {
const [count, setCount] = useState(Math.random())
const chartRef = useRef(null)
const config = getConfig(count)
useECharts (chartRef, config)
return (
<div>
<div style={{width: "500px", height: "500px"}} ref={chartRef} />
<button onClick={() => setCount(Math.random())}>Button</button>
</div>
)
}
export default Chart至此，一个 React ECharts 场景改造完成。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
