条件渲染之react高阶组件—

定义：它接受任何输入（多数时候是一个组件）并返回一个组件作为输出。返回的组件是输入组件的增强版本，并且可以在 JSX 中使用。不是react api而是一种设计模式。
作用：强化组件，复用逻辑，提升渲染性能等
使用方法：
创建一个简单的 HOC，它将一个组件作为输入并返回一个组件。

//一般用“with”前缀来命名 HOC
function withFoo(Component) {return function(props) {return <Component { ...props } />;}
}

es6的写法

const withFoo = (Component) => (props) =>
<Component { ...props } />

使用场景：当你的组件之间出现重复的模式 / 逻辑的时候。

条件渲染：例：当加载状态 (isLoading) 为 true 时，组件显示 Loading 组件，否则显示输入的组
件

const Button = ({ onClick, className = '', children }) =><buttononClick={onClick}className={className}type="button">{children}</button>const Loading = () =><div>Loading ...</div>//定义hoc
const withLoading = (Component) => ({ isLoading, ...rest }) =>isLoading? <Loading />: <Component { ...rest } />//实例化一个hoc
const ButtonWithLoading = withLoading(Button);//使用hoc：它接isLoading作为附加属性。当 HOC 消费isLoading时，再将所有其他props 传递给 Button 组件。
<ButtonWithLoadingisLoading={isLoading}onClick={() => this.fetchSearchTopStories(searchKey, page + 1)}>More
</ButtonWithLoading>

优点：组件可以专注于它们的主要用途。the List component can focus on rendering the list. It doesn’t have to bother with a loading status. A HOC hides away all the noise from your actual component.

拓展：其他的条件渲染方法

if/if else ，局限性：不能在 return 语句和 JSX 中使用（自调用函数除外）
三元运算符,可以在 JSX 和 return 语句中使用
逻辑 && 运算符:当三元运算的一侧返回 null 时使用，可以在 JSX 和 return 语句中使用

解决交叉问题(Cross-Cutting Concerns)

使用高阶组件的注意事项

：高阶组件不应修改输入组件

原因：1）输入之间不能脱离增强组件分别重用 2）其他同样修改了类似的高阶组件，第一个高阶组件功能会被覆盖？
更好的解决办法：通过将输入组件包裹在容器组件来实现组合
的组合性，以及提升对 props，state 和视图的可操作性。

不要在render函数中使用高阶组件
原因：每次render都会实例化一个新的高阶组件，造成性能消耗，而且卸载组件会造成组件状态和其子元素全部丢失。
应该：在组件定义外应用高阶组件，以便生成的组件只被创建一次。（除非你需要动态的使用高阶组件）
静态方法必须复制
原因：当你将一个组件应用于高阶组件式，虽然原有的组件被容器组件所包裹，但这新的组件没有之前组件的静态函数
应该：向容器组件中复制原有的静态方法

参考文献：
react学习之道
https://react.html.cn/docs/higher-order-components.html
https://www.robinwieruch.de/react-higher-order-components/
https://juejin.cn/post/6940422320427106335
https://www.robinwieruch.de/react-hooks-higher-order-components/
https://www.robinwieruch.de/react-useeffect-hook/

条件渲染之react高阶组件——HOC相关推荐

「react进阶」一文吃透React高阶组件(HOC)
一前言 React高阶组件(HOC),对于很多react开发者来说并不陌生,它是灵活使用react组件的一种技巧,高阶组件本身不是组件,它是一个参数为组件,返回值也是一个组件的函数.高阶作用用于强化 ...
[react] 高阶组件(HOC)有哪些优点和缺点？
[react] 高阶组件(HOC)有哪些优点和缺点? HOC 优点通过传递props去影响内层组件的状态,不直接改变内层组件的状态,降低了耦合度缺点组件多层嵌套, 增加复杂度与理解成本 ref隔 ...
react 高阶组件hoc使用
react 高阶组件hoc使用 1. 为什么使用高阶组件 2. 具体使用 2.1原代码: 2.2 使用hoc封装后 1. 为什么使用高阶组件高阶组件(HOC)是 React 中用于复用组件逻辑的一种 ...
React 高阶组件HOC使用总结
HOC(高阶组件) /*HOC(高阶组件): 接收一个组件,返回包装后的组件(增强组件)- 不是React API- 是一种设计模式,类似于装饰器模式- ≈ Mixin && > ...
react 高阶组件HOC实现组件复用
目录一使用步骤二显示鼠标坐标三鼠标随图片移动四设置displayName 五传递props 高阶组件HOC: Higher-Order Component,是一个函数,接收要包装的组 ...
React高阶组件(HOC)的写法归纳
react高阶组件的写法总结什么是高阶组件高阶组件要解决什么问题高阶组件的写法什么是高阶组件何为高阶组件(HOC),根据官方文档的解释:"高阶组件是react中复用组件逻辑的一项高 ...
React 高阶组件HOC详解
参考链接: https://juejin.cn/post/6844903815762673671 https://juejin.cn/post/6844904050236850184 前言高阶组件与 ...
React 高阶组件HOC、设置displayName、高阶组件传递props
文章目录 1. 高阶组件使用步骤 2. 高阶组件设置displayName 3.传递props 1. 高阶组件目的:实现状态逻辑复用.实现功能增强.返回一个增强组件. 高阶组件(HOC,Highe ...
React高阶组件(HOC)模型理论与实践
什么是HOC? HOC(全称Higher-order component)是一种React的进阶使用方法,主要还是为了便于组件的复用.HOC就是一个方法,获取一个组件,返回一个更高级的组件. 什么时候 ...

条件渲染之react高阶组件——HOC

使用高阶组件的注意事项

条件渲染之react高阶组件——HOC相关推荐

最新文章

热门文章