React学习笔记之十一:高阶组件(HOC)

11.高阶组件(HOC)

• 什么是HOC
• 怎么封装一个HOC
• HOC的小栗子
• HOC的用法
• 深入博文推荐

1. 什么是HOC

高阶组件(HOC)不是React的API是一种基于组件的编程方法，是为了组件更好的复用而存在的。

高阶组件!!!就是一个函数 不要慌！

比如获取博客信息列表组件和获取评论列表，虽然可能评论列表在博客信息列表之间有一些差距，比如博客可能有转发等功能，而评论列表可能要有自动获取焦点，保存点评人ID等功能，但是两者都有获取数据源，列表渲染等功能，因此可以将评论组件和博客查询组件封装起来，然后把一些公共的方法抽出来，抽到一个函数中

Notes:

组件和高阶组件之间的区别:

1. 组件是通过props来渲染组件的UI, 就是props -> UI
2. 高阶组件是通过组件和props产生特定的组件, 就是 Component -> Component

2.怎么封装一个HOC

看一个官网例子：

// 此函数接收一个组件...
function withSubscription(WrappedComponent, selectData) {
   
  // ...并返回另一个组件...
  return class extends React.Component {
   
    constructor(props) {
   
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
   
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
   
      // ...负责订阅相关的操作...
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
   
      DataSource.removeChangeListener(this.handleChange);
    }

    handleChange() {
   
      this.setState({
   
        data: selectData(DataSource, this.props)
      });
    }

    render() {
   
      // ... 并使用新数据渲染被包装的组件!
      // 请注意，我们可能还会传递其他属性
      return <WrappedComponent data={
   this.state.data} {
   ...this.props} />;
    }
  };
}

// BlogPost是一个自定义的组件

主要参考 React深入系列

1. 高阶组件的常用写法:

属性代理: 相当于在我们在调用封装组件之前, 先加一层，处理我们需要做的事情，比如我们需要将添加和减少传入下一个组件的props等

反向继承: 相当于该组件继承我们传入的组件，然后通过super来调用父类的render方法

2. 高阶组件的功能

3. 组合渲染: 通过高阶组件拼接多个组件 ✔

4. 条件渲染: 根据传入条件按条件渲染组件 ✔

5. 操作props: 增加或者减少传入组件的props ✔

6. 获取refs: 通过refs获得组件对象 ×

7. 状态管理: 通过HOC来绑定一些状态属性，双向绑定 ✔

8. 操作state: 利用反向代理来操作原组件的state ✔

✔为已经理解的，×为不太懂的，之后补上

3. 一个高阶组件小栗子

双向绑定的例子详解：

场景： 在定义表单的时候，经常需要获取输入的表单信息,但是react没有像vue一样的双向绑定的v-model的语法糖，因此需要通过value和onChange来转变input组件为受控组件。

高阶组件上场: 如果每次都去这样添加一个state中的value和onChange方法，非常麻烦，因此可以把这个双向绑定的方法提出来！

// App.js 
import React from "react";
import "./App.css";
import Form from "./Component/Form"