Question

我正在阅读Daniel Bugl的学习Redux （顺便提一下）和＃34; FilterList组件＆＃34;部分代码示例有一个动作创建者调用，如下所示：

onClick={() => setFilter(category)}

和这样的一个：

onClick={clearFilter}

所以看起来当没有参数时，调用仅使用函数名称，并且当存在参数时，则需要使用更详细的语法，在这种情况下需要使用箭头函数语法。我想在这里与社区核实这一点。

如果我可以这样做clearFilter那么为什么我不能使用箭头函数语法setFilter(category)？

Answer 1

requestAnimationFrame((timestamp) => { ... })是对特定函数的引用，可以传递，分配给变量等。myFunction是函数的调用。如果你试图传递它，你将传递返回的函数调用。

你不能做myFunction(...)，因为你要传递函数调用的结果，而不是函数本身。这就是为什么你用匿名的arrow function（setFilter(category)包裹调用，其中花括号对于简单函数是可选的），并将其传递给。

虽然不是特定于ES6或React，但您可能会发现它对learn more about JavaScript functions over at MDN web docs很有用。

Answer 2

因为将参考传递给函数和调用函数之间的区别。请记住，JSX会转换为对React.createElement()的调用，并且props会变成一个对象。这是它的外观：

    // before
<SomeComponent 
    onClick1={clearFilter}
    onClick2={() => setFilter(category)}
    onClick3={setFilter(category)}
/>

// after
React.createElement(SomeComponent, {
    onClick1 : clearFilter,
    onClick2 : () => setFilter(category),
    onClick3 : setFilter(category)
});

对于onClick1，我们传递对命名函数的引用。对于onClick2，我们传递对匿名函数的引用，该函数在运行时调用另一个函数。但是，对于onClick3，我们在呈现时调用 setFilter(category) ，然后使用结果作为onClick3的值。那是不是你想要的。

另外，请注意，这实际上与Redux和动作创建者无关。它实际上只是关于React，JSX以及函数在Javascript中的工作方式。

对React with Redux

2 个答案: