【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

（编辑：湖南网）

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