小编Ste*_*ren的帖子

我正在使用高阶组件来装饰我的组件.

const HOC = (WrappedComponent) => (props) => {
    return (
        <span>
            <p>HOC Comp</p>
            <WrappedComponent {...props}/>
        </span>
    )
}

我喜欢这里解释的这种模式:深入反应高阶组件

但是我有一个问题,因为HOC导致React重新创建我的组件树而不是更新树.这里很好地解释了React Reconciliation.HOC返回一个匿名函数,React不知道它实际上是在渲染相同的组件.这对性能不利,使我的输入字段失去焦点.

如果没有React重新创建我的树,我怎么能使用HOC组件render()呢？

示例代码:

class Input extends React.Component {
    componentWillMount() {
        console.log('input component will mount');
    }

    componentWillUnmount() {
        console.log('input component will unmount');
    }

    render() {
        return (
            <span>
                <input value={this.props.value} onChange={this.props.onChange}/>
            </span>
        );
    }
}

const HOC = (WrappedComponent) => {
    const Help = (props) => {
        return (
            <span>
                <WrappedComponent {...props}/>
                <p>{props.help}</p>
            </span>
        ) …