Question

我了解到，只有在类逻辑相同时，您才可以使用HOC修改渲染函数。我尝试自己做，并提出了一个使用this.props.children和cloneElement的解决方案。

我在StackOverFlow上进行了搜索，以发现两者之间的差异，但是唯一的问题是从2016年开始，React从那以后发生了变化。我想知道彼此之间是否存在性能问题，在2019年什么被视为“最佳实践”

这里是cloneElement：

 <Counter>
  <ButtonCounter />
</Counter>
<Counter>
  <KeyStrokesCounter />
</Counter>

export default class Counter extends Component {
    constructor(props) {
        super(props);

        this.state = {
            counter: 0
        };
    }

    updateCounter = () => {
        this.setState(prev => ({
            counter: prev.counter + 1
        }));
    };

    render() {
        return (
            <React.Fragment>
                {React.cloneElement(this.props.children, {
                    clickHandler: this.updateCounter,
                    counter: this.state.counter
                })}
            </React.Fragment>
        );
    }
}

export default class ButtonCounter extends Component {
    constructor(props) {
        super(props);
        console.log('ButtonCounter created lol');
    }

    render() {
        return (
            <div>
                <button onClick={this.props.clickHandler}>
                    Clicked {this.props.counter} times
                </button>
            </div>
        );
    }
}

HOC：

<Button />
<InputKeyStroke />

const CounterComponent = OgComp => {
    class NewComp extends React.Component {
        constructor(props) {
            super(props);

            this.state = {
                counter: 42
            };
        }

        incrementCounter = () => {
            this.setState(prev => ({
                counter: prev.counter + 1
            }));
        };

        render() {
            return (
                <OgComp
                    evtHandler={this.incrementCounter}
                    counter={this.state.counter}
                />
            );
        }
    }

    return NewComp;
};

export default CounterComponent;

export default CounterComponent(
    class Button extends React.Component {
        constructor(props) {
            super(props);

            console.log('RCONST BUTTON');
        }

        render() {
            return (
                <button onClick={this.props.evtHandler}>
                    Clicked {this.props.counter} times
                </button>
            );
        }
    }
);

是否有最好的方法来做到这一点？在每次cloneElement事件期间都不会调用构造函数。

Answer 1

这不能回答您的问题，但这是我为cloneElement VS渲染道具找到的基准：https://gist.github.com/nemoDreamer/21412b28dc65d51e2c5c8561a8f82ce1

HOC vs cloneElement在2019

1 个答案: