react function HOC（高阶组件）实现和使用（仿造dvajs的connect）

react function HOC（高阶组件）实现和使用

//定义高阶组件 a.jsx
function myHOC(propsHandler) {
  // 返回一个接收参数为组件的函数
  return function (WrappedComponent) {
    // 返回一个新的组件 
    // 这里可以理解为你本来要返回的那个组件，但是现在要返回一个新组件
    return function (props) {
      // 这里面可以使用hook处理props，或者添加各种值到原始的props里面
      const [newProps] = useState(isFunction(propsHandler) ? propsHandler(props) : props);
      const [counter] = useState(100)
      console.log('newProps', newProps)
      // 传递所有props到WrappedComponent组件;也可以传一些你想加的特性
      return <WrappedComponent {...newProps} counter={counter} />;
    };
  };
}



// 定义普通组件 b.jsx
function YourComponent(props) {
  const { counter } = props
  const [count, setCount] = useState(0)
  return <div>
    <button onClick={() => setCount((c) => c + 1)}>加一</button>
    <p>自身定义的count：{count}</p>
    <p>高阶组件定义的counter：{counter}</p>
  </div>
}

// 使用高阶组件包裹普通组件并导出
export default myHOC((props)=>({...props}))(YourComponent)