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或者pureComponent2.所以在根组件继承 下面的组件都具备这个功能了
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.后续有空在补充
