每日一博 | 「React」之组件逻辑复用小技巧
编者荐语: 本文将介绍React组件逻辑复用的一些常用模式和技巧。包括一下几个方面: 什么是高阶组件 HOC HOC解决了哪些问题 如何封装一个简单的高阶组件 HOC在项目中常用的一些技巧和方法 什么是 Render Props Render Props的特点和用法 Render Props和 HOC React Hooks相比,有哪些优劣(重要面试题) HOC高阶组件 高阶组件(HOC):是React中用于复用组件逻辑的一种高级技巧。HOC自身不是React API的一部分,它是一种基于React的组合特性而形成的设计模式。 高阶组件可以看做React对装饰器模式的一种实现,具体而言,高阶组件是参数作为组件,返回值为新组件的函数。 HOC解决的问题 抽离公共组件,实现组件代码复用,常见场景:页面复用。 条件渲染,控制组件的渲染逻辑(渲染劫持),常见场景:权限控制。 捕获/劫持被处理组件的生命周期,常见场景:组件渲染性能追踪、日志打点。 当我们项目中使用高阶组件开发时,能够让代码变得更加优雅,同时增强代码的复用性和灵活性,提升开发效率 高阶组件的基本框架 高阶组件的框架: export...