Skip to content

Latest commit

 

History

History
40 lines (31 loc) · 1.14 KB

HOC.md

File metadata and controls

40 lines (31 loc) · 1.14 KB

高阶组件(高阶函数)

这里记录了我学习高阶组件总结的方法与注意事项

最基础的高阶组件

第一版: 传参验证,这里验证是否是数组

/*
 * HOC-arrayVerify
 * @require func 需要修饰的函数
 * @return ()=>{}
 * designer: heyunjiang
 * time: 2018.5.8
 */
const _hocArrayVerify = (func)=>{
  return (data)=>{
    if(data&&!Array.isArray(data)) {
      console.error('param is not an array for '+ func.prototype.constructor.name +' method')
    } else {
      return func(data)
    }
  }
}

高阶组件的思想

目的就是为需要封装的组件进行预操作,预操作可能包含参数验证、插入参数、闭包状态控制

  1. 本身作为一个函数
  2. 返回一个函数
  3. 返回函数接收实际参数
  4. 返回函数执行时,首先进行验证,同时执行被包裹组件函数
  5. 高阶组件就是一个没有副作用的纯函数,高阶组件既不会修改input原组件,也不会使用继承复制input原组件的行为(引用自react官网)

注意点

  1. 在执行被包裹组件函数的时候,使用 return 可以让高阶组件链式调用