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

Question

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

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

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

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

1) 在render()内部声明它

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

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

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

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

3) 将其声明为放置在 React 组件内部但在 render() 外部的函数的返回。我们从 React 中调用该函数 return()

4)我想我在某个地方看到过使用defaultProps。

有最佳实践吗？

Answer 1

一些常见的方法是

declare it above a class or in beginning of a file after imports

如果它是文件特定常量。

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

class xxx extends yy {
 ....
}

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

类似的东西

a json file

文件a.json

{
 "color": "red"
}

使用b.js

 import constant from 'constants/a.json';

 console.log(constant.color);

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