8、react 高阶组件
1、高阶组件:封装
高阶组件使用得是react得一种模式,增强现有组件得功能
一个高阶组件就是一个函数,这个函数接收得是组件类作为参数得,并且返回得是一个新组件,再返回得新组件中有输入参数组件不具备得功能(以上提到得所有得组件都不是组件得实例,是类,输入得这个组件也可以是无状态组件函数)
2、高阶组件意义:
重用代码
可以修改现有组件得行为
3、实现高阶组件得方式:代理式的高阶组件、继承式的高阶组件
4、代理式得高阶组件--属性代理
5、继承式的高阶组件--反向继承来实现得
6、高阶组件缺点:
静态方法会丢失:
因为原始组件时被包裹再新组件中得,新组件没有原始组件得任何静态方法
refs属性不能传递:
高阶组件可以传递所有得props给包裹得组件Com,但是有一个属性不行,ref,如果我们给高阶组件创建得组件添加ref得话,ref指向的时最外城的容器组件,不是包裹的Com组件解决方法使用react中提供的React.forwardRef来获取
反向继承不能保证完整得子组件被解析:
组件分为class类组件和function函数组件
如果渲染的时候包含function组件的话那么就不能操作组件的子组件了
7、高阶组件可以带给我们很大方便,规则:
props保持一致:
再使用高解组件的时候返回的组件要尽量保持和原组件的props一致
不能再函数组件上使用ref属性,因为函数组件没有办法进行实例
不要以任何方式改变原始组件(第三方组件)
不要再render方法中再使用高阶组件了
在使用传值的时候要把不相关的props进行包裹起来
包裹组件显示名字以便测试
import React, { Component } from 'react' import ReactDom from 'react-dom' ; class Hello extends Component{
render(){
return(
<div>
我是hello组件
姓名:{this.props.name}
</div>
)
}
}
// const testHellow =( Com) =>{ //prop 代理高阶组件
// return class extends Component{
// // constructor(props){
// // super(props)
// // this.setState={
// // sex="男",
// // hobby:"篮球"
// // }
// // } // render(){
// return(
// <div>
// <Com {...this.props}/>
// </div>
// )
// }
// }
// } const testHellow =( Com) =>{ //继承高阶组件
return class extends Com{ render(){
return(
<div>
新的
{super.render()}
</div>
)
}
}
} let Test=testHellow(Hello) class Gao extends Component {
render() {
return ( <Test name="tzb"/> )
}
}
ReactDom.render(
<Gao/>,
document.getElementById("root")
)
8、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高阶组件的一些运用
今天学习了react高阶组件,刚接触react学习起来还是比较困难,和大家分享一下今天学习的知识吧,另外缺少的地方欢迎补充哈哈 高阶组件(Higher Order Components,简称:HOC) ...
- React——高阶组件
1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...
- react 高阶组件的 理解和应用
高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件.(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装: 具体的是高阶组件的两种形式吧: ...
- react高阶组件的使用
为了提高代码的复用在react中我们可以使用高阶组件 1.添加高阶组件 高阶组件主要代码模板HOC.js export default (WrappedComponent) => { retur ...
随机推荐
- flask之session
''' session使用: session创建: (1)导入session from flask import session (2)设置secret_key密钥 app.secret_key='s ...
- removebg抠图小工具
由于比较简单,直接上代码(removebg接口官网),更多小工具获取 (1)官网API,需注册获取X-Api-Key:removebg_官网api.py import requests respons ...
- jsp 判断时间大小
jsp 判断时间大小 <% SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Date ...
- python基本数据类型:字符串及其方法(一)
大小写转换类 方法一:capitalize()首字母大写字符串 name='hatusne miku' name1=name.capitalize() print(name,name1) 方法二:ti ...
- PAT-1079 Total Sales of Supply Chain (树的遍历)
1079. Total Sales of Supply A supply chain is a network of retailers(零售商), distributors(经销商), and su ...
- LOL源代码娜美皮肤免费领取
领取地址 http://t.cn/EyOY8zp 截图
- C#万能排序法
利用下面的方法可以对C#中任何类型的变量.甚至是自定义类型的变量做冒泡排序:原理是使用了C#的Func委托,使用时只要将比较的函数当作参数传进去就能够获取最终的排序结果.
- 前端Json对象与Json字符串互转(4种转换方式)
1>jQuery插件支持的转换方式: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2>浏 ...
- Redis学习笔记(3)
一.Redis的事务(transaction) 1. 事务概念 本质:本质是一组命令的集合,所有的命令按照顺序一次性.串行化地执行,不允许其他命令的加入.Redis通过MULTI.EXEC.WATCH ...
- JavaScript实现树深度优先和广度优先遍历搜索
1.前置条件 我们提前构建一棵树,类型为 Tree ,其节点类型为 Note.这里我们不进行过多的实现,简单描述下 Note 的结构: class Node{ constructor(data){ t ...