React高阶组件：函数组件的渲染劫持技术问询

让我们一步步拆解这个高阶组件（HOC）的逻辑，看看它是如何实现渲染劫持的：

1. HOC的基础结构 #

这个HOC的定义是标准的高阶组件模式：

function iiHOC(WrappedComponent) { 
  return class Enhancer extends WrappedComponent { 
    // 增强逻辑写在这里
  } 
}

它接收一个WrappedComponent（被包裹的组件）作为参数，返回一个名为Enhancer的新组件——这里的关键是，Enhancer直接继承了被包裹组件，这种实现方式属于「继承式HOC」，和我们更常见的「组合式HOC」（返回新组件并在内部渲染WrappedComponent）有所不同。

2. 核心渲染劫持逻辑 #

在Enhancer的render方法里，完成了对原组件输出的修改：

render() { 
  // 1. 调用原组件的render方法，拿到它的虚拟DOM树
  const elementsTree = super.render() 
  let newProps = {}; 

  // 2. 判断原组件返回的是不是input元素
  if (elementsTree && elementsTree.type === 'input') { 
    // 如果是input，设置新的value属性
    newProps = {value: 'may the force be with you'} 
  } 

  // 3. 合并原props和新props，新props会覆盖原有的同名属性
  const props = Object.assign({}, elementsTree.props, newProps) 

  // 4. 克隆原虚拟DOM，传入新props，保留原有子元素
  const newElementsTree = React.cloneElement(elementsTree, props, elementsTree.props.children) 

  // 5. 返回修改后的虚拟DOM
  return newElementsTree; 
}

具体步骤拆解：

• 第一步通过super.render()调用原组件的渲染逻辑，获取它生成的虚拟DOM结构；
• 第二步检查这个虚拟DOM是不是input类型的元素，如果是，就准备要修改的props；
• 第三步用Object.assign合并原组件的props和新props，确保新的配置能覆盖原有的（比如原input已经有value的话，会被替换成我们设置的字符串）；
• 第四步用React.cloneElement克隆原虚拟DOM，传入新的props，同时保留原来的子元素，生成新的虚拟DOM；
• 最后返回修改后的虚拟DOM，完成渲染劫持。

3. 注意事项与局限性 #

• 仅支持类组件：这个实现最大的限制是只能作用于类组件。因为class Enhancer extends WrappedComponent要求WrappedComponent必须是一个类，如果传入函数组件，JavaScript会直接抛出错误（函数不能作为类的父类）。所以博客中说“针对函数组件”的描述是不准确的，这是个容易踩的坑。
• 继承式HOC的风险：直接继承原组件可能会和原组件的生命周期、state、方法产生冲突——比如如果原组件也重写了render方法，或者有其他实例方法，继承可能会导致意外的覆盖。相比之下，组合式HOC（通过在新组件中渲染WrappedComponent并传递props）的侵入性更低，也更安全。
• 适用场景：这种渲染劫持的思路可以用于统一修改组件输出，比如给所有input设置默认值、全局添加样式类、根据权限隐藏特定元素等。

内容的提问来源于stack exchange，提问作者Nicolas Marshall