【react】使用高阶组件遇到的问题

背景：微前端框架下，在使用高阶组件为子页面统一添加面包屑时，由于把高阶组件使用在了render里，导致页面死循环。

一开始代码像是这样：

// App.js
renderRoute(route)=>{
// ...
return HOC(Component)
}

render(){
	const ele = renderRoute(route)
	return ele
}

// 子页面
const Component = () =>{
	useEffect(()=>{
		// 将查询参数挂到url中
		history.replace(...)
	},[])
	return <div>...</div>
}

这样会导致页面死循环：
子页面挂载=》触发history.replace=〉页面刷新=》父框架重新渲染=〉子页面挂载…

最后改为在拉取模块后，对模块遍历添加高阶组件包裹。

永远不要在 React render() 方法中定义 React 组件（甚至是无状态组件）。React 在每次更新状态的时候，都会废弃旧的
html DOM 元素并将其替换为全新的元素。比如在 render()
函数中定义一个输入组件，元素被替换之后就会失去焦点，每次只能输入一个字符。

官方文档：
https://zh-hans.reactjs.org/docs/higher-order-components.html
https://segmentfault.com/a/1190000019153177