当前位置:网站首页>Analysis of react high order components
Analysis of react high order components
2020-11-06 01:17:00 【:::::::】
background
This way of writing high-order components comes from the practice of the community , The goal is to solve some cross cutting problems (Cross-Cutting Concerns). And the earliest time React
The official solution is to use mixin
. and React It also wrote on the official website :
We previously recommended mixins as a way to handle cross-cutting concerns. We've since realized that mixins create more trouble than they are worth.
Officials are clearly aware of the use of mixins
Technology to solve such problems brings much more trouble than its own value . More information You can refer to the official instructions .
The definition of higher order function
When it comes to high-level components , We have to briefly introduce higher-order functions first . Here's a simple high-order function
const add = (x,y,f) => f(x)+f(y)
When we call add(-5, 6, Math.abs)
when , Parameters x,y and f Receive separately -5,6 and Math.abs
, According to the function definition , We can deduce the calculation process as :
x ==> -5 y ==> 6 f ==> abs f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11
Use code to verify :
add(-5, 6, Math.abs); //11
Higher order is defined in Wikipedia as follows
A higher-order function is a function that satisfies at least one of the following conditions :
- Accept one or more functions as input
- Output a function
Definition of higher-order components
that , What are high-level components ? Analogy to the definition of higher order functions , A higher-order component is a function that takes a component as an argument and returns a new component . Here we need to pay attention to A higher-order component is a function , It's not a component , This must be noted . At the same time, it's important to emphasize that higher-order components themselves are not React
API. It's just a pattern , This pattern is made up of React
The combination of its own nature is inevitable . More generally speaking , High level components pass through packages (wrapped) Introduced into React Components , After a series of processing , Finally, it returns a relative enhancement (enhanced) Of React Components , For other components to call .
<!-- more -->
A simple high-level component
Let's implement a simple high-order component
export default WrappedComponent => class HOC extends Component { render() { return ( <fieldset> <legend> Default title </legend> <WrappedComponent {...this.props} /> </fieldset> ); } };
In other components , We refer to this high-level component to reinforce it
export default class Demo extends Component { render() { return ( <div> I'm a normal component </div> ); } } const WithHeaderDemo = withHeader(Demo);
So let's see React DOM Tree
, After calling a higher-level component , What happened? :
You can see ,Demo
By HOC
The parcel (wrapped) Added a title after the default title . But it will also be found that , If more than one HOC
after , We'll see a lot of HOC
, So we should It's time to optimize , In other words, it is wrapped in high-level components (wrapped) in the future , The original name should be kept .
Let's rewrite the high-level component code above , Add one more getDisplayName
function , For after Demo
Add a static property displayName
.
const getDisplayName = component => component.displayName || component.name || 'Component'; export default WrappedComponent => class HOC extends Component { static displayName = `HOC(${getDisplayName(WrappedComponent)})`; render() { return ( <fieldset> <legend> Default title </legend> <WrappedComponent {...this.props} /> </fieldset> ); } };
Observe again React DOM Tree
You can see , The original name of the component is shown in React DOM Tree
Yes . This HOC Add a title to the original component , In other words, all components that need to add a title can call this HOC Package (wrapped) After the implementation of this function .
Transfer parameters for higher-order components
Now? , our HOC
You can already provide titles for any other component , But we also want to be able to modify the fields in the title . Because our higher-order component is a function , So you can add a parameter to it title
. Now we're right HOC
To rewrite :
export default (WrappedComponent, title = ' Default title ') => class HOC extends Component { static displayName = `HOC(${getDisplayName(WrappedComponent)})`; render() { return ( <fieldset> <legend>{title}</legend> <WrappedComponent {...this.props} /> </fieldset> ); } };
Then we call :
const WithHeaderDemo = withHeader(Demo,' High level components add titles ');
Now observe React DOM Tree
.
You can see , The title has been set correctly .
Of course, we can also coricize it :
export default (title = ' Default title ') => WrappedComponent => class HOC extends Component { static displayName = `HOC(${getDisplayName(WrappedComponent)})`; render() { return ( <fieldset> <legend>{title}</legend> <WrappedComponent {...this.props} /> </fieldset> ); } }; const WithHeaderDemo = withHeader(' High level components add titles ')(Demo);
common HOC Realization way
Based on property proxy (Props Proxy) The way
Property proxies are the most common use of high-level components , The high-order components mentioned above are in this way . It does something by doing something , That will be wrapped in components props
And the new props
Pass it to this component together , This is called a property proxy .
export default function GenerateId(WrappedComponent) { return class HOC extends Component { static displayName = `PropsBorkerHOC(${getDisplayName(WrappedComponent)})`; render() { const newProps = { id: Math.random().toString(36).substring(2).toUpperCase() }; return createElement(WrappedComponent, { ...this.props, ...newProps }); } }; }
call GenerateId
:
const PropsBorkerDemo = GenerateId(Demo);
Then we observe React Dom Tree
:
We can see through GenerateId
Well done Demo
Added id
.
Based on reverse inheritance (Inheritance Inversion) The way
Let's start with a simple example of reverse inheritance :
export default function (WrappedComponent) { return class Enhancer extends WrappedComponent { static displayName = `InheritanceHOC(${getDisplayName(WrappedComponent)})`; componentWillMount() { // It's easy to get state, Make some more in-depth changes . this.setState({ innerText: ' I was Inheritance Changed the value ' }); } render() { return super.render(); } }; }
As you can see, the high-level component class returned (Enhancer
) Inherited WrappedComponent
. And it's called reverse inheritance because WrappedComponent
Passively by Enhancer
Inherit , instead of WrappedComponent
To inherit Enhancer
. In this way, the relationship between them reversed .
Reverse inheritance allows higher-order components to pass through this
Keyword acquisition WrappedComponent
, It means that it can get state
,props
, Component lifecycle (Component Lifecycle) hook , And rendering methods (render). Deepen understanding You can read __@Wenliang__ In the article Inheritance Inversion(II)
The content of this section .
Problems with high-level components
Static method lost
When packaging components with high-level components , The original component is wrapped in a container component , This means that the new component will lose all static methods of the original component . The following is Demo Add a static method :
Demo.getDisplayName = () => 'Demo';
Then call HOC
:
// Use high-level components const WithHeaderDemo = HOC(Demo); // The component after calling does not have `getDisplayName` Methodical typeof WithHeaderDemo.getDisplayName === 'undefined' // true
The easiest way to solve this problem is (Yǘ Chǚn) The way is , Copy all static methods of the original component to the new component :
export default (title = ' Default title ') => (WrappedComponent) => { class HOC extends Component { static displayName = `HOC(${getDisplayName(WrappedComponent)})`; render() { return ( <fieldset> <legend>{title}</legend> <WrappedComponent {...this.props} /> </fieldset> ); } } HOC.getDisplayName = WrappedComponent.getDisplayName; return HOC; };
To do so , You need to know what static methods need to be copied . Or you can use hoist-non-react-statics To help you automatically handle , It will automatically copy all non React Static method of :
import hoistNonReactStatic from 'hoist-non-react-statics'; export default (title = ' Default title ') => (WrappedComponent) => { class HOC extends Component { static displayName = `HOC(${getDisplayName(WrappedComponent)})`; render() { return ( <fieldset> <legend>{title}</legend> <WrappedComponent {...this.props} /> </fieldset> ); } } // Copy static methods hoistNonReactStatic(HOC, WrappedComponent); return HOC; };
Refs Properties cannot be passed
Generally speaking , Higher level components can pass all props Attributes to package components , But it can't deliver refs
quote . Because it's not like key
equally ,refs
It's a pseudo property ,React
It has been specially treated . If you add... To an element of a component created by an advanced component ref
application , that ref
Point to the instance of the outermost container component , Not package components . But sometimes , We are bound to use refs
, The official solution is :
Pass a ref Callback function properties , That is to give ref Apply a different name
He also stressed that :React It is not recommended to use at any time ref application rewrite Demo
class Demo extends Component { static propTypes = { getRef: PropTypes.func } static getDisplayName() { return 'Demo'; } constructor(props) { super(props); this.state = { innerText: ' I'm a normal component ' }; } render() { const { getRef, ...props } = this.props; return ( <div ref={getRef} {...props}> {this.state.innerText} </div> ); } }
Then we call :
<WithHeaderDemo getRef={(ref) => { // The callback function is treated as normal props Attribute passing this.headerDemo = ref; }} />
Although this is not the perfect solution , however React
Officials say they are exploring ways to solve the problem , It allows us to use high-level components without paying attention to this problem .
Conclusion
This article is just a brief introduction to the two most common uses of high-level components : Property agent
and Reverse inheritance
. And common problems with high-level components . I hope that through the reading of this article, you can have a basic understanding of high-level components . The code generated by writing this article is in study-hoc in .
The author of this article :Godfery This article is published in :HYPERS Front end blogs
Reference article :
Higher-Order Components Explain profound theories in simple language React High order component With three questions, let's talk in simple terms React High order component Ruan Yifeng - Higher order function Deep understanding of high-level components
Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .
版权声明
本文为[:::::::]所创,转载请带上原文链接,感谢
边栏推荐
- 2018中国云厂商TOP5:阿里云、腾讯云、AWS、电信、联通 ...
- DTU连接经常遇到的问题有哪些
- iptables基礎原理和使用簡介
- 钻石标准--Diamond Standard
- The difference between Es5 class and ES6 class
- 你的财务报告该换个高级的套路了——财务分析驾驶舱
- 如何将数据变成资产?吸引数据科学家
- Tool class under JUC package, its name is locksupport! Did you make it?
- Group count - word length
- Troubleshooting and summary of JVM Metaspace memory overflow
猜你喜欢
随机推荐
Network security engineer Demo: the original * * is to get your computer administrator rights! 【***】
有关PDF417条码码制的结构介绍
Computer TCP / IP interview 10 even asked, how many can you withstand?
Why do private enterprises do party building? ——Special subject study of geek state holding Party branch
网络安全工程师演示:原来***是这样获取你的计算机管理员权限的!【维持】
Serilog原始碼解析——使用方法
PLC模拟量输入和数字量输入是什么
遞迴思想的巧妙理解
哇,ElasticSearch多字段权重排序居然可以这么玩
Troubleshooting and summary of JVM Metaspace memory overflow
Aprelu: cross border application, adaptive relu | IEEE tie 2020 for machine fault detection
(1) ASP.NET Introduction to core3.1 Ocelot
Ubuntu18.04上安裝NS-3
(1)ASP.NET Core3.1 Ocelot介紹
Synchronous configuration from git to consult with git 2consul
如果前端不使用SPA又能怎样?- Hacker News
Asp.Net Core learning notes: Introduction
Want to do read-write separation, give you some small experience
至联云分享:IPFS/Filecoin值不值得投资?
03_ Detailed explanation and test of installation and configuration of Ubuntu Samba