React Hook问题

Question

如图，为什么使用hook时还要弄个函数包起来？最后调用函数，这是不是很多余，直接调用却不行？

Answer 1

如果back方法里只有一句history.goBack();那确实多余
这么做，可能：
1、back方法里预留写其他逻辑
2、更语义化，便于理解（好像也不是很难理解 - -!）
可以直接onBack={history.goBack}

另外，即使要写back方法，按规范也应该套一层useCallback

Answer 2

补充一下，如果 NavBar 组件在调用 onBack prop 的时候，传递了一个参数，例如 props.onBack('sth')，直接这样写的话 onBack={history.goBack}，参数会被传递给 history.goBack，可能处理会有问题。

Answer 3

goBack函数默认是不接受参数的，如果传递则接受的参数类型为 number

如果在某些调用中使用就会给goBack函数传递错误的参数。例如🌰：

<div onClick={goBack}>
    点击我
</div>

这种写法其实会把 onClick的e参数传递给goBack。如果在typscript运行环境中。是会报错的
报错如下信息：

总结一下其他回答者的答案，包一层的原因：

• 语义化，给未来扩展留空间
• 不同函数会有不同入参，传递错误可能会有问题
• 不让typescript报错

Answer 4

说白了就是这个函数有没有参数的问题，没有参数你可以直接写函数名就行，但是有参数你不能直接写，写了JavaScript 会直接调用，因为括号就是表示要调用函数了。所以需要用箭头函数包一层，防止在不合适的时间直接调用。