react高阶组件的一些运用
今天学习了react高阶组件,刚接触react学习起来还是比较困难,和大家分享一下今天学习的知识吧,另外缺少的地方欢迎补充哈哈
高阶组件(Higher Order Components,简称:HOC)
高阶组件的使用场景
高阶组件的实现方式
高阶组件的实现方式有两种:
function MyHoc(OldCom){
return class NewCom extends React.Component{
render(){
let newProps = { age: 10, sex: '男' }
return (
<OldCom {...newProps} ></OldCom>
)
}
}
} // 导出高阶组件函数
export default MyHOC; // 属性代理: 通过创建新组建来包裹原始组件, 把原始组件作为新组建的子组件渲染
// 功能: 可实现对原始组件的 props数据更新 和 组件模板更新
1 function MyHOC (OldCom){
2 return class NewCom extends OldCom{
3 componentDidMount() {
4 this.setState({ name: '李四' })
5 }
6 render() {
7 return super.render()
8 }
9 }
10 }
11
12 // 导出高阶组件函数
13 export default MyHOC;
14
15 // 反向继承的state数据, 不能在render中改, 会进入死循环
16 // 一般在生命周期函数或自定义函数中更新state
高阶组件的渲染劫持
1 function MyHOC (OldCom){
2 return class NewCom extends OldCom{
3 componentDidMount() {
4 this.setState({ name: '李四' })
5 }
6 render() {
7 // 以下模拟订单页渲染, 从状态管理中取出登录状态, 加以判断
8 let isLogin = true;
9 if(isLogin){
10
11 // 此时,要渲染父组件,就要用父组件对象super渲染
12 return super.render()
13 }else{
14 this.props.history.push("/login")
15 return null
16 }
17 }
18 }
19 }
20 export default MyHOC
渲染劫持的应用
最后在使用用高阶组件的时候,别忘了导入组件,
路径改成你文件路径导入:
是发
react高阶组件的一些运用的更多相关文章
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
- 当初要是看了这篇,React高阶组件早会了
当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...
- react高阶组件的理解
[高阶组件和函数式编程] function hello() { console.log('hello jason'); } function WrapperHello(fn) { return fun ...
- 函数式编程与React高阶组件
相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...
- React高阶组件学习笔记
高阶函数的基本概念: 函数可以作为参数被传递,函数可以作为函数值输出. 高阶组件基本概念: 高阶组件就说接受一个组件作为参数,并返回一个新组件的函数. 为什么需要高阶组件 多个组件都需要某个相同的功能 ...
- 利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
- React——高阶组件
1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...
- react 高阶组件的 理解和应用
高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件.(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装: 具体的是高阶组件的两种形式吧: ...
- react高阶组件的使用
为了提高代码的复用在react中我们可以使用高阶组件 1.添加高阶组件 高阶组件主要代码模板HOC.js export default (WrappedComponent) => { retur ...
随机推荐
- Java学习的第三十七天
1.例3.1求一元二次方程的根 import java.util.Scanner; public class cjava { public static void main(String[]args) ...
- 导入tensorflow.出现importError: DLL load failed: 找不到指定的模块。
导入tensorflow.出现importError: DLL load failed: 找不到指定的模块. 原因 这是由于windows上没有相应的动态链接库导致的,tensorflow依赖很多c+ ...
- Django项目登录注册系统
Django项目之个人网站 关注公众号"轻松学编程"了解更多. Github地址:https://github.com/liangdongchang/MyWeb.git 感兴趣的可 ...
- Ubuntu 18.04 Tomcat 安装及配置
转载自:https://blog.csdn.net/weixx3/article/details/80808484 1.下载Tomcat 8.5.31到Apache Tomcat官网,选择tar.gz ...
- C++ 基础 2:C++ 对 C 语言的拓展
1 引用 1.1 定义及编程实践 引用,是某个已存在变量的另一个名字. 一旦把引用初始化为某个变量,就可以使用该引用名称或变量名称来指向变量. 注意: 引用没有定义,是一种关系型声明.声明它和原有某一 ...
- TCP/IP协议与Socket
1.计算机网络体系结构分层 OSI 参考模型注重"通信协议必要的功能是什么", TCP/IP 则更强调"在计算机上实现协议应该开发哪种程序". 2.TCP/IP ...
- mysql实现当前行的值累加上一行的值
数据库钱包表有日期.收入.支出三个字段.用mysql语句计算每日余额,得如下结果 select m.*, @total :=@total + 收入 - 支出 as 钱包余额 ( select * fr ...
- 调整PG分多次调整和一次到位的迁移差别分析
前言 这个问题来源于我们研发的一个问题,在进行pg调整的时候,是一次调整到位好,还是分多次调整比较好,分多次调整的时候会不会出现某个pg反复挪动的问题,造成整体迁移量大于一次调整的 最近自己的项目上也 ...
- Git-stash(暂存)
修改某文件后,不想commit,使用stash保存在本地的某分支内 # 暂存 git stash ## 可暂存新增文件 git stash -u ## 为此次暂存添加标识 git stash save ...
- Python_爬虫_百度图片
百度图片有些有编码问题,暂时不能爬取,多试几个 #思路:抓取图片地址,根据地址转存图片(注意名称):难点:转码 # -*- coding:utf-8 -*- from urllib import re ...