在 JSX 中调用函数

Question

在 JSX 中以以下替代方式调用函数有什么区别（此处使用 React Hooks）。 对于函数equals ：

const equals = () =>  {
    //Actual code instructs things to do here
}

备择方案：

<button id="equals" onClick={() => equals()}>=</button>

和

<button id="equals" onClick={equals}>=</button>

和

<button id="equals" onClick={equals()}>=</button>

Answer 1

前两个选项是等价的

onClick={() => callback()}

是相同的

onClick={callback}

我们通常在传递附加参数时将处理程序包装在另一个函数上

onClick={e => callback(e, 'foo')}

第三种方式是立即执行handler

const createHandler = () => e => console.log(e)

onClick={createHandler()} // e => console.log(e)

Answer 2

<button id="equals" onClick={() => equals()}>=</button>

上述方法使用一个匿名函数调用equals 。 这样做是为了防止在反应中无限重新渲染。 () => {}是匿名函数的一个例子。

<button id="equals" onClick={equals}>=</button>

上面的代码直接调用equals方法，调用它的实例一次。 这也可以用于反应以防止无限重新渲染。

<button id="equals" onClick={equals()}>=</button>

不应使用最后一个示例。 它会在每次渲染时触发equals函数，并在 React 中创建一个无限循环。

我希望它有帮助。