Javascript 如果React组件总是呈现null，我应该使用它，还是只使用函数？

我正在做一个用户界面，遇到了一些让我好奇的东西。我创建了一个通用的可重用函数，它获取数据并在回调中返回数据，回调由调用该函数的任何函数提供给该函数。但这就是它所做的，它获取数据并向前传递。目前，该功能最多可使用15种不同的参数/道具

我首先将其作为React组件，因为这样调用函数是可行的：

这样我就可以随意添加和省略参数。但是，

SomeFunction

总是返回

null

，因为它的主要目的是在回调中返回获取的数据。是否应将该组件还原为一个简单的函数而不进行任何反应？如果是，接近参数的最佳方法是什么

我的头脑很快就会想出两种选择，第一种是位置参数：

function someFunction(param1, param2, ... param15)

但这似乎是一个延伸，因为如果我想传递一些东西作为第15个参数，我需要给出许多空值

想到的另一种方法是使用对象：

function someFunction(options)

然后访问参数，如

options.param1

和

options.param2

---

在这种情况下，组件方法还是功能方法更好？在JS中处理函数无数可选参数的最佳方法是什么？我不是一个彻头彻尾的noob，但感觉JS世界中有很多方法和最佳实践，更不用说语言及其衍生产品不断变化的性质了。

两条建议：

使其成为一个普通函数，将其参数作为对象接受，可能会使用解构。（组件作为对象接收其道具，因此基本上是一样的。）

返回承诺，而不是传递回调。承诺提供标准语义，可与

异步

函数中的

wait

一起使用和/或与各种承诺组合符（

promise.all

，

promise.race

等）组合使用

例如，如果您的函数当前使用了提供承诺的内容（如

fetch

）：

如果它没有使用提供承诺的东西：

function fetchTheInformation({param1, param2, param3 = "default for param3"}) {
    return new Promise((resolve, reject) => {
        // ...start the operation and call `resolve` if it works, `reject` with an `Error` if it doesn't...
    });
}

在任何一种情况下，对它的调用在

async

函数中都可能是这样的：

const information = await fetchTheInformation({
    param1: "parameter 1",
    param2, // <=== If you happen to have `param2` in a variable/constant with the same name, no need to repeat it
});

fetchTheInformation({
    param1: "parameter 1",
    param2, // <=== If you happen to have `param2` in a variable/constant with the same name, no need to repeat it, this is just like `param2: param,`
})
.then(information => {
    // ...use the information...
})
.catch(error => {          // Or return the promise chain to something else that will handle errors
    // ...handle/report error...
});

---

关于参数列表：我假设至少需要一个参数，但如果它们都是可选的（具有合理的默认值），则可以这样做：

function example({a = "default for a", b = "default for b", c = "default for c"} = {}) {
}

---

分解结构中

=

之后的表达式为这些分解参数提供默认值。最后的

={}

使整个parameters对象成为可选对象，通过上面的操作，您可以执行

example（）

或

example（{}）

或

example（{a:“something”}）

等操作。

函数将更轻，因为它消除了对不必要特性的需求。也是为了回答您的问题-如何处理大量参数？不要超过7。尽量把目标定在4点以下。使用更小的功能来降低复杂性。只要想一想，参数越多，排列就越难推理。这就是为什么高智商类型的程序员在天才级别上，没有其他人可以使用他们的代码，因为他们不考虑其他人的有限思维能力。代码使其他人能够不歧视他们。（FWIW，我在我最近的新书《JavaScript:New Toys.Links》第7章中介绍了解构，包括参数解构，如果您感兴趣，请参阅我个人资料中的链接。）

function example({a = "default for a", b = "default for b", c = "default for c"} = {}) {
}