当前位置:网站首页>Analysis of react high order components
Analysis of react high order components
2020-11-06 01:17:24 【:::::::】
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 [email protected]__ 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 .
版权声明
本文为[:::::::]所创,转载请带上原文链接,感谢
边栏推荐
- C++ 数字、string和char*的转换
- C++学习——centos7上部署C++开发环境
- C++学习——一步步学会写Makefile
- C++学习——临时对象的产生与优化
- C++学习——对象的引用的用法
- C++编程经验(6):使用C++风格的类型转换
- Won the CKA + CKS certificate with the highest gold content in kubernetes in 31 days!
- C + + number, string and char * conversion
- C + + Learning -- capacity() and resize() in C + +
- C + + Learning -- about code performance optimization
猜你喜欢
-
C + + programming experience (6): using C + + style type conversion
-
Latest party and government work report ppt - Park ppt
-
在线身份证号码提取生日工具
-
Online ID number extraction birthday tool
-
️野指针?悬空指针?️ 一文带你搞懂!
-
Field pointer? Dangling pointer? This article will help you understand!
-
HCNA Routing&Switching之GVRP
-
GVRP of hcna Routing & Switching
-
Seq2Seq实现闲聊机器人
-
【闲聊机器人】seq2seq模型的原理
随机推荐
- LeetCode 91. 解码方法
- Seq2seq implements chat robot
- [chat robot] principle of seq2seq model
- Leetcode 91. Decoding method
- HCNA Routing&Switching之GVRP
- GVRP of hcna Routing & Switching
- HDU7016 Random Walk 2
- [Code+#1]Yazid 的新生舞会
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- HDU7016 Random Walk 2
- [code + 1] Yazid's freshman ball
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- Qt Creator 自动补齐变慢的解决
- HALCON 20.11:如何处理标定助手品质问题
- HALCON 20.11:标定助手使用注意事项
- Solution of QT creator's automatic replenishment slowing down
- Halcon 20.11: how to deal with the quality problem of calibration assistant
- Halcon 20.11: precautions for use of calibration assistant
- “十大科学技术问题”揭晓!|青年科学家50²论坛
- "Top ten scientific and technological issues" announced| Young scientists 50 ² forum
- 求反转链表
- Reverse linked list
- js的数据类型
- JS data type
- 记一次文件读写遇到的bug
- Remember the bug encountered in reading and writing a file
- 单例模式
- Singleton mode
- 在这个 N 多编程语言争霸的世界,C++ 究竟还有没有未来?
- In this world of N programming languages, is there a future for C + +?
- es6模板字符
- js Promise
- js 数组方法 回顾
- ES6 template characters
- js Promise
- JS array method review
- 【Golang】️走进 Go 语言️ 第一课 Hello World
- [golang] go into go language lesson 1 Hello World