react withRouter

解析react 高阶组件(withRouter)

最近正在学前端的react框架中的路由，觉得withRouter这一个高阶组件有点小难度，今天在这里总结了一下关于withRouter的一些主要操作和一些独家见解给大家分享一下

1. 先简单介绍一下什么是高阶组件(withRouter)

高阶组件(HOC)： 一个包装了另一个基础组件的组件。（相对高阶组件来说，我习惯把被包装的组件称为基础组件）
注意： 这里说的是包装，可以理解成包裹和组装；

定义： 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件

• 了解了定义，给大家来段代码认识一下

function WithCom(component){//这里的参数接受的是一个组件
	return class  extends React.Component{
		render(){
			return (<div>这是一个高阶组件</div>)
		}
	}
}

• 上面这段代码就是高阶组件(HOC)的简单描述，

• 其实高阶组件就是一个函数不过他的参数和返回值都是组件

• 高阶组件还是一个没有副作用的纯函数

• 接下来给大家详细介绍一个HOC的两个作用

a) 属性代理（Props Proxy）

可以说是对组件的包裹，在包裹的过程中对被包裹的组件做了点什么（props的处理，把基础组件和其他元素组合），然后返回，这就成了一个高阶组件；

• 举个栗子：

	class App extends React.Component {
	componentDidMount(){
		console.log(this.props)
	}
	render(){
		return (
		  </div>
		);
	}
}
export default (App)；

输出的结果： {}

• 如上代码因为他不是路由切换组件所以他就没有this.props值，所以上面代码输出的结果是 {} 一个空对象
• 如果通过HOC的属性代理可实现代理属性，可以达到组件可获得属性继承，如下：

	class App extends React.Component {
	componentDidMount(){
		console.log(this.props)
	}
	render(){
		return (
		  </div>
		);
	}
}
export default withRouter(App)；

输出的结果：{history: {…}, location: {…}, match: {…}, staticContext: undefined}

b) 反向继承（Inheritance Inversion）

可以理解成是组装，和属性代理不同的是，反向继承是继承自基础组件，所有很自然，它可以直接获取基础组件的props，操作基础组件的state。可以通过 反向继承的形式，配合compose将携带不同功能模块的高阶组件组装到基础组件上，加强基础组件。

• 举个栗子：

function WithCom(Com){
	return class  extends React.Component{
		render(){
			console.log(this.props)
			if(sessionStorage.getItem("user")==="admin"){
				return <div>true</div>
			}else{
				return <div>false</div>
			}
		}
	}
}
export default WithCom;

• 上图是一个反向继承的一种 典型的使用方式叫做渲染劫持，这种方式充分的体现了反向继承的特点

渲染劫持
所谓渲染劫持就是，高阶组件控制了基础组件渲染生成的结果，因为基础组件的渲染被控制，高阶组件就可以对它做点什么。。。比如：
　　 （1）、根据条件，控制渲染的结果；
　　　　　　（2）、改变dom树的样式；
　　　　　　（3）、改变基础组件中一下被渲染元素的props；
　　　　　　（4）、操作dom树中的元素。

今天小白的分享先就这些了，如果有什么疑问，可以在留言去留言，小白会尽力给大家解疑，最后感谢大家的观赏和支持，下期见。

（逆战班）