美文网首页
高阶组件 - HOC

高阶组件 - HOC

作者: _若无 | 来源:发表于2020-12-09 14:25 被阅读0次

       为了提高组件复用率,可测试性,就要保证组件功能单一性;但是若要满足复杂需求就要扩展功能单一的组件,再React 中就有了HOC(Higher-Order Components) 的概念,
定义:高阶组件就是参数为组件,返回值为新组件的函数

基本使用
// hoc 是个函数,参数是组件,返回值是个新的组件
const foo = Cmp => props => {
  return (
      <div>
        <Cmp {...this.props} oops={oops}/>
      </div>
  )
};

function Child(props) {
  return <div> I'am is Chid</div>
}


// const Foo = foo(Child)
// 还可以实现链式调用,foo(Child)当做另外一个高阶组件的参数,不建议阅读性差
const Foo =foo(foo(Child))


// 装饰器的用法
// 装饰器 链式调用
@foo
@foo
@foo
class ClassChild extends Component {
  render() {
      return <div>Child Class</div>
  }
}

export default class HocPage extends Component {
  render() {
    return(
        <div>
          <h3>HocPage</h3>
          <Foo />
          <ClassChild />
        </div>
    )
  }
}
使用HOC 的注意事项

高阶组件(HOC)是React 中用于复用组件逻辑的一种高级技巧。HOC自身不是React API 的一部分,它是基于React的组合特征而形成的设计模式。

  • 不要在 render 方法中使用HOC
    React的 diff 算法(称为协调)使用组件标识来确定它是应该更新现有子树还是将其丢弃并挂载新的子树。如果从render 返回的组件域名前一个渲染中的组件相同(===),则react 通过将子树与新子树进行区分来递归更新子树。如果它们不相等,则完全卸载前一个子树。
render() {
  // 每次调用render 函数都会创建一个新的 EnhancedComponent
// EnhancedComponent1 !== EnhancedComponent2

// 这将导致子树每次渲染都会进行卸载,和重新挂载的操作
return <EnhancedComponent />
}

这不仅仅是性能问题- 重新挂载组件会导致该组件及其所有子组件的状态丢失。

相关文章

  • React 进阶之高阶组件

    高阶组件 HOC 高阶组件(HOC)是react中的高级技术,用来重用组件逻辑。但高阶组件本身并不是React A...

  • ReactNative中的高阶组件(HOC)和继承详解

    ReactNative中的高阶组件(HOC)和继承详解 共同点: 高阶组件(HOC)是 React 中用于复用组件...

  • 高阶组件

    Hoc(高阶组件) 概念 hoc基本用法 hoc链式调用 hoc装饰器用法 概念 概念: 接受组件, 返回新组件,...

  • React 高阶组件(HOC)

    什么是高阶组件? 高阶组件(Higher-Order Components,简称HOC):简而言之,高阶组件就是加...

  • React高阶组件(HOC)

    高阶组件(Higher-Order Components) 高阶组件(HOC)是 React 中用于重用组件逻辑的...

  • 高阶组件

    React 高阶组件HOC (Higher-Order Component) 高阶组件是react中重复使用组件逻...

  • React进阶篇(一)高阶组件

    高阶组件 高阶组件(Higher Order Component,HOC)是React的一种设计模式,用于增强现有...

  • 从高阶函数到高阶组件

    介绍 高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的...

  • React 学习笔记二 - HOC 高阶组件理解

    官方定义 高阶组件(HOC)是 React 中用于 复用组件逻辑 的一种高级技巧。HOC 自身不是 React A...

  • 高阶组件

    higher-order-component (高阶组件HOC)类似于高阶函数,它接受一个React组件作为参数,...

网友评论

      本文标题:高阶组件 - HOC

      本文链接:https://www.haomeiwen.com/subject/izlhgktx.html