初识React(7)：高阶组件

2023年1月29日 218次阅读 来源: hope93

什么是高阶组件

高阶组件，听着彷佛很嵬峨尚，然则实在高阶组件就是一个函数的参数是组件，返回的是一个新的组件。那末，高阶组件有什么优点呢，高阶组件能够削减代码冗余，把共有的代码提取出来，下面有个例子申明下：

import React from 'react'

function NewHigher(ComponentTest){
  class NewComponent extends React.Component {
    constructor() {
      super();
      this.state = {
          content: '我是内容'
      }
   }

    render() {
      return (
        <div>
           <h2>高阶组件</h2>
           <ComponentTest content={this.state.content}/>
        </div>
      )
    }
  }

  return NewComponent

}

export default NewHigher;

NewHigher返回的就是高阶组件

import React from 'react';
import NewHigher from './higherComponent.js'

class Test extends React.Component {
  render() {
    return (
      <div>
        <div>测试组件</div>
        <div>{this.props.content}</div>
      </div>
    )
  }
}

export default NewHigher(Test);

高阶组件能够这么明白吧，就是给现有组件设置一个父级，父级有的东西，现有组件都继续了，所以我们能够把一切共有的东西放在这个高阶组件中。在上面谁人例子中，NewHigher就是父级，Test继续了父级中的一切东西。

    原文作者：hope93
    原文地址: https://segmentfault.com/a/1190000016208073
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞