Tabla de contenido
1. Cognición de funciones de orden superior
2. Cognición del decorador de clase (decorador)
3. Cognición de componentes de alto nivel (modificador analógico)
4. Dos formas de componentes de alto nivel (ranuras analógicas)
5. Tipo de combinación (proxy) de componentes de alto nivel de componentes de alto nivel
6. Componentes de orden superior de tipos heredados de componentes de orden superior
7. Resumen cognitivo de componentes de alto nivel
在学习本章内容之前，最好是具备react中‘插槽(children)’及‘组合与继承’ 这两点的知识积累。
__首先，我们要知道高阶组件能够做到什么： 对复用UI、数据逻辑等进行封装，对参数组件进行制式处理，从而让参数组建具备特定的ui或功能__
1. Cognición de funciones de orden superior
在本系列之前的学习中，你应当明白——组件的本质是函数。
那么什么是高阶函数？
高阶函数也是一个函数，__它接受函数为参数,返回处理过后的函数或者一个新函数__。
那么我们知道，高阶函数的作用是对参数函数进行统一的加工处理。
形如：
//这里我们写了一个函数作为之后的参数
//思考一下为什么把参数函数定义在上面
function testedFunc(){
this.a = 1;
}
// 在此定义一个高阶函数
function highOrderFunc(func){
func.prototype.aaa = 3;
return func;
}
//这里测试一下我们写的高阶函数
var newFunc = highOrderFunc(testedFunc);
//打印看看处理后的函数原型及实例
console.log(newFunc.prototype,1);
console.log(new newFunc(),2);
(No seas tan perezoso, copia y pega rápidamente f12)
Los resultados impresos son los siguientes:
那么我们知道了，高阶函数 作用是 处理(加工)传入的函数，以达成某种目的…
2. Cognición del decorador de clase (decorador)
ES6 agregó la clase class, sabemos que la esencia de una clase también es una función.
class testClass{
a = 1;
}
console.log( typeof testClass)
打印结果如下：
那么类的修饰器——decorator 是个怎样的东西咧？
__类的修饰器是es6的提案之一，在es7标准中实现。 修饰器也是一个函数，把传入的原有类修饰一下，return 出处理后的类或新类。__
这时候我们脑海中应该闪过一个词——高阶类…(？？？黑人问号)
不觉得太难听了吗？
ok, vamos a demostrarlo con código:
//注意，下面这种@xx的写法是修饰器的标准写法，是属于es7的产物，要用babel哦~
//定义一个修饰器decF
function decF(adornedClass){
return class extends adornedClass{
b= 2
}
}
// 使用方式1 ： @decF
@decF
class foo{
a = 1
}
console.log( new foo(),1)
class bar{
a='bar'
}
// 使用方式2 ： decF();
const newBar = decF(bar);
console.log( new newBar(),2);
Se imprime de la siguiente manera:
Mira, para eso están los decoradores.
Cabe señalar que los decoradores de clase pueden modificar funciones? ¿Por qué?
// Puedes encontrar la respuesta por ti mismo, y si hablas de algo más, te desviarás.
3. Cognición de componentes de alto nivel (modificador analógico)
Luego, después de la cognición de los decoradores de clase, el concepto de componentes de alto nivel es muy claro.
El componente de alto orden de React (componente de alto orden, denominado hoc) es un decorador de una clase... acepta una clase de componente como parámetro y devuelve una nueva clase de componente; la forma es la siguiente
:
// 用法1 高阶函数式写法
hoc(WrapedComponent);
// 用法2 decorator 修饰器写法
@hoc
class A extends React.Component{
//...
}
¿Todos parecen familiares?
ok, escribimos un componente regular de alto orden y lo exponemos;
export default WrapedComponent => class NewComponent extends React.Component{
render(){
return <WrapedComponent a = '添加了一个属性' />
}
}
El método de escritura de esta función de flecha es fácil de entender.
Como se muestra en el código, hemos escrito un componente de alto nivel, y en el nuevo componente devuelto NewComponent, el componente entrante WrapedComponent se usa en forma combinada. (Así que no entiendo los zapatos de niños de combinación y herencia, así que date prisa y compénsalo y luego míralo de nuevo)
Alguien aquí preguntó por qué hay dos corchetes conectados
//形如
connect(func1,func2 )( WrapedComponent)
OK, vamos a escribirlo a mano también.
export default (func1,func2)=>WrapedComponent=>class NewComponent extends React.Component{
// ....
}
Esta función de flecha de dos capas es fácil de entender, ¿verdad?
Por cierto, generalmente, una función de orden superior con una capa más de anidamiento como connect se denomina función de orden superior de segundo orden. Por analogía, tres paréntesis se denominan funciones de orden superior de tercer orden...
4. Dos formas de componentes de alto nivel (ranuras analógicas)
Al igual que los niños, los componentes de orden superior también existen en dos formas: composición (también llamado proxy) y herencia.
Entonces, ¿cuál es la relación entre los componentes de orden superior y las ranuras para niños?
Comparemos el siguiente código:
//写一个组合形式的具备插槽功能的组件Provider
class Provider extends React.Component{
render(){
return (
<div>
{this.props.children}
</div>
)
}
}
// 下面是使用的方式
import ComA from './ComA'
const useB = (<Provider > <ComA a='使用Provider时添加了a属性'/> </Provider >)
// 写一个组合形式的高阶组件
const hocAddA = WrapedComponent => class NewComponent extends React.component{
render(){
return (
<div>
<WrapedComponent a ='定义hocAddA时添加了a属性'/>
</div>
)
}
}
// 我们来尝试使用它
const NewA = hocAddA(ComA);
// 或者
@hocAddA
class ComB ...
Bien, el rendimiento de los dos códigos anteriores después de su uso es casi el mismo (también se realiza la función de agregar el atributo a a ComA).
Pero tenga en cuenta que la implementación de la ranura (hijos) no se preocupa por los cambios funcionales del componente de la ranura. Simplemente use la ranura como un subcomponente del componente actual (esto es composición).
//同样的，我现在这样使用
import ComA from './ComA'
const useB = (<Provider > <ComA b='使用Provider时添加了b属性'/> </Provider >)
Para las funciones de orden superior, los cambios de función de los componentes de los parámetros están codificados de forma rígida cuando se definen.
Pase el componente y el componente resultante solo agregará el atributo a.
Por supuesto, también podemos usar parámetros para controlar los cambios de función de los componentes de los parámetros a través de funciones de segundo orden y orden superior:
定义一个二阶高阶组件
const hocAddProps = props => WrapedComponent => class NewComponent extends React.Component{
render(){
return (
<div>
<WrapedComponent {...props}/>
</div>
)
}
}
// 于是我们这样使用它
const propsAdded = {
a: '添加了一个属性a',
b: ‘添加了一个属性b'
}
const NewA = hocAddProps(propsAdded)(ComA)
etcétera. De hecho, lo que pueden hacer los componentes de alto nivel en forma de combinación, los niños básicamente pueden hacerlo.
Entonces, ¿cuál es la diferencia entre un componente de orden superior combinado y un componente de orden superior heredado?
Forma de combinación (también conocida como forma de proxy): el nuevo componente devuelto hereda de React.Component, pero usa el componente de parámetro como un subcomponente del nuevo componente, que puede realizar el empaquetado del componente de parámetro, la adición, eliminación y modificación de propiedades, y el estado Extracción y otras funciones.Forma
de herencia: El nuevo componente devuelto hereda el componente de parámetro, para realizar la función de reescribir el componente de parámetro con el componente de parámetro como plantilla.
Los puntos clave mencionados anteriormente deben ser considerados.
Volvamos atrás y pensemos en los decoradores de clase: devolver una nueva clase o reescribir la clase de parámetro.
¿Es la misma razón?
Entonces, para los componentes de alto nivel, sigue siendo js, y la sintaxis de jsx se agrega como máximo.
5. Tipo de combinación (proxy) de componentes de alto nivel de componentes de alto nivel
上述我们已经知道了组合(代理)类型的高阶组件的概念和思想，以及它能实现的功能。
Entonces vamos al código de demostración.
import React,{Component,createRef} from 'react';
export default title=>WrapedComponent=> class NewComponent extends Component{
//抽离状态
state={
value:''
}
// 访问refs
myref=createRef();
handleInputChange=(e)=>{
this.setState({
value:e.target.value
})
}
render(){
const {wap,...otherprops} = this.props;
const newProps = {
value:this.state.value,
onChange:this.handleInputChange
}
//包装组件
return (
<div>
我是组件NewComponent，是典型的代理形式的高阶组件，我除了做自己的事，还可以对 我的参数组件：
1增加/删减props 2抽离状态 3访问ref 4包装组件
<div>我的title：{title}</div>
<WrapedComponent {...otherprops} ref={this.myref} inputProps={newProps}/>
</div>
)
}
}
Aquí quiero hablar sobre la extracción de estado en las funciones anteriores por separado.
Extracción de estado (promoción de estado): promueve el estado del componente de parámetro (es decir, el subcomponente utilizado en el formulario de proxy) a NewComponent (es decir, el componente actual en el formulario de proxy, es decir, el componente principal), de modo que el subcomponente solo es responsable de la representación de la interfaz de usuario, mientras que el componente principal pasa el estado a través de accesorios para controlar los datos.
En otras palabras, NewComponent se convierte en el componente contenedor del componente de parámetro, y el componente de parámetro simplemente se usa como un componente de interfaz de usuario.
ps : Los conceptos de componentes de contenedor y componentes de interfaz de usuario son relativos. Por ejemplo, si el estado de B se extrae al componente principal A, entonces A es el componente contenedor de B en relación con B, por lo que debe entenderse. Se mencionará en react-redux más adelante.
6. Componentes de orden superior de tipos heredados de componentes de orden superior
Del mismo modo, ya hemos conocido el concepto y la idea de los componentes de orden superior del tipo heredado anterior, por lo que también vamos directamente al código de demostración.
import React from 'react'
//这个是给返回的新组件起名用的函数，有兴趣可以结合调试器玩玩。
function getDisplayName(WrapedComponent){
return WrapedComponent.displayName||WrapedComponent.name||'component'
}
export default color=>WrapedComponent=> class NewComponent extends WrapedComponent{
// static displayName = `E(${getDisplayName(Inconponent)})`
;
aaa = '我改写了参数组件中的aaa属性'
compoenentDidMount(){
console.log('我不仅可以改写属性和方法，我还能改写钩子')
}
render(){
const {wap,...otherprops} = this.props;
const element = super.render();
console.log(element);
const newStyle = {
color:element.type==='div'?color:null
}
const newProps = {
...otherprops,
style:newStyle
}
// 我甚至还改写了参数组件的UI
return React.cloneElement(element,newProps,element.props.children)
}
}
Como se muestra en el código anterior (sígueme, slob), hemos utilizado con éxito el componente de parámetro como plantilla, reescribimos las propiedades definidas, los métodos, los ganchos e incluso la interfaz de usuario en el componente de parámetro, y agregamos propiedades no definidas en el componente de parámetro, métodos, ganchos, etc.
Por supuesto, de acuerdo con las ideas del capítulo 'Composición y herencia' en la documentación oficial, en la mayoría de los casos, no usamos componentes de alto nivel de tipo herencia, y no defendemos esta forma de uso (de hecho, yo personalmente Creo que es bastante divertido).
7. Resumen cognitivo de componentes de alto nivel
那么我们通过以上学习，已经完完整整掌握了高阶组件的使用。
在日常项目中，我们也可以在合适的场景中使用高阶组件完成对应的需求。
回顾最上面提到过的高阶组件的使用场景:
__对复用UI、数据逻辑等进行封装，对参数组件进行制式处理，从而让参数组建具备特定的ui或功能__
再回顾下上述讲到过的高阶函数，类的修饰器等——
你get到了吗？
面试中会问到高阶组件的问题，消化掉这一篇，那么你便可以连续不断的给面试官讲上半个小时征服他。
Finalmente, si el contenido de este capítulo es útil para su aprendizaje de reacción, recuerde prestar atención y esperar la actualización.