浅谈 react高阶组件-反向继承
2021-12-01 本文已影响0人
云高风轻
1. 前言
1.不废话,书接上文react-高阶组件参数,只讲了,高阶组件实现方式的一种属性代理
2.接下来讲 反向继承
2. 反向继承
1.通过创建新组件继承自原始组件, 把原始组件作为父组件
2.功能: 可实现对原始组件的state状态数据更新 和 组件模板更新
3. 先来个简单的继承 热身下
1.比如基于请求拦截,响应拦截的一些想法
2.搞个 Loading 和关闭Loading
3.baseURL
3.1 简要代码
class Loading extends React.Component {
constructor(props) {
super(props)
this.state = {
baseURL: "http://yzs.com",
baseImgURL: "http://yzs.com/img"
}
}
show() {
console.log("loading")
}
hide(){
console.log("加载完毕")
}
}
1.一般脚手架项目也都是继承自
Component或者pureComponent
2.所以在根组件继承 下面的组件都具备这个功能了
3.这也是JS推出 class extends 代替原型链的,比如 vue中就是常用原型上挂axios,扯远了 O(∩_∩)O哈哈~
3.2 使用
class Btn extends Loading{
render() {
return(
<div>
<button onClick={this.show}> show </button>
<button onClick={this.hide}> hide</button>
<h1>{this.state.baseURL}</h1>
</div>
)
}
}
let App = ()=>{
return(
<div>
<h1>App</h1>
<Btn/>
</div>
)
}
ReactDOM.render(<App/>,app)
子组件肯定也继承了父组件的
state,钩子
4. 高阶组件的反向继承
4.1 子组件
继承嘛 所以先准备个
ChildComponent组件 ,用来继承
class ChildComponent extends React.Component {
constructor(props) {
super(props)
this.state = { count: 99999 }
}
componentDidMount() {
console.log("演示 反向继承 子组件 mount");
}
// 点击事件
clickComponent() {
console.log("组件被点了");
}
render() {
return (
<div>{this.state.count}</div>
)
}
}
1.简单的state 用来传递到子组件
2.简单的事件,子组件可以调用
3.简单的布局,展示数据
4.2 高阶组件
const ReverHOC = WrapComponent => {
return class extends WrapComponent {
constructor(props) {
super(props)
this.state = { count: 1000 }
}
componentDidMount() {
// 反向继承后,可以拿到原始组件的props和state数据
console.log("高阶组件", this.props, this.state)
console.log("高阶组件 did mount")
this.clickComponent()
}
render() {
return (
// 反向继承时, MyCom是父组件, 不能在子组件模板中使用父组件标签
// return <MyCom/>
// 使用 super.render() 渲染父组件模板
<div>
<h1 onClick={this.clickComponent}>高阶组件</h1>
<div>{super.render()}</div>
</div>
)
}
}
}
1.高阶组件有自己的 state
2.反向继承,也可以获取原始组件的 props state
3.componentDidMount简单调用下,证明可以访问父组件的函数
4.布局里面加入点击事件
5.父组件标签不能在组件使用,所以需要通过来渲染模板
{super.render()}
4.3 高阶组件联合使用
const HOCView = ReverHOC(ChildComponent)
let App = () => {
return (
<div>
<h1>App</h1>
<ChildComponent />
<HOCView />
</div>
)
}
1.直接使用就行
2.查看效果,点击测试
5. 高阶组件的实现方式
- 属性代理: 通过创建新组件来包裹原始组件, 把原始组件作为新组件的子组件渲染
功能: 可实现对原始组件的 props数据更新 和 组件模板更新- 反向继承: 通过创建新组件继承自原始组件, 把原始组件作为父组件
功能: 可实现对原始组件的state状态数据更新 和 组件模板更新
6. 渲染劫持
通过高阶组件把原始组件的模板进行修改和替换
- 渲染劫持指对一个组件渲染内容的装饰或修改, 一般通过高阶组件来实现, 把一个组件传入高阶组件,
可以对这个组件的模板进行修改后执行渲染, 也可以阻止组件渲染,并修改组件中的数据和逻辑
2.渲染劫持的应用: 一般用于一些需要登录状态的页面, 在路由请求渲染页面(如订单页)之前,
使用高阶组件判断是否已登录,如果已登录,返回订单页模板, 如果没有登录,返回空,并跳转到登录页
3.后续有空在补充
参考资料
react-高阶组件参数
react-高阶组件初识
react-redux 基础
react-组件总结
react-高阶组件-中文官网
