在 React 中声明静态数据的最佳位置/方式

Question

我正在通过互联网阅读，试图找到一些声明静态数据的性能坚决或首选方法，反应中的变量，所以我想听听你的意见。

这适用于无状态和类组件。

假设我有一个带有颜色的数组，我想在 React 中的某处使用它return()。

const colors = ["red, "green", "blue"];

1）在里面声明它 render()

我想这不是首选，因为它会在每次渲染时重新创建。

2）在构造函数中将其声明为全局变量

this.colors = ["red, "green", "blue"];

很好，但在某些情况下可能不喜欢使用全局变量。

3) 将其声明为放置在 React 组件内部但在render(). 我们从 React 调用函数return()

4）我想我在某处看到了使用 defaultProps。

有最佳实践吗？

Answer 1

几种常见的方法是

导入后在类上方或文件开头声明它

如果它是文件特定的常量。

const CONST1 = [0,1,2,];

class xxx extends yy {
 ....
}

或者您可以将其保存在单独的文件中，并在许多地方通用时将其导入。

就像是

一个json文件

文件 a.json

{
 "color": "red"
}

用法 b.js

 import constant from 'constants/a.json';

 console.log(constant.color);

甚至global.color = 'red'我不建议使用

Answer 2

嗯，我认为这取决于你的需求，大多数情况2和3可能就足够了。我见过几个项目源（例如 create-react-app、react-native-maps），它们都以相同的方式处理这个 const 和“全局资源”：

他们将它们放在单独的文件中，并将它们作为模块导入到需要它们的每个文件中。我已经使用过这种方法，我可以告诉你这是一种非常好的且常见的做法