React 中的高阶组件及其应用场景

本篇目录:

  • 什么是高阶组件
  • React 中的高阶组件
    • 属性代理(Props Proxy)
      • 操作 props
      • 抽离 state
      • 通过 ref 访问到组件实例
      • 用其他元素包裹传入的组件 WrappedComponent
    • 反向继承(Inheritance Inversion)
      • 操作 state
      • 渲染劫持(Render Highjacking)
        • 条件渲染
        • 操作由 render() 输出的 React 元素树
  • 高阶组件存在的问题
    • 静态方法丢失
    • refs 属性不能透传
    • 反向继承不能保证完整的子组件树被解析
  • 高阶组件的约定
    • props 保持一致
    • 你不能在函数式(无状态)组件上使用 ref 属性,因为它没有实例
    • 不要以任何方式改变原始组件 WrappedComponent
    • 透传不相关 props 属性给被包裹的组件 WrappedComponent
    • 不要再 render() 方法中使用高阶组件
    • 使用 compose 组合高阶组件
    • 包装显示名字以便于调试
  • 高阶组件的应用场景
    • 权限控制
    • 组件渲染性能追踪
    • 页面复用
  • 装饰者模式?高阶组件?AOP?
  • 总结

阅读全文

关于history的一点心得

本篇目录:

  • history.length
  • history.pushState
  • history.replaceState
  • location.replace
  • location.href
  • window.onpopstate
  • 实践

阅读全文

2019年面试总结

computed原理:

    阅读全文

    URLSearchParams初体验

    本篇目录:

    • URLSearchParams是什么
    • 接口方法
    • 使用场景
      • 场景一 获取浏览器地址参数
      • 使用URLSearchParams处理axios发送的数据
        • 兼容性解决
    • 小结

    阅读全文

    JavaScript中十个拷贝数组的方法

    本篇目录:

    • 1、扩展运算符(浅拷贝
    • 2、for()循环(浅拷贝
    • 3、while()循环(浅拷贝
    • 4、Array.map(浅拷贝
    • 5、Array.filter(浅拷贝
    • 6、Array.reduce(浅拷贝
    • 7、Array.slice(浅拷贝
    • 8、JSON.parse & JSON.stringify(深拷贝
    • 9、Array.cancat(浅拷贝
    • 10、Array.from(浅拷贝
    • 小结

    阅读全文

    11个教程中不常被提及的JavaScript小技巧

    本篇目录:

    • 1、过滤唯一值
    • 2、短路求值(Short-Circuit Evaluation)
      • 工作原理
      • 场景举例
    • 3、转换Boolean型
    • 4、转换String型
    • 5、转换Number类型
    • 6、快速求幂
    • 7、快速Float转Integer
      • 使用场景
    • 8、类中自动绑定
    • 9、截取数组
    • 10、获取数组中的最后的元素
    • 11、格式化JSON代码

    阅读全文