React高阶组件学习笔记
高阶函数的基本概念:
函数可以作为参数被传递,函数可以作为函数值输出。
高阶组件基本概念:
高阶组件就说接受一个组件作为参数,并返回一个新组件的函数。
为什么需要高阶组件
多个组件都需要某个相同的功能,使用高阶组件减少重复实现。
编写高阶组件:
1.实现一个普通组件。
2.把普通组件用函数包裹,并用return 抛出,函数要接受一个参数。
import React from 'react'; //高阶组件传入一个组件再返回一个新的组件 function CompWrap(Com) { return props => <div > <Com {...props} /> <p>性别:{props.sex}</p> </div> } function Comp(props) { return ( <div> <p>姓名:{props.name}</p> <p>年龄:{props.age}</p> </div> ) } export default CompWrap(Comp)
使用高阶组件:
方一:higherOrderComponent(Com)
方二:@higherOrderComponent(详见:React-使用装饰器)
嵌套高阶组件
import React from 'react'; function CompWrapWrapWrap(Com) { console.log('CompWrapWrapWrap') return props => <div > <h1>CompWrapWrapWrap信息:</h1> <Com {...props} /> </div> } function CompWrapWrap(Com) { console.log('CompWrapWrap') return props => <div > <h1>CompWrapWrap信息:</h1> <Com {...props} /> </div> } function CompWrap(Com) { console.log('CompWrap') return props => <div > <Com {...props} /> <p>性别:{props.sex}</p> </div> } function Comp(props) { console.log('Comp') return ( <div> <p>姓名:{props.name}</p> <p>年龄:{props.age}</p> </div> ) } export default CompWrapWrapWrap(CompWrapWrap(CompWrap(Comp)))
控制台打印结果
高阶组件的应用
https://www.cnblogs.com/libin-1/p/7087605.html