Today the cat piece
Optimize your blog interface and be prepared to show everyone a cat movie every time you write (fog).
The words written in the front
- There was one difficulty when you started learning React, the higher-order components.
- Had written a not quite mature article before, here busy take a break to come again detailed understanding.
- High-level component proxy pattern
- The best known higher-order component is the Connect component for Redux state management. You can take a look at the implementation of the source code.
- Redux Connect implementation source code.
Basic concepts of higher order functions
To understand higher-order components, let’s first look at what higher-order functions mean.
- Functions can be passed as arguments
setTimeout(() = > {
console.log(1)},1000)
Copy the code
- The function can be output as a return value
function foo(x){
return function(){
returnx; }}Copy the code
- Similar to the
setTimeout()
.setInterval()
Just ordinary higher-order functions.
setTimeout(a)setInterval(a)// ajax
$.get('/api/v1'.function(){
console.log('data')})Copy the code
These two are standard higher-order functions
High Order Component – HOC
– (The old HOC was a higher-order component)
Advanced component understanding and use
- As with higher-order functions, a function is required to wrap a component and return only a component
// A.js
import React, { Component } from 'react';
function A(WrapperedComponent){
return class test extends Component{
return <div>
<WrapperedComponent />
</div>}}export default A;
// When used by other components
// B.js
import A from './A';
class B extends Component{
return <div>
hello world!!
</div>
}
export default A(B)
Copy the code
Use of higher-order components
- Wrapping HOC directly (WrapperedComponent)
- Use the decorator @hoc
- Nom Run eject (I won’t go into detail here)
- Install Babel adapter files, etc
Write higher-order components
- Implement a common component
- Function wraps this component
A simple demo of advanced components
- Requirement: three pages A,B, and C need to share A progress bar component.
- Codesandbox. IO/s/rj3r509lj… (Here is the source code)
-- index.ts
-- /src
---- HOCprogress.tsx
---- A.tsx
---- B.tsx
---- C.tsx
Copy the code
HOCprogress.tsx(1)
import React, { Component } from "react";
// Then wrap a function in the class's Render () with WrapperedComponent.
function HOCprogress(WrapperedComponent, value: number) {
/ / write a class first
return class hocForm extends Component {
render() {
return (
<div>
<WrapperedComponent />
</div>); }}; }export default HOCprogress;
Copy the code
- Optimize it by adding a simple progress bar
// HOCprogress.tsx import React, { Component } from "react"; function HOCprogress(WrapperedComponent, value: Number) {return class hocForm extends Component {render() {const innerStyle = {padding:'10px', width: "100%"}; const percentStyle = { width: `${value}%`, height: "20px", background: "Url (https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2440333743, 1684406640 & FM = 26 & gp = 0. JPG)"}; return ( <div style={innerStyle}> <div style={percentStyle}> {value} %</div> <WrapperedComponent /> </div> ); }}; } export default HOCprogress;Copy the code
- Add files A,B, and C
A.tsx
import React, { Component } from "react";
// Introduce higher-order functions
import HOCprogress from "./HOCprogress.tsx";
class A extends Component {
render() {
return <div>This is component A!</div>; }}// Wrap A component with higher-order components
export default HOCprogress(A, 56);
Copy the code
B.tsx
import React, { Component } from "react";
import HOCprogress from "./HOCprogress.tsx";
class B extends Component {
render() {
return <div>This is the B component!</div>; }}// Instead of wrapping functions, we can use the @hocProgress decorator, which is detailed in my Decorator article.
export default HOCprogress(B, 98);
/ / C.t sx
Copy the code
index.ts
import React from "react";
import C from "./C.tsx";
import B from "./B.tsx";
import A from "./A.tsx";
class App extends React.Component {
render(){
<div>
<A />
<B />
<C />
</div>
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Copy the code
Finally, look at the effect
Write in the last
- Of course, there are many uses of advanced components that can be learned and understood, but this is just a superficial introduction.
- You can do it in proxy mode. Go
- Operating props
- Extracting component state
- Access to the ref
- Packaging components
reference
- A decorator juejin. Cn/post / 684490…
- imooc www.imooc.com/video/18257