Javascript 为什么在React组件中使用此闭包时不起作用？

我试图理解当从React组件使用此闭包时，为什么它不能按预期工作

// state.ts
const state = { things: [] };

export function setThings(newThings: number[]) {
  state.things = newThings;
}

//App.tsx
从“/state”导入{setThings}；
函数App（）{
常量setThingsToArray=（）=>setThings（[0,1,2]）；
返回(
安排事情
);
}

当从非反应代码调用

setThings

时，它会按预期工作。它更改

状态的
事物
属性

但是，当我尝试从React组件调用它时，如在App.tsx中，它根本不起作用。调试表明，当从
App
内部调用
setThings
时，它认为
state.things
是一个空数组
[]
，它初始化为的值，即使
state.things
已经包含很多项

这似乎意味着React在某种程度上使用了复制版本的
setThings
和复制版本的
state
。这怎么可能？它不应该作为一个简单的闭包并引用真实的
状态


我不想使用像Hooks或Redux这样的React状态管理，因为我希望阵列中的更改具有高性能，因为这将为每秒有大量粒子和重绘的画布应用程序供电。因此，如果我不需要React组件来显示数据，我不想经历整个React生命周期

编辑：我为这个问题编写组件代码时出错您没有从state.ts中的
设置返回任何内容

然而，您将其分配给App.tsx中的
常量setThings

在
上，您正在引用的
设置内容是您所拨打电话的
未定义的返回

尝试将实际函数分配给
，如下所示：

// App.tsx
import { setThings } from "./state";

function App() {
  const setThingsClickHandler = () => {
     setThings([0, 1, 2]);
  };

  return (
    <div>
      <button onClick={setThingsClickHandler}>Set things</button>
    </div>
  );
}

//App.tsx
从“/state”导入{setThings}；
函数App（）{
const setThingsClickHandler=（）=>{
setThings（[0,1,2]）；
};
返回(
安排事情
);
}
事实证明，由于我通过两个独立的
标记直接从HTML文件导入
main.ts
和
App.tsx
，Parcel为它们创建了两个完全独立的包，这意味着每个包中都有一个独立的
状态
对象

这就是为什么更新一个不会影响另一个的原因。不确定为什么没有0,1,2的值，但是通过将变量命名为相同的值，您正在隐藏setThings函数。这意味着onClick不会调用该函数，而是尝试调用该函数初始调用的返回值。它仍然不起作用吗？@CarlosSá当前代码就是我真正的代码。我以前的代码是我在总结问题代码时犯的错误。你在哪里“使用”状态？据我所知，在TS编译中，您可能只能在将itI导入到
state
到
main.TS
的模块内访问它，该模块用于在画布上绘制。这将从第三个文件
functions.ts
调用函数，该文件依次导入
setThings
，并成功调用该函数。这表明
functions.ts
使用实际的
state
对象，而不仅仅是本地复制它，您建议的是
App.tsx
中发生的事情。我的坏@Carlos。我在总结代码时犯了一个错误。我现在修好了。这个问题仍然像以前一样在发生。你的解决方案正是我目前得到的。关闭仍然没有如预期的那样起作用。
// App.tsx
import { setThings } from "./state";

function App() {
  const setThingsClickHandler = () => {
     setThings([0, 1, 2]);
  };

  return (
    <div>
      <button onClick={setThingsClickHandler}>Set things</button>
    </div>
  );
}