HOC函数中两次return理解
来源：4-9 【高阶组件HOC】withAddToCart()
Zhang_Kyra
2021-06-24
老师您好，代码中为什么会有两次return，HOC返回一个组件，第二个return正好返回了包装的子组件，第一个return必须存在吗？
export const withAddtoChart= (ChildComponet: React.ComponentType) => {
return (props) => {
const setState = useContext(appSetStateContext);
.....
return <ChildComponet {...props} addShoppingChart={addShoppingChart}/>
};
}
另外如果把代码修改如下：
export const withAddtoChart= (ChildComponet: React.ComponentType) => {
const test= (props) => {
const setState = useContext(appSetStateContext);
…
则会报错，React Hook “useContext” is called in function “test” that is neither a React function component nor a custom React Hook function.
说明React hooks只能用于React函数或者自定义Hook中，那为什么加上return就变成了React函数？
2回答
-
从本质上来说HOC属于函数的组合，本质如下：
var compose = function(f, g) { // 参数f、g都是函数 return function(x) { return f(g(x)) } }举个例子：
var toUpperCase = function(x) { return x.toUpperCase(); } //把字符串x转化为大写 var exclaim = function(x) { return x + "!"; } // 给字符串x后面加上感叹号如果使用上面的compose函数，我们就可以利用函数的组合功能来制作一个既能转化大写、又能加感叹号的新的函数了，比如这样：
var shout = comoise(exclaim, toUpperCase) shout("hello world") // 输出：HELLO WORLD!从上面的例子可以看到，函数组合compose() 使用的就是两个return。那么如果我就是不用两个return，可不可以进行函数组合呢？还是可以的，例子如下
var shout2 = function(x) { return exclaim(toUpperCase(x)) }但是，我们明显可以看出使用compose的优势，从 shout 与 shout2 的对比来看，是不是能感受到函数组合的强大呢？所以，你的问题有答案了吗？
022021-06-25 -
慕先生5461412
2022-03-03
函数组件的形式就是() => {return <div />}啊，高阶组件其实就是一个函数，也需要返回一个组件，所以就多了个return
00
相似问题