React组件中直接将state赋值给普通变量使用是否合规？

你当前的写法逻辑上是成立的，不会报错的核心原因是：组件内的data变量每次组件重渲染时都会基于最新的props重新计算，上层通过useContext修改state后，传入的changeLabels、changeDatas会更新，触发BarChart组件重渲染，自然就能生成最新的配置传给图表组件，功能可以正常跑通。

但该写法存在几个可优化的点：

• 存在不必要的重复计算：只要组件重渲染，哪怕title、label、changeLabels、changeDatas这些依赖都没有变化，data和options对象都会被重新创建，组件渲染频率高、图表配置复杂时会产生不必要的性能开销，建议用useMemo缓存这两个对象，仅在依赖变化时重新计算。
• 代码冗余：你当前return外层的空<>标签没有实际作用，内部仅返回单个Bar组件，可以直接删除外层空标签。
• 命名不规范：changeLabels、changeDatas的命名有歧义，change前缀通常用来命名修改操作函数，这两个属性实际是数据源，建议改成labels、chartData这类更贴合含义的命名，降低后续维护成本。

优化后参考代码 #

import React, { useMemo } from "react";
import { Bar } from "react-chartjs-2";

const BarChart = ({ title, label, labels, chartData }) => {
  const data = useMemo(() => ({
    labels: labels,
    datasets: [
      {
        label: label,
        data: chartData,
        backgroundColor: [
          "#a7def8e1",
          "#7ec5e4ec",
          "#21a8e2eb",
          "#579deeeb",
          "#3165d4eb",
          "#3a68e77f",
        ],
      },
    ],
  }), [label, labels, chartData]);

  const options = useMemo(() => ({
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      title: {
        display: true,
        text: title,
        color: "#345fbb",
        font: { size: 22 },
      },
    },
  }), [title]);

  return <Bar data={data} options={options} />;
};
export default BarChart;

内容的提问来源于stack exchange，提问作者KYUN