39. 什么是高阶函数，高阶组件？

zlx362211854 commented 5 years ago

举例说明什么是高阶函数和高阶组件

nanslee commented 5 years ago

高阶组件：即接收一个组件为参数返回一个经过包装后的组件，常见的如 react-redux 中的 connect()() 或是 antd 中 form 表单 form.create()() 均属于高阶组件，下面我们看一个例子： 这是一个自定义表单获取器：

// simpleHoc：高阶组件
import React, { Component } from "react";

const simpleHoc = WrappedComponent =>
  class extends Component {
    constructor() {
      super();
      this.state = {
        fields: {}
      };
    }

    render() {
      const props = {
        ...this.props,
        handleSubmit: this.handleSubmit,
        getField: this.getField
      };
      return <WrappedComponent {...props} />;
    }

    handleSubmit = () => {
      console.log(this.state.fields);
    };

    getField = key => {
      return {
        onChange: this.onChange(key)
      };
    };

    onChange = key => e => {
      const { fields } = this.state;
      fields[key] = e.target.value;
      this.setState({
        fields
      });
    };
  };

export default simpleHoc;

----------------------------------------------------------------

// Question：被包裹组件
import React, { Fragment } from 'react';
import simpleHoc from './hoc';

const Question = props => {
  return (
    <>
      <Fragment>
        <label id='username'>username:</label>
        <input name='username' {...props.getField('username')} />
      </Fragment>
      <Fragment>
        <label id='password'>password:</label>
        <input name='password' {...props.getField('password')} />
      </Fragment>
      <button onClick={props.handleSubmit}>提交</button>
    </>
  );
};

export default simpleHoc(Question);

高阶函数用法和定义同高阶组件.

goldEli commented 5 years ago

高阶函数

指一个函数接收另一个函数作为参数，返回一个新的函数。主要目的是为了函数拓展能力，比如常见的装饰器模式。

下面这个例子，让函数具备延迟执行的能力：

function delay(func, milliseconds) {
    return () => setTimeout(func, milliseconds)
}

function targetFunction() {
    console.log(123)
}
delay(targetFunction, 2000)()

如果支持装饰器模式的话还可以这样用：

@delay(2000)
function targetFunction() {
    console.log(123)
}

高阶组件

指一个函数接收另一个 React 组件作为参数后返回一个新的组件。主要目的是为了复用组件逻辑。

const higherOrderComponent = (WrappedComponent) => {
  class HOC extends React.Component {

    /**
        some logic
    */

    render() {
      return <WrappedComponent {...this.props}/>;
    }
  }

  return HOC;
};

zlx362211854 commented 5 years ago

高阶函数

函数接受一个或多个函数作为参数，并且返回值是函数，这样的函数叫做高阶函数比如我们经常遇到Math.max,min函数，在使用过程中，可以经过封装，使它更好用

var HOF = (fn, arr) => {
  return fn(...arr)
}
HOF(Math.max,[1,2,3]) //3
HOF(Math.min,[1,2,3]) //1

高阶组件

高阶组件其实就是高阶函数，我们把组件函数化，其实他们二者是相同的。比如在react中：

export default function Loader(props) {
  return function Loading() {
    return (
      <div>
        {props.loading && <icon className='loading'></icon>}
        {props.children}
      </div>
    )
  }
}

实现一个loading

zlx362211854 / daily-study