这似乎是一个相当愚蠢的问题,但到目前为止我还没有找到明确的答案。
我本质上正在寻找在 JavaScript 中存储变量和辅助函数的最佳实践。我需要在本地更新此列表,因此我的第一 react 是将其全局存储在 react 类之外,但显然这是一个坏主意,因为我最终需要添加辅助函数和更多要在组件中使用的变量。
import React, { Component } from 'react';
import Select from 'react-select';
const list = ['1', '2', '3'] // is it acceptable to store this here?
export class Example extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div className="well">
<div className="row">
<div className="col-sm-4">
<h3>Device Type</h3>
<Select options={list}/>
</div>
</div>
</div>
)
}
}
我在 Javascript 中阅读了许多不同的设计模式(模块、单例、揭示等),以避免污染全局命名空间,但我不确定我的最佳选择是什么。
所以,我的问题是,存储我的 react 组件/类需要使用的变量和辅助函数的最佳实践是什么,而不是将所有内容都扔到全局命名空间中。
编辑
显然这是一个非常广泛的问题,我想我会因为问这个问题而感到一些悲伤。如果有更好的提问方式请告诉我。指向回答该问题的其他资源的链接也会非常有帮助。
评论中有人提到,使用 ES6 模块已经可以处理之前 Javascript 中存在的全局污染问题。 我最终可以在类之外存储辅助函数和变量而不产生任何影响吗?
请您参考如下方法:
我在从事的项目中通常看到的是:
将此视为文件夹结构:
组件
- 示例
- index.js
- helper.js(您可以使用其他名称,例如函数、常量等)
- 示例
实用程序
- functions.js
- constants.js
因此,在助手内部,您将拥有只有示例组件(索引)才会使用的常量和函数。
在 utils 内部,您应该添加不同组件和容器将访问的函数和常量。
index.js
import React, { Component } from 'react';
import Select from 'react-select';
import { list, parseName } from './helper'
export class Example extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div className="well">
<div className="row">
<div className="col-sm-4">
<h3>Device Type</h3>
<Select options={list}/>
</div>
</div>
</div>
)
}
}
helper.js
export const list = ['1', '2', '3'];
expor const parseName = (name) => `Sr ${name}`;
我添加了一个parseName
,以便您可以了解可以在helper.js
中添加什么内容,其中应该主要是纯函数