react withRouter

解析react 高阶组件(withRouter)

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

先简单介绍一下什么是高阶组件(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树中的元素。

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

（逆战班）

react withRouter相关推荐

react withRouter的用法
withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做.withRo ...
react ——withRouter——页面隐式传值—嵌套路由——渲染方式——自定义导航组件
withRouter import {Route,Switch,withRouter} from "react-router-dom" withRouter高阶组件增强组件--获取 ...
react withRouter和connect 同时使用的案例
在react中,如果遇到redux的connect 和一般组件跳转的withRouter 同时使用 ... import React from 'react'; import {connect} ...
react withRouter 离开页面触发
componentDidMount(){ this.props.router.setRouteLeaveHook(this.props.route, () => { //if (this.sta ...
react中@withrouter_为什么 withRouter 高阶组件应该处于最外层？
这篇文章的主要内容是说 React 16.3 以前的 getChildContext 这个老 Context API 存在会被 PureComponent 截断的问题,React-Router 4.3 ...
React 路由报错 You should not use Route or withRouter() outside a Router
App.js在中的代码 import React, {Component , Fragment} from 'react'; import {withRouter , Route , Switch , ...
使用react 高阶组件withRouter
使用react 高阶组件withRouter withRouter 是一个高阶组件,把 match,location,history 三个对象注入到组件的 props 中.这是一个非常实用的函数 re ...
react之withRouter的作用
withRouter的作用:把不是通过路由切换过来的组件,将react-router的history.location和match三个对象传入到props对象上: 默认情况下必须是经过路由匹配渲染的组 ...
react+ts项目实战：如何使用withRouter？
1.我使用withRouter使解决什么问题? 我在项目中使用了antd的Menu组件,其中defaultOpenKeys和defaultSelectedKeys两个属性要是设为一个固定的值,每次刷新 ...

react withRouter

解析react 高阶组件(withRouter)

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

react withRouter相关推荐

最新文章

热门文章