React的高阶组件（HOC）的构建与应用

高阶组件

高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React
API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。

具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，高阶组件会对传入的组件做一些通用的处理。比如：我们希望给组件的的下方增加一个版权信息，那么就可以使用高阶组件。把原始组件传入，然后，给组件增加一个版权信息后，再返回。

高阶组件是通过将原组件包裹（wrapping）在容器组件（container
component）里面的方式来组合（composes）使用原组件。高阶组件就是一个没有副作用的纯函数。

// 带上版权的高阶函数
function withCopyRight(OldCom){class NewCom extends React.Component{      render() {return (<div><OldCom /><hr/><div>Copyright © 2020 Sohu All Rights Reserved. 搜狐公司 版权所有</div></div>);}}   return NewCom;
}//原始组件
class CommentList extends React.Component {render() {      return (<div>新闻11111111111111111111</div>);}
}//调用高阶函数后的组件
const CommentListWithCopyRight = withCopyRight(CommentList);ReactDOM.render( <div> <CommentListWithCopyRight /></div> ,$("box"));
function $(id){return document.getElementById(id);
}

高阶组件的注意点：

1、不要在render函数里使用高阶组件2、必须将静态（static）方法做拷贝
当使用高阶组件包装组件，原始组件被容器组件包裹，也就意味着新组件会丢失原始组件的所有静态方法，解决这个问题的方法就是，将原始组件的所有静态方法全部拷贝给新组件。3、Refs不能传递一般来说，高阶组件可以传递所有的props属性给包裹的组件，但是不能传递refs引用。4、不要在高阶组件内部修改（或以其它方式修改）原组件的原型属性（prototype）。5、约定：将不相关的props属性传递给包裹组件6、约定：最大化使用组合7、约定：包装显示名字以便于调试

React的高阶组件（HOC）的构建与应用相关推荐

[react] 使用高阶组件(HOC)实现一个loading组件
[react] 使用高阶组件(HOC)实现一个loading组件 function HOC(wrappedComponent) {return class extends React.Componen ...
react学习—高阶组件HOC
高阶组件HOC 一.高阶组件HOC 1.高阶组件 2.属性传递 3.使用属性传递 4.注意一.高阶组件HOC HOF:Higher-Order Function, 高阶函数,以函数作为参数,并返回一 ...
React Native高阶组件(HOC)模型理论与实践
什么是HOC? HOC(全称Higher-order component)是一种React的进阶使用方法,主要还是为了便于组件的复用.HOC就是一个方法,获取一个组件,返回一个更高级的组件. 什么时候 ...
React的高阶组件(HOC)
1. 概念高阶组件和高阶函数的类似,使用函数接收一个组件,并返回一个组件. function withList(WrapComponent) {return class extends Compon ...
[react] 高阶组件(HOC)有哪些优点和缺点？
[react] 高阶组件(HOC)有哪些优点和缺点? HOC 优点通过传递props去影响内层组件的状态,不直接改变内层组件的状态,降低了耦合度缺点组件多层嵌套, 增加复杂度与理解成本 ref隔 ...
[react] 举例说明什么是高阶组件(HOC)的反向继承
[react] 举例说明什么是高阶组件(HOC)的反向继承 import React from 'react';const hoc = (WrappedComponent) => {// 集成需 ...
[react] 举例说明什么是高阶组件(HOC)的属性代理
[react] 举例说明什么是高阶组件(HOC)的属性代理 function HOC(WrappedComponent) {return class HOC extends Component {re ...
「react进阶」一文吃透React高阶组件(HOC)
一前言 React高阶组件(HOC),对于很多react开发者来说并不陌生,它是灵活使用react组件的一种技巧,高阶组件本身不是组件,它是一个参数为组件,返回值也是一个组件的函数.高阶作用用于强化 ...
React 高阶组件HOC使用总结
HOC(高阶组件) /*HOC(高阶组件): 接收一个组件,返回包装后的组件(增强组件)- 不是React API- 是一种设计模式,类似于装饰器模式- ≈ Mixin && > ...
react 高阶组件hoc使用
react 高阶组件hoc使用 1. 为什么使用高阶组件 2. 具体使用 2.1原代码: 2.2 使用hoc封装后 1. 为什么使用高阶组件高阶组件(HOC)是 React 中用于复用组件逻辑的一种 ...

React的高阶组件（HOC）的构建与应用

高阶组件

React的高阶组件（HOC）的构建与应用相关推荐

最新文章

热门文章