高阶组件（HOC）组合参数组件

我们来思考一个问题，使用高阶组件是否可以修改一个不满足当前效果的组件呢？

xxxxxxxxxx
export default function withViewData(WrappedComponent) {
    // 修改传入的组件的render函数
    WrappedComponent.prototype.render = function () {
        return <div>使用高阶组件修改后的界面</div>
    };
    //返回修改后的组件
    return WrappedComponent
}

HOC 不应该修改传入组件，而应该使用组合的方式，通过将组件包装来组成新组件。

HOC 是纯函数，没有副作用。

xxxxxxxxxx
export default function withViewData(WrappedComponent) {
   return class extends React.Component {
       render(){
           return <WrappedComponent data={}/>
       }
   }
}

提示：

修改传入组件的 HOC 是一种糟糕的抽象方式。

调用者必须知道他们是如何实现的，以避免与其他 HOC 发生冲突。

实时效果反馈

1. 高阶组件应当__参数组件：

A 直接修改

B 组合

答案

1=>B