react之高阶组件HOC

zhaobinglong commented 3 years ago

高阶组件概念

高阶组件的定义是类比于高阶函数(HOF) 的定义。高阶函数接收函数作为参数，并且返回值也是一个函数。类似的，高阶组件接收React组件作为参数，并且返回一个新的React组件。

// 高阶函数举例：
function add(x){
  return function(y){
     return y + x;
  };
}

add(10)(11);  

// 使用函数式编程的写法：
const add = x => y => y + x;

原理

高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件,a higher-order component is a function that takes a component and returns a new component

作用

高阶组件的主要功能是封装并分离组件的通用逻辑，让通用逻辑在组件间更好地被复用(文档上说的是解决交叉问题)

zhaobinglong commented 3 years ago

高阶组件和父组件的区别

有些同学可能会觉得高阶组件有些类似父组件的使用。例如，我们完全可以把高阶组件中的逻辑放到一个父组件中去执行，执行完成的结果再传递给子组件。从逻辑的执行流程上来看，高阶组件确实和父组件比较相像，但是高阶组件强调的是逻辑的抽象。高阶组件是一个函数，函数关注的是逻辑；父组件是一个组件，组件主要关注的是UI/DOM。如果逻辑是与DOM直接相关的，那么这部分逻辑适合放到父组件中实现；如果逻辑是与DOM不直接相关的，那么这部分逻辑适合使用高阶组件抽象。

zhaobinglong commented 3 years ago

高阶组件实例

在这个例子中 getLocalStorageDate便是一个高阶组件，它接收了MyComponent2组件，返回的组件是ComponentWithLocalStorage, 并且在ComponentWithLocalStorage中我们可以使用this.props.data来获取data的值，如果其他的组件同样想获取data的值，只需要将组件传给getLocalStorageDate便可。

HOC 并不会修改输入组件，也不会使用继承来复制其行为。相反，HOC 通过将原始组件包装在容器组件中来组合。

import React, { Component } from 'react'

function getLocalStorageDate(WrappedComponent) {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem('data');
        this.setState({data});
    }

    render() {
      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }
}

class MyComponent2 extends Component {  
  render() {
    return <div>{this.props.data}</div>
  }
}

const ComponentWithLocalStorage = getLocalStorageDate(MyComponent2)

zhaobinglong / myBlog