Question

我正在关注ReactJS中的firebase身份验证教程。在代码中，我偶然发现了这样的功能：

HTMLButtonElement

我想这个函数用于设置React组件的状态。它的用法如下：

class BeeKeeper {
    hasMask: boolean;
}

class ZooKeeper {
    nametag: string;
}

class Animal {
    numLegs: number;
}

class Bee extends Animal {
    keeper: BeeKeeper;
}

class Lion extends Animal {
    keeper: ZooKeeper;
}

function createInstance<A extends Animal>(c: new () => A): A {
    return new c();
}

createInstance(Lion).keeper.nametag;  // typechecks!
createInstance(Bee).keeper.hasMask;   // typechecks!

我是React，JavaScript，ES6和一般函数式编程的新手，所以这让我感到很困惑。我知道双箭头符号表示一个curried函数，它可以部分应用函数。但是，在这种情况下，我无法看到在这种情况下如何使用它。

这是我所指的教程： tutorial

Answer 1

你误解了双箭头。这只是创建一个函数，不一定是curried或partial函数。

例如：

// just a function
let doSomething = () => console.log("did something")
//call it
doSomething()

你可以从一个函数（又名higher-order function)）返回另一个函数，这就是你的例子中发生的事情：

// this will return the function () => console.log("said " + something)
let saySomething = (something) => () => console.log("said " + something)

// call the above function, which returns a different function
let sayHello = saySomething("Hello")

// now call that function
sayHello()

您可以使用bind制作部分功能：

function add(a, b) {console.log(a + b)}

let addFive =  add.bind(null, 5)

addFive(3)
addFive(10)

再采取一步，您可以制作一个通用函数来添加任何内容：

// just a regular function
let add = (a,b) => console.log(a + b)

// a function to create a partial of the above based on passed in argument
let addThis = (a) => add.bind(null, a)

// make an add-10 function
let addTen = addThis(10)

// call it
addTen(12)

// make an add-33 function
let add33 = addThis(33)

add33(100)

编辑：回复评论

Curried函数是分解较大函数的函数，这些函数将多个参数转换为较少的函数或较少的参数。

例如这个简单的函数：

let add = (a, b, c) => a + b + c

可以 curried 分成三个函数，每个函数都有一个这样的参数：

let addCurried = (a) => (b) => (c) => a + b + c

您可以使用部分或全部参数调用此方法来获取结果或部分：

// non curried: F(a, b, c) -> sum
// curried: F():a -> (b -> (c -> sum)) 
let addCurried = (a) => (b) => (c) => a + b + c

// add everything
let total = addCurried(1)(2)(3) // -> 6

// make a partial
let addTwoAndThree = addCurried(2)(3)
// call it
let total2 = addTwoAndThree(100) //-> 105

console.log(total, total2)

很难看出给出curry的定义如何接受两个参数并返回函数的函数接受none被视为cur函数。

Answer 2

byPropKey

函数用作辅助函数来映射状态并返回结果，如：

{ "statePiceName": value }

设置你的状态。

没有此功能的相同行为：

{event => this.setState({ username: event.target.value })}

你也可以console.log(byPropKey('key', 'customValue'))看看它是如何运作的。

Answer 3

我无法看到在这种情况下如何使用它。

教程作者正在讨论该函数，因为setState can take either an object or a function。通过一个函数，您可以访问以前的状态和道具。 Here is a sandbox example

在您提供的示例中，教程作者未使用部分应用程序，因此不利用对先前状态和道具的访问。因此，在这种特定情况下，非curried实现（将对象传递给setState）就可以了。

但是，如果您要添加到本教程代码库，未来的代码可能需要byPropKey来访问prevState和props：

const byPropKey = (propertyName, value) => (prevState, props) => {
    //... do something with prevState and props

    return {
        [propertyName]: value,
    }
};

......这可能是教程作者写作curried函数的原因。

咖喱功能没有部分应用？

3 个答案: