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

嗯，我认为这取决于您的需求，大多数情况2和3可能就足够了。我已经看过几个proyect源（例如create-react-app，react-native-maps），他们都处理这个问题，并且＆＃34;全球资源＆＃34;以同样的方式：

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

Answer 2

很少有常见的方法

在导入
之后将其声明在类的上方或文件的开头

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

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 3

对于类组件，我最近使用了在类上声明静态变量的方法。

import React from 'react';

class Example extends React.Component {
  // never changes, but may be used in other places, such as parent components
  static displayName = 'Example';

  state = {
    someStateData: 'World'
  };

  render() {
    const { someStateData } = this.state;
    // do work
    return <p>Hello {someStateData}</p>;
  }
}

export default Example;

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

3 个答案: