【React深入】从Mixin到HOC再到Hook

通过反向继承实现

function hijackHOC(WrappedComponent) {  
  return class extends WrappedComponent {  
    render() {  
      const tree = super.render();  
      let newProps = {};  
      if (tree && tree.type === 'input') {  
        newProps = { value: '渲染被劫持了' };  
      }  
      const props = Object.assign({}, tree.props, newProps);  
      const newTree = React.cloneElement(tree, props, tree.props.children);  
      return newTree;  
    }  
  }  
} 

注意上面的说明我用的是增强而不是更改。render函数内实际上是调用React.creatElement产生的React元素：

虽然我们能拿到它，但是我们不能直接修改它里面的属性，我们通过getOwnPropertyDescriptors函数来打印下它的配置项：

可以发现，所有的writable属性均被配置为了false，即所有属性是不可变的。（对这些配置项有疑问，请👇defineProperty）

不能直接修改，我们可以借助cloneElement方法来在原组件的基础上增强一个新组件：

React.cloneElement()克隆并返回一个新的React元素，使用 element 作为起点。生成的元素将会拥有原始元素props与新props的浅合并。新的子级会替换现有的子级。来自原始元素的 key 和 ref 将会保留。

React.cloneElement() 几乎相当于：

<element.type {...element.props} {...props}>{children}</element.type> 

如何使用HOC

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!