高阶组件的理解

[FireDragonZL]

• 什么是高阶组件？
• 他解决了什么样的问题？
• 举个例子说明一下

[FireDragonZL]

• 高阶组件：传入一个组件作为参数，并返回封装后的新组件。主要用于多个组件间公共逻辑的复用，基于装饰者模式实现。
• 解决问题：当多个组件之间存在重复逻辑时，使用高阶组件实现逻辑代码的复用。

• 使用函数的方式解释高阶组件

  <script>
      const Welcome = (username) => {
          console.log("welcome=", username)
      }
  
      const GoodBye = (username) => {
          console.log("goodbye=", username)
      }
  
      // 高阶函数
      const WrapperUsername = (NewFunction) => {
          return () => {
              let username = "小龙人";
              NewFunction(username);
          }
      }
  
      const welcome = WrapperUsername(Welcome);
      const goodBye = WrapperUsername(GoodBye);
  
      welcome();
      goodBye();
  </script>

  输出： welcome= 小龙人 goodbye= 小龙人