React 高阶组件入门介绍

站长资源 2024/11/26 佚名

51 1538 51

DDR爱好者之家 Design By 杰米

高阶组件的定义

HoC 不属于 React 的 API，它是一种实现模式，本质上是一个函数，接受一个或多个 React 组件作为参数，返回一个全新的 React 组件，而不是改造现有的组件，这样的组件被称为高阶组件。开发过程中，有的功能需要在多个组件类复用时，这时可以创建一个 Hoc。

基本用法

包裹方式

const HoC = (WrappendComponent) => {
 const WrappingComponent = (props) => (
  <div className="container">
   <WrappendComponent {...props} />
  </div>
 );
 return WrappingComponent;
};

上述代码中，接受 WrappendComponent 作为参数，此参数就是将要被 HoC 包装的普通组件，在 render 中包裹一个 div，赋予它 className 属性，最终产生的 WrappingComponent 和传入的 WrappendComponent 是两个完全不同的组件。

在 WrappingComponent 中，可以读取、添加、编辑、删除传给 WrappendComponent 的 props，也可以用其它元素包裹 WrappendComponent，用来实现封装样式、添加布局或其它操作。

组合方式

const HoC = (WrappedComponent, LoginView) => {
 const WrappingComponent = () => {
  const {user} = this.props; 
  if (user) {
   return <WrappedComponent {...this.props} />
  } else {
   return <LoginView {...this.props} />
  }
 };
 return WrappingComponent;
};

上述代码中有两个组件，WrappedComponent 和 LoginView，如果传入的 props 中存在 user，则正常显示的 WrappedComponent 组件，否则显示 LoginView 组件，让用户去登录。HoC 传递的参数可以为多个，传递多个组件定制新组件的行为，例如用户登录状态下显示主页面，未登录显示登录界面；在渲染列表时，传入 List 和 Loading 组件，为新组件添加加载中的行为。

继承方式

const HoC = (WrappendComponent) => {
 class WrappingComponent extends WrappendComponent {
  render() (
   const {user, ...otherProps} = this.props;
   this.props = otherProps;
   return super.render();
  }
 }
 return WrappingComponent;
};

WrappingComponent 是一个新组件，它继承自 WrappendComponent，共享父级的函数和属性。可以使用 super.render() 或者 super.componentWillUpdate() 调用父级的生命周期函数，但是这样会让两个组件耦合在一起，降低组件的复用性。

React 中对组件的封装是按照最小可用单元的思想来进行封装的，理想情况下，一个组件只做一件事情，符合 OOP 中的单一职责原则。如果需要对组件的功能增强，通过组合的方式或者添加代码的方式对组件进行增强，而不是修改原有的代码。

注意事项

不要在 render 函数中使用高阶组件

render() {
 // 每一次render函数调用都会创建一个新的EnhancedComponent实例
 // EnhancedComponent1 !== EnhancedComponent2
 const EnhancedComponent = enhance(MyComponent);
 // 每一次都会使子对象树完全被卸载或移除
 return <EnhancedComponent />;
}

React 中的 diff 算法会比较新旧子对象树，确定是否更新现有的子对象树或丢掉现有的子树并重新挂载。

必须将静态方法做拷贝

// 定义静态方法
WrappedComponent.staticMethod = function() {/*...*/}
// 使用高阶组件
const EnhancedComponent = enhance(WrappedComponent);

// 增强型组件没有静态方法
typeof EnhancedComponent.staticMethod === 'undefined' // true

Refs属性不能传递

HoC中指定的 ref，并不会传递到子组件，需要通过回调函数使用 props 传递。

参考链接

高阶组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

React,高阶组件,react高阶组件,react,高阶组件入门

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“React 高阶组件入门介绍”

暂无评论...

React 高阶组件入门介绍

JS写谷歌浏览器chrome的外挂实例

基于react后端渲染模板引擎noox发布使用

评论“React 高阶组件入门介绍”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接