React 高阶组件重用逻辑

留个坑，以后填。

简单的示例代码，介绍了React高阶组件的运作方式：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { PassThrough } from 'stream';

function makeComponent(WrappedComponent, selectData) {
    return class extends React.Component {
        constructor(props) {
            super(props);
            //HOC 应该透传与自身无关的 props,此处color是给color的，其他的透传
            const { color, ...PassThroughProps } = props;
            this.state = { data: selectData };
        }
        componentDidMount() {
            this.setState({ data: this.state.data + 'New!' });
        }
        render() {
            return (<WrappedComponent data={this.state.data} {...this.PassThroughProps} />);
        }
    }
}

function Child(props) {
    return (<div><h1>props.data:{props.data}</h1></div>);
}

function Child2(props) {
    return (<div><h1>props.data:{props.data}</h1></div>);
}

const MyChild1 = makeComponent(Child, 'MyChild1');
const MyChild2 = makeComponent(Child2, 'MyChild2');

class App extends React.Component {
    render() {
        return (
            <div>
                <MyChild1 color="white"></MyChild1>
                <MyChild2></MyChild2>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

总觉得这个这个并没有生成新的组件，而是作为中间件存在了。
毕竟返回的是原来的组件嘛，如果说哪里出现了变化，那一定是数据。
因为要对数据进行非常类似的处理，所以需要复用的是逻辑。
而且HOC保证不会修改组件，所以我对“生成新的组件”这句话表示怀疑。

这里头有几个重点需要注意：
1.组件作为变量般存在：
此时组件作为一等值的身份展露无疑，请转换思维，把它当做一般的变量看待。
2.不是‘改变’组件，而是‘增强’组件：
传入组件》包装组件（永久/非永久预处理）》增强组件。
这个过程不改变组件本身，就算改变了组件本身，也没有办法一般化，因为每次都是返回一个新的组件。

React 高阶组件 重用逻辑

React 高阶组件重用逻辑