学习React系列(九)——高阶函数
定义:高阶组件就是一个函数,且该函数接收一个组件作为参数,并返回一个新的组件。
(上一篇已经说过了高阶组件可以用来解决交叉问题)
一、不要改变原始组件,使用组合
class A extends React.PureComponent{
constructor(props){
super(props);
this.state={
content:"我是A"
}
}
componentWillReceiveProps(nextProps){
this.setState({
content:nextProps.content
})
}
componentDidMount(){
console.log("a挂载完毕")
}
render(){
return(
<p>{this.state.content}</p>
)
}
} class B extends React.PureComponent{
constructor(props){
super(props)
this.state={
content:'我是B'
}
}
componentDidMount(){
console.log("b挂载完毕")
}
render(){
return(
<button style={{color:'red'}}>{this.state.content}</button>
)
}
} function initContent(Aa){
// Aa.prototype.componentDidMount=function(){
// console.log("我先挂载好的")
// }
return class K extends React.Component{
constructor(props){
super(props);
this.state={
content:"我是高阶组件生成的"
}
}
componentDidMount(){
this.setState({
content:"我现在为C"
})
console.log("c挂载完毕")
}
render(){
return(
<Aa content={this.state.content} />
)
}
}
} const A1 = initContent(A);
const B1 = initContent(B)
ReactDOM.render(<div><B1></B1><A1></A1></div>, document.getElementById("root"));
若放开上面代码中的注释,那么包裹组件该方法原有的逻辑将被重写,可能会引起冲突。
二、约定:将不相关的props属性传递给包裹组件
render() {
// 过滤掉与高阶函数功能相关的props属性,
// 不再传递
const { extraProp, ...passThroughProps } = this.props; // 向包裹组件注入props属性,一般都是高阶组件的state状态
// 或实例方法
const injectedProp = someStateOrInstanceMethod; // 向包裹组件传递props属性
return (
<WrappedComponent
injectedProp={injectedProp}
{...passThroughProps}
/>
);
}
三、约定:最大使用组合
const ConnectedComment = connect(commentSelector, commentActions)(Comment); 等于下面 // connect是一个返回函数的函数(译者注:就是个高阶函数)
const enhance = connect(commentListSelector, commentListActions);
// 返回的函数就是一个高阶组件,该高阶组件返回一个与Redux store
// 关联起来的新组件
const ConnectedComment = enhance(CommentList);
这个有点类似于jq中的链式调用
四、约定:包装显示名字以便于调试
注意事项
一、不在render函数中使用高阶组件
简单来说react使用差异算法,当再render中使用高阶组件时,每次render返回的高阶组件都是新创建的,与原来的一定不一致,所以每次都要重新渲染,
这里产生的问题不仅仅是性能问题 —— 还有,重新加载一个组件会引起原有组件的所有状态和子组件丢失。
二、必须将静态方法做拷贝
这里我只介绍一个方法
function enhance(WrappedComponent) {
class Enhance extends React.Component {/*...*/}
// 必须得知道要拷贝的方法 :(
Enhance.staticMethod = WrappedComponent.staticMethod;
return Enhance;
}
三、refs属性不能传递
参考:https://doc.react-china.org/docs/higher-order-components.html
学习React系列(九)——高阶函数的更多相关文章
- javascript设计模式学习之三—闭包和高阶函数
一.闭包 闭包某种程度上就是函数的内部函数,可以引用外部函数的局部变量.当外部函数退出后,如果内部函数依旧能被访问到,那么内部函数所引用的外部函数的局部变量就也没有消失,该局部变量的生存周期就被延续. ...
- python学习-41 装饰器 -- 高阶函数
装饰器:本质就是函数.是为其他函数添加附加功能的. 原则:1.不修改被修饰函数的源代码2.不修改被修饰函数的调用方式 --- 装饰器的知识储备 装饰器=高阶函数+函数嵌套+闭包 高阶函数 1.高阶函数 ...
- kotlin学习(7)高阶函数
高阶函数 以另一个函数作为参数或者返回值的函数被称为高阶函数. 函数类型 //隐式声明(省略了变量类型) val sum = (x:Int, y:Int -> x+y) val action = ...
- 廖老师JavaScript教程高阶函数-sort用法
先来学习一个新词:高阶函数 高阶函数英文叫Higher-order function.那么什么是高阶函数? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那 ...
- kotlin高阶函数实战&DSL入门
传统函数演示: 这里以电视节目“非诚勿扰”为例,男人去从一大堆美女当中挑选出自己中意的对象,比如台上有24位妹子,其档案如下: 接下来第一个男嘉宾出场啦,如下: 下面用代码来实现一下,比较简单: 先定 ...
- Python学习笔记系列——高阶函数(map/reduce)
一.map #变量可以指向函数,函数的参数能接受变量,那么一个函数就可以接受另一个函数作为参数,这种函数被称之为高阶函数 def add(x,y,f): return f(x)+f(y) print( ...
- python函数式编程之高阶函数学习
基本概念 函数式编程,是一种抽象程度很高的编程范式,纯粹的函数式编程语言编写的函数没有变量.因此,任意一个函数,只要输入确定,输出就确定的这种函数我们称之为纯函数,我们称这种函数没有副作用.而允许使用 ...
- JavaScript学习笔记(十)——高阶函数之map,reduce,filter,sort
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
- 深入理解javascript函数进阶系列第一篇——高阶函数
前面的话 前面的函数系列中介绍了函数的基础用法.从本文开始,将介绍javascript函数进阶系列,本文将详细介绍高阶函数 定义 高阶函数(higher-order function)指操作函数的函数 ...
随机推荐
- poj-1045(数学不好怪我咯)
Description Consider the AC circuit below. We will assume that the circuit is in steady-state. ...
- 记一次mysql故障处理
突然间,个人网站崩溃了!相信这个报错作为运维都应该清楚的,是数据库宕机了. 数据库我采用mysql 5.1.63,上机查看错误日志: 171010 10:11:01 mysqld_safe Start ...
- Jmeter 多用户同时登陆
在做性能测试的时候,很多情况需要多用户同时登录,下单,那怎么实现多用户的同时登录呢 可以通过CSV Data Set Config组件实现参数化登录 1.新建一个存放用户名和密码的文件, 和jmete ...
- Android学习链接大放送
虽然贴链接这种事情..真是一种很偷懒的做法... 但是我一个小菜鸟,果断还是要以多向别人学习为主... 好资源要和大家分享对不对! 况且..放博客里..比收藏夹的利用几率要大一点! 原作者应该也很喜欢 ...
- 20165226 2017-2018-3 《Java程序设计》第5学习总结
20165226 2017-2018-3 <Java程序设计>第5周学习总结 教材学习内容总结 第七章 内部类与异常类 匿名类创建对象: new Bank() { 匿名类的类体 }: 异常 ...
- 听翁恺老师mooc笔记(15)--文件的输入与输出
<>重定向 如果使用标准的printf输出,有一个比较简便的方法,可以将程序的结果写入一个文件.使用<和>符号,将程序运行结果重定向到文件中去,具体使用到的代码如下: ./te ...
- 课后练习:C语言实现Linux命令——od
课后练习:C语言实现Linux命令--od --------CONTENTS-------- 题目详情与分析 设计思路 遇到的问题及解决 待实现的设想与思考 学习反思与感悟 附1:myod.c「1.0 ...
- 简单的C语言编译器--概述
在学习了编译原理的相关知识后,逐渐的掌握一个编译器的结构.作用和实现方法.同时,希望自己在不断的努力下写出一个简单的C语言编译器. 实现步骤 词法分析器:将C语言测试代码分解成一个一个的词法单元: ...
- 局域网下访问其他计算机搭建的django网页
1.修改工程目录下的setting.py 文件 ALLOWED_HOSTS = ['*'] #*表示允许访问的ip 如果是添加* 则允许所有同局域网环境的主机访问 2.在完成的django工程下运行以 ...
- 201621123068 《Java程序设计》第1周学习总结
1. 本周学习总结 本周学习了如何使用Java来编写程序,还没展开学习具体的语言,但是也花了大量的时间搞清楚Java运行的原理.明白了Java是一种可以跨平台运行语言,搞清了jdk,jre,jvm之间 ...