React高阶组件

Dear 丶 2022-10-13 12:33 306阅读 0赞

高阶组件（HOC）是React里的高级技术为了应对重用组件的逻辑，HOC本质上不是React API的一部分。他是从React的组合性质中显露出来的模式
具体来说，一个高阶组件就是一个获取一个组件并返回一个组件的函数
注意:一个HOC不会修改传入的参数组件，也不会使用继承来复制它的行为。不如说，一个HOC通过将原始组件包裹到一个容器组件里来混合。一个HOC是一个没有副作用的纯函数。
不要改变原始组件，使用组合
在HOC里要打消修改组件原型的想法。

点击免费学习更多知识

  1. function logProps(WrappedComponent) {
  3.   return class extends React.Component {
  5.     componentWillReceiveProps(nextProps) {
  7.       console.log('Current props: ', this.props);
  9.       console.log('Next props: ', nextProps);
  11.     }
  13.     render() {
  15.       return <WrappedComponent {...this.props} />;
  17.     }
  19.   }
  21. }

发表评论

表情：
评论列表 （有 0 条评论，306人围观）

还没有评论，来说两句吧...

相关阅读

    相关 React-高阶组件

    高阶组件是 React 中复用组件逻辑的一种技巧，高阶组件是一个函数，接收需要包装的组件，返回值为增强后的组件。 实现思路： 高阶组件内部创建一个类组件，在这个类组件中去提

    骑猪看日落骑猪看日落/ 0 赞/ 114 阅读

    相关 React—HOC 高阶组件

    基本概念 对组件中可以被重复使用的内容进行封装 什么是高阶组件 `高阶组件是一个函数`，接收是一个组件，返回值也是一个组件，这类组件我么叫做高阶组件（HOC）；高

    Love The Way You LieLove The Way You Lie/ 0 赞/ 707 阅读

    相关 React高阶组件

    高阶组件（HOC）是React里的高级技术为了应对重用组件的逻辑，HOC本质上不是React API的一部分。他是从React的组合性质中显露出来的模式 具体来说，一个高阶

    Dear 丶Dear 丶/ 0 赞/ 307 阅读

    相关 react 高阶组件

    高阶组件必须是一个函数,且必须返回一个组件，参数也必须接收一个组件 作用:能对传入的组件进行一些限定操作,可以使用生命周期等 ![在这里插入图片描述

    你的名字你的名字/ 0 赞/ 577 阅读