react高阶组件 事例 源码
记录一下 高阶组件 的建立（也希望能帮助看的这篇文章的人），这篇文章主要是 教你构建一个hoc的事例，更详细深入的还是需要继续看其他文章
高阶组件通过包裹被传入的React组件，经过处理，最终返回(return)一个相对增强的React组件，供其他组件调用。
- 高阶组件
属性代理 (属性代理顾名思义，就是替代的意思。高阶组件替传入组件管理控制props里面一切属性，管理控制包括增，删，改，查。同时他自身还有自身的状态，即state，来强化传入组件。)
反向继承 (属性代理方式在高阶组件中返回的组件继承的是Component，而反向继承则是继承的传入组件，根据继承的特性，继承可获取父类的所有静态资源，非私有属性和方法，且根据情况可对原方法进行重写。所以反向继承的方式也可以操作传入组件的props以及state。还有一个更重的就是反向继承可以进行渲染劫持。)
1.用create-react-app快速构建 一个项目
<!--如果构建 失败 请 阅读上面create-react-app的文章，估计是你node版本低了-->npx create-react-app my-app
属性代理 事例
建立下列目录
- page 文件夹
- page1.jsx
- page2.jsx
- hocBox.jsx
- page 文件夹
page1.jsx
import React, { Component } from 'react'import HocBox from './hocBox'class Page1 extends Component{render() {console.log(this.props)return <React.Fragment><h2>{this.props.data}</h2><div>这是组件Page1自己的内容</div>{this.props._renderContent()}<div><button onClick={()=>{this.props._alert('1')}}>点击事件</button></div></React.Fragment>}}export default HocBox(Page1) //这是把组件传入高阶组件- page2.jsx
import React, { Component } from 'react'import HocBox from './hocBox'class Page2 extends Component{render() {return <React.Fragment><h2>{this.props.data}</h2><div>这是组件Page2自己的内容</div>{this.props._renderContent()}<div><button onClick={()=>{this.props._alert('1')}}>点击事件</button></div></React.Fragment>}}export default HocBox(Page2) //这是把组件传入高阶组件- hocBox.jsx
import React, { Component } from 'react'const withStorage = WrappedComponent => {return class extends Component{componentWillMount() {let data = "这是hoc的data"this.setState({ data })}_renderContent = () =>{return <div>这是 hoc 的content 内容</div>}_alert = () =>{alert('alert')}render() {return <WrappedComponent _alert={this._alert} _renderContent={this._renderContent} data={this.state.data} {...this.props}/> }}}export default withStorage- App.js 改写一下
import React from 'react';import Page1 from './page/page1'; //也可以引入page2import './App.css';function App() {return (<div className="App"><Page1/></div>);}export default App;理解
- page1，page2 文件因为都公用 data数据，_renderContent组件，_alert方法。
所以此时就可以 提取一个hoc了 - hocBox 把1的公用东西 统一封装 然后返回给 page1，page2
- 个人感觉 当把 page1，page2 传入 hocBox高阶组件之后，hocBox就相当于是父组件，page1，page2相当于是子组件，平时的 父传子 的 传参，调用方法 都可以相同方法 进行操作
反向继承 事例
建立下列目录
- prototype 文件夹
- hocReverseIn.jsx
- reverseInput.jsx
- prototype 文件夹
reverseInput.jsx
import React, { Component } from 'react';import HocReverseIn from './hocReverseIn';class ReverseInput extends Component{constructor(props){super(props);this.state = {value:''}}// 这个 地方可写可不写 toSubmit = () => {}// 处理输入值变化动作。定义了方法没有方法实体valueChange = (e) => {}render(){const { value } = this.state;return (<div><input onChange={this.valueChange} value={value}/><button onClick={this.toSubmit}>提交</button></div>)}}export default HocReverseIn(ReverseInput)
- hocReverseIn.jsx
import React, { Component } from 'react'export default WrappedComponent => {return class Enhancer extends WrappedComponent {componentWillMount() {// 可以打印this，看一看，相当于继承了传过来的组件，可以直接操作state，事件等console.log(this)}toSubmit = () => {alert("我是hoc的 toSubmit")}valueChange = (e) => {let value = e.target.value;console.log(value)this.setState({value})}render() {return super.render();}}}
- App.js 改写一下
import React from 'react';import Page1 from './page/page1'; //也可以引入page2import ReverseInput from './prototype/reverseInput';import './App.css';function App() {return (<div className="App"><!--<Page1/>--><ReverseInput/></div>);}export default App;理解
- 反向继承允许高阶组件通过 this 关键词获取 WrappedComponent，意味着它可以获取到 state，props，组件生命周期（Component Lifecycle）钩子，以及渲染方法（render）
总结
- 属性代理 方式在高阶组件中返回的组件继承的是Component
- 而反向继承则是继承的传入组件，根据继承的特性，继承可获取父类的所有静态资源，非私有属性和方法，且根据情况可对原方法进行重写。所以反向继承的方式也可以操作传入组件的props以及state。还有一个更重的就是反向继承可以进行渲染劫持。
- 不要在render方法内部使用高阶组件。简单来说react的差分算法会去比较 NowElement === OldElement, 来决定要不要替换这个elementTree。也就是如果你每次返回的结果都不是一个引用，react以为发生了变化，去更替这个组件会导致之前组件的状态丢失。
源码地址
react高阶组件 事例 源码相关推荐
- 「react进阶」一文吃透React高阶组件(HOC)
一 前言 React高阶组件(HOC),对于很多react开发者来说并不陌生,它是灵活使用react组件的一种技巧,高阶组件本身不是组件,它是一个参数为组件,返回值也是一个组件的函数.高阶作用用于强化 ...
- react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
- [react] 高阶组件(HOC)有哪些优点和缺点？
[react] 高阶组件(HOC)有哪些优点和缺点? HOC 优点 通过传递props去影响内层组件的状态,不直接改变内层组件的状态,降低了耦合度 缺点 组件多层嵌套, 增加复杂度与理解成本 ref隔 ...
- THOR：MindSpore 自研高阶优化器源码分析和实践应用
摘要:这篇文章跟大家分享下THOR的实践应用.THOR算法的部分内容当前已经在MindSpore中开源 本文分享自华为云社区<MindSpore 自研高阶优化器源码分析和实践应用>,原文作 ...
- React高阶组件探究
React高阶组件探究 在使用React构建项目的过程中,经常会碰到在不同的组件中需要用到相同功能的情况.不过我们知道,去这些组件中到处编写同样的代码并不优雅. 在以往,为了解决以上的情况,我们会用到 ...
- react组件类型及深入理解react高阶组件
React中常见的组件类型及分类: 1.展示组件(Presentational component) 与 容器组件(Container component) 2.类组件(Class component ...
- React高阶组件_阶段1
react高阶组件_阶段1 作用: 个人总结的高阶组件设计的作用主要有两点, 这里直接使用装饰器方式 非装饰器使用请结合我的博文"react基础梳理_阶段1"中的"自定义 ...
- react 高阶组件hoc使用
react 高阶组件hoc使用 1. 为什么使用高阶组件 2. 具体使用 2.1原代码: 2.2 使用hoc封装后 1. 为什么使用高阶组件 高阶组件(HOC)是 React 中用于复用组件逻辑的一种 ...
- 使用react 高阶组件withRouter
使用react 高阶组件withRouter withRouter 是一个高阶组件,把 match,location,history 三个对象注入到组件的 props 中.这是一个非常实用的函数 re ...
最新文章
- SD-WAN加速推动企业分支上云—Vecloud
- 用自己的数据集在R-FCN框架下进行检测
- 第三章 深入分析Java Web中的中文编码问题
- 区分两种题目类型中的数学期望
- Helm 3 完整教程（六）：在模板中使用 Helm 函数
- 一个求整系数多项式的全部有理根的方法
- 3DMAX的渲染后期丨怎么在PS里P出真实感的灯光？
- Exception in thread “main“ java.lang.ArithmeticException: / by zero
- 360开源的插件化框架Replugin深度剖析
- 蓝牙5.3 Core Spec演进与功能变化
- python阿拉伯数字转换为英文_python实现将英文单词表示的数字转换成阿拉伯数字的方法...
- python: too many indices for array
- 2022年3月15日黑马第三天
- WebView调用微信H5支付
- 六度空间 （bfs，广度优先）
- 计算机教室网络平面示意图,计算机机房平面布置图.doc
- 官宣：传智播客品牌全新升级为「传智教育」
- 【IT干货】当上技术大神，迎娶白富美，走上人生巅峰的机会了解一下？
- MaxViT实战：使用MaxViT实现图像分类任务（一）
- 安卓系统与内置Chrome浏览器