HOC函数中两次return理解

Question

老师您好，代码中为什么会有两次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函数？

Answer 1

阿莱克斯刘 2021-06-25 03:47:39

从本质上来说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 的对比来看，是不是能感受到函数组合的强大呢？所以，你的问题有答案了吗？

• 提问者 Zhang_Kyra #1

  hello 老师，仿照您的例子，
  
  const wrappedComponent = (x:String) => {
      return x;
  }
  
  const withHOC = (f)=> {
      return (x:String) =>{
          const newdata= 'zxc!';
          return wrappedComponent(newdata);
      }
      
  }
  
  const WrappedComponentwithNewProps = withHOC(wrappedComponent);
  console.log("WrappedComponentwithNewProps:",WrappedComponentwithNewProps);
  
  打印结果：
  WrappedComponentwithNewProps: x => {
      const newProps = 'zxc!';
      return wrappedComponent(newProps);
    }
  
  WrappedComponentwithNewProps就是带着新props的组件。理解的对吗。

• 阿莱克斯刘 回复 提问者 Zhang_Kyra #2

  是的，你的理解没有错

Answer 2

慕先生5461412 2022-03-03 15:13:42

函数组件的形式就是() => {return <div />}啊，高阶组件其实就是一个函数，也需要返回一个组件，所以就多了个return