咖喱功能没有部分应用？

Question

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

const byPropKey = (propertyName, value) => () => ({
    [propertyName]: value,
});

我想这个函数用于设置React组件的状态。 它是这样使用的：

<input
    value={username}
    onChange={event => this.setState(byPropKey('username', event.target.value))}
    type="text"
    placeholder="Full Name"
/>

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

这是我指的教程： 教程

Answer 1

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

例如：

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

您可以从函数（也称为高阶函数）返回另一个函数，这是您的示例中正在发生的事情：

 // 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

可以咖喱成三个功能，每个取一个参数是这样的：

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) 

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

Answer 2

byPropKey

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

{ "statePiceName": value }

设置你的状态。

没有此功能的相同行为：

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

您也可以只使用console.log(byPropKey('key', 'customValue'))并查看其工作原理。

Answer 3

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

教程作者正在讨论该函数，因为setState 可以使用对象或函数 。 通过一个函数，您可以访问以前的状态和道具。 这是一个沙盒示例 。

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

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

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

    return {
        [propertyName]: value,
    }
};

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