在 React 中使用 useState 和 @highcharts/react 构建动态图表

构建一个能够响应数据变化的图表是一项非常实用的技能。在这篇文章中，我将向你展示如何将 @highcharts/react 连接到 React 的状态（state），让图表自动更新------无需手动刷新，无需调用 chart.update()，只需让 React 做它最擅长的事情。

你将构建什么

一个当底层数据变化时即时更新的折线图。简洁、干净，这将是你未来构建所有真实仪表盘的基础。

前置要求

已安装 Node.js（可用 node -v 检查）
React 基础知识

项目搭建

创建一个文件夹，然后使用 Vite 创建一个新的 React 项目：

bash 复制代码

npm create vite@latest . -- --template react

安装 Highcharts：

bash 复制代码

npm install @highcharts/react

启动开发服务器：

bash 复制代码

npm run dev
然后在浏览器中打开 http://localhost:5173。

你的第一个图表

打开 src/App.jsx，删除里面所有内容并替换为：

javascript 复制代码

import { Chart } from '@highcharts/react'
import { LineSeries } from '@highcharts/react/series/Line'

function App() {
  return (
    <Chart>
      <LineSeries data={[3, 4, 1, 5, 2]} />
    </Chart>
  )
}
export default App

保存文件。你应该能在浏览器中看到一个折线图。

添加 useState

静态数据是一个好的开始。但真实的仪表盘需要动态数据：筛选器、用户交互、API 响应......这时就需要 useState 登场了。

useState 为你的组件赋予了"记忆"能力。当数据变化时，React 会重新渲染组件，图表会自动反映新的数据。

更新 App.jsx：

javascript 复制代码

import { useState } from 'react'
import { Chart } from '@highcharts/react'
import { LineSeries } from '@highcharts/react/series/Line'

function App() {
  const [data, setData] = useState([3, 4, 1, 5, 2])

  function updateData() {
    setData([5, 2, 8, 1, 6])
  }

  return (
    <>
      <button onClick={updateData}>更新图表</button>
      <Chart>
        <LineSeries data={data} />
      </Chart>
    </>
  )
}
export default App

点击按钮。图表会立即更新。

发生了什么

有三个值得理解的核心点：

1. useState 初始化数据

jsx

复制代码

const [data, setData] = useState([3, 4, 1, 5, 2])

data 保存当前的值
setData 负责更新它
每次调用 setData，React 都会重新渲染组件

2. 图表通过 prop 接收数据

jsx

复制代码

<LineSeries data={data} />

data 只是一个普通的 prop。当它变化时，@highcharts/react 会在内部自动处理更新------无需任何手动干预。

3. 不要手动调用 chart.update()

如果你之前用过 Highcharts，可能会想到 chart.update()。这个方法仍然存在，但它会在每次状态变化时自动幕后调用。这个集成层足够智能，能在正确的时机、用正确的配置调用它。

你绝对不应该做的是 ：手动调用 chart.update()。

如果你这样做了，React 状态和图表内部状态会失去同步 ------两个数据源，哪个都不靠谱。让集成层来处理吧：你只需要更新状态，@highcharts/react 会搞定剩下的一切。

为什么这很重要

这个模式是以下所有功能的幕后逻辑：

仪表盘筛选器
日期范围选择器
数据刷新按钮

图表不是你组件树中的特例------它只是另一个响应状态变化的普通 React 组件，和其他所有组件一样。

在下一篇文章中，我们将使用 useEffect 从 API 获取真实数据，并通过相同的模式将其传递给图表。

英文原文链接：https://www.highcharts.com/blog/post/dynamic-charts-in-react-using-usestate-with-highcharts-react/