react:高阶组件wrappedComponent

Posted 2021-01-12 Nyan

什么是高阶组件？

高阶部件是一种用于复用组件逻辑的高级技术，它并不是 React API的一部分，而是从React 演化而来的一种模式。 具体地说，高阶组件就是一个接收一个组件并返回另外一个新组件的函数！

解决什么问题？

随着项目越来越复杂，开发过程中，多个组件需要某个功能，而且这个功能和页面并没有关系，所以也不能简单的抽取成一个新的组件，但是如果让同样的逻辑在各个组件里各自实现，无疑会导致重复的代码。比如页面有三种弹窗一个有title，一个没有，一个又有右上角关闭按钮，除此之外别无它样，你总不能整好几个弹窗组件吧，这里除了tilte,关闭按钮其他的就可以做为上面说的基本材料。

高阶组件总共分为两大类

• 代理方式

1. 操纵prop

2. 访问ref（不推荐）

3. 抽取状态

4. 包装组件

• 继承方式

1. 操纵生命周期

2. 操纵prop

代理方式之 操纵prop

import React from ‘react‘
function HocRemoveProp (WrappedComponent) {
  return class WrappingComPonent extends React.Component{
    render() {
      const { user, ...otherProps } = this.props;
      return <WrappedComponent {...otherProps} />
    }
  }
}
export default HocRemoveProp;

增加prop

接下来我把简化了写法，把匿名函数去掉，同时换成箭头函数

import React from ‘react‘
const HocAddProp = (WrappedComponent，uid) =>
  class extends React.Component
 {
    render() {
      const newProps = {
        uid,
      };
      return <WrappedComponent {...this.props}  {...newProps}  />
    }
  }
export default HocAddProp;

两个高阶组件的使用方法：

1. const  newComponent = HocRemoveProp(SampleComponent);

2. const  newComponent = HocAddProp(SampleComponent,‘1111111‘);

也可以利用decorator语法糖这样使用

import React, { Component } from ‘React‘；

@HocRemoveProp
class SampleComponent extends Component {

    render() {}
}
export default SampleComponent;

代理方式之 抽取状态

将所有的状态的管理交给外面的容器组件，这个模式就是 抽取状态 外面的容器就是这个高阶组件

const HocContainer = (WrappedComponent) =>
  class extends React.Component{
    constructor(props) {
      super(props)
      this.state = {
        name: ‘‘
      }
    }
    onNameChange = (event) => {
      this.setState({
        name: event.target.value
      })
    }
    render() {
      const newProps = {
        name: {
          value: this.state.name,
          onChange: this.onNameChange
        }
      }
      return <WrappedComponent {...this.props} {...newProps} />
    }
  }

@HocContainer
class SampleComponent extends React.Component
 {
  render() {
    return <input name="name" {...this.props.name}/>
  }
}

这样当我们在使用这个已经被包裹的input组件（SampleComponent）时候 它的值就被放在了HocContainer高阶组件中，当很多这样的input组件都用这个HocContainer高阶组件时，那么它们的值都将保存在这个HocContainer高阶组件中

代理方式之 包装组件

const HocStyleComponent = (WrappedComponent, style) =>
  class extends React.Component{
    render() {
      return (
        <div style={style}>
          <WrappedComponent {...this.props} {...newProps} />
        </div>
      )
    }
  }

import HocStyleComponent from  ‘./HocStyleComponent‘;
const colorSytle ={color:‘#ff5555‘}
const newComponent = HocStyleComponent(SampleComponent, colorSytle);