Reactjs 对React with Redux中调用动作创建者的不同方式感到困惑

我正在阅读Daniel Bugl的Learning Redux（顺便说一句，它非常出色），在“FilterList组件”部分的代码示例中，有一个action creator调用，如下所示：

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

onClick={clearFilter}

像这样的一个：

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

onClick={clearFilter}

所以看起来，当没有参数时，调用只使用函数名，当有参数时，则需要使用更详细的语法，在本例中，需要使用箭头函数语法。我想和这里的社区核实一下

---

如果我可以像那样做

clearFilter

，那么为什么我不能在没有箭头函数语法的情况下做

setFilter（category）

？

myFunction

是对特定函数的引用，可以传递、分配给变量等。

myFunction（…）

是对函数的调用。如果您试图传递它，那么您将传递该函数调用返回的任何内容

您不能执行

setFilter（category）

，因为您要传递的是该函数调用的结果，而不是函数本身。这就是为什么将调用包装为匿名（

（）=>{…}

，其中大括号对于简单函数是可选的），并将其传入

---

虽然不是特定于ES6或React，但您可能会发现它对.

很有用，因为它是传递函数引用和调用函数之间的区别。请记住，JSX被转换为对

React.createElement（）

的调用，而道具被转换为对象。下面是它的外观：

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

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

//之前
设置过滤器（类别）}
onClick3={setFilter（category）}
/>
//之后
React.createElement（SomeComponent{
onClick1:clearFilter，
onClick2:（）=>setFilter（类别），
onClick3:setFilter（类别）
});

对于

onClick1

，我们将传递一个对命名函数的引用。对于

onClick2

，我们将传递对匿名函数的引用，该匿名函数在运行时调用另一个函数。但是，对于

onClick3

，我们在渲染时调用

setFilter（category）

，然后将其结果用作

onClick3

的值。那不是你想要的

---

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

关注语言的基础知识，您将了解正在发生的事情。在这两种情况下，理想的效果都是函数调用，它会改变变量。clearFilter总是将类别更改为相同的东西（我认为是“所有”），所以它不需要参数。setFilter（category）需要能够将不同的字符串分配给category变量，从而分配给函数参数。看起来，当函数调用不需要参数时，引用all React需要知道onClick需要调用该函数，而如果函数需要传递参数，则需要匿名函数语法。不完全是这样。在这两种情况下，都需要函数引用。但是，

onClick={someFunc（someArg）}

将调用

someFunc（）

，因此

onClick

将得到

someFunc（）

返回的任何内容。除非

someFunc（）

返回新函数，

onClick

将不会获得函数引用。但是，

{（）=>someFunc（someArg）}

是一个函数引用，因此可以正常工作。